Advance Typography - Task 2: Key Artwork & Collateral

Manipulate perception through typography, layout, and visual hierarchy.
In advertising, perception is often controlled to guide audience reactions (e.g., emphasis on certain words or images).

Ethical Consideration:

While effective, perception manipulation can border on dishonesty, especially in advertising.
Balance persuasion with transparency.

2. Contrast in Typography

Purpose:

Creates visual distinction between elements (e.g., headings vs. body text).
Improves readability and guides the reader’s eye.

Methods of Creating Contrast:

Size:

Larger text dominates attention (e.g., headlines, titles).
Example: Newspapers use big, bold headlines to grab attention.

Weight:

Bold vs. light fonts create emphasis.
Example: Key terms in a paragraph can be bolded for clarity.

Form:

Variations like italics, ALL CAPS, or condensed fonts.
Example: Italics for quotes or emphasis.

Structure:

Differences in typefaces (e.g., serif vs. sans-serif).
Example: Serif fonts for body text, sans-serif for headings.

Texture:

Layering text to create depth (e.g., overlapping words).
Example: Posters with textured typography for artistic effect.

Direction:

Aligning text vertically, horizontally, or at angles.
Example: Magazine layouts with diagonal text for dynamic flow.

Color:

Strategic use of color to highlight or differentiate.
Example: Red text for warnings or calls to action.

Note:

Avoid pairing overly similar fonts (e.g., two sans-serif fonts with slight differences).
Strong contrast ensures clarity and visual appeal.

3. Form in Typography

Definition: The visual and aesthetic quality of type.
Importance:

First impression matters, form attracts attention before content is read.
Balances functionality (readability) and creativity (memorability).
Examples:

Creative Letterforms: Custom typography in logos or posters.
Strategic Placement: Aligning text to create harmony (e.g., curves of letters matching visual elements).

Analogy:

Like a song’s melody, form makes typography memorable even if the words aren’t immediately processed.

4. Organization & Gestalt Principles

Gestalt Psychology: "The whole is greater than the sum of its parts."
Viewers perceive unified wholes before individual elements.
Key Principles for Designers:

Similarity:

Elements with shared traits (color, shape, size) are grouped.
Example: Bullet points in the same color/style.

Proximity:

Closer elements appear related.
Example: Captions placed near images.

Closure:

Minds fill gaps to complete shapes.
Example: WWF’s partial panda logo still reads as complete.

Continuity:

Aligned elements create smooth visual flow.
Example: Text following a curved path.

Application:

Critical for complex layouts (e.g., magazines, websites).
Poor organization confuses readers (e.g., misaligned headlines).

5. Design as Social Responsibility

Why It Matters:

Typography affects comprehension (e.g., textbooks, public signs).
Poor design hinders information transfer.

Designer’s Duty:

Prioritize clarity over aesthetics when necessary.
Ensure accessibility (e.g., legible fonts for all readers).

INSTRUCTION

<iframe src="https://drive.google.com/file/d/1YBygHLtNCzigDLjdac1p5jgQ3Ey5eRyV/preview" width="640" height="480" allow="autoplay"></iframe>

TASK

TASK 2A - Key Artwork

In this task, we were assigned to create a wordmark using either our name or a preferred pseudonym, as long as it contains at least four letters.

Mindmap and Moodboard

Before doing the assignment, I created a mindmap and moodboard to guide me on what kind of wordmark I wanted to make later.

Fig 1.1 Mindmap and Moodboard (20/05/2025)

Sketches

After exploring what kind of wordmark and identity I wanted to express, I created six sketches that show the direction I planned for the wordmark.

Fig 1.2 Wordmark Sketches (20/05/2025)

Digitize

Before Feedback

In the end, I chose sketch number 5 to further develop and digitize.

Fig 1.3 Digitize (Before Feedback) (27/05/2025)

After Feedback

Mr. Vinod said that he had no problem with my wordmark, except that the "Q" looked kind of like a "P" and the curves in my wordmark turned out a bit square-ish. He also mentioned that I need to be more mindful of my line weight. Because of that, I decided to create a new sketches, which I ended up liking more than the previous one.

Fig 1.4 New Sketches (03/06/2025)

After asking my friends about my three sketches, they all liked number 3, so I ended up using that one to digitize. While working on it, I redid a lot of the tails because I didn’t feel satisfied, until I finally found one that I liked. I used this wordmark as my submission for Task 2A and for further use in the collateral.

Fig 1.5 Wordmark process (03/06/2025)

Final Submission

Fig 1.6 Wordmark (Final) (03/06/2025)

TASK 2B - Collateral

After completing Task 2A, we need to design an animated key artwork and then proceed to create collateral materials, including an Instagram account.

Animation

Process

I decided to use After Effects for the animation. The whole process took me three hours.

Fig 1.7 Animation Process 1 (09/06/2025)

Fig 1.8 Animation Process 2 (09/06/2025)

Attempt 1

I asked my friends what they thought about my animation. They said it was good, but I should remove the powder because it could affect the branding. They said it's better to keep the text only, since it's already strong on its own.

Fig 1.9 Animation Attempt 1 (09/06/2025)

Attempt 2

I ended up removing the powder and used the text only. I still kept the circle at the beginning just for the sake of the appearing transition.

Fig 1.10 Animation Attempt 2 (09/06/2025)

Instagram Layout

Process

For the Instagram account, I mixed and matched the color palette until I ended up with one that I liked: #F6F5EC, #D9B9B2, #4B7D3F, #6E2C41, and #36383E (from top to bottom).

Fig 1.11 Testing Color Palette (04/06/2025)

Instagram Account

Link: https://www.instagram.com/aquelaroma?igsh=dnhoN285aW9iNHp4

Fig 1.12 Instagram Account (11/06/2025)

Final Submission

Fig 1.13 Wordmark Animation (09/06/2025)

Fig 1.14 Wordmark on White Background (04/06/2025)

Fig 1.15 Wordmark on Black Background (04/06/2025)

Fig 1.16 Color Palette (04/06/2025)

Fig 1.17 Neutral Shade Wordmark on Lightest Shade (04/06/2025)

Fig 1.18 Lightest Shade Wordmark on Darkest Shade (04/06/2025)

Fig 1.19 Instagram Post (1) (04/06/2025)

Fig 1.20 Instagram Post (2) (04/06/2025)

Fig 1.21 Instagram Post (3) (04/06/2025)

Fig 1.22 Instagram Post (4) (04/06/2025)

Fig 1.23 Instagram Post (5) (04/06/2025)

Fig 1.24 Instagram Post (6) (04/06/2025)

Instagram Account

Link: https://www.instagram.com/aquelaroma?igsh=dnhoN285aW9iNHp4

Fig 1.25 Instagram Account (11/06/2025)

PDF Format

Fig 1.26 PDF Format (18/06/2025)

FEEDBACK

Week 5

General Feedback: Mr. Vinod told us to be careful with anything we put in the background as it can leave an impression on viewers. He also reminded us to be mindful of the keyword and try to make the resemblance on our wordmark.

Week 6

Specific Feedback: Mr. Vinod said that he doesn't have any problem with my wordmark aside from the inconsistent curve, as some of them look square-ish, and the Q needs to be revised since it looks like P.

General Feedback: Be careful with the alignment, line weight, and color palette. Don’t use a dull color palette, we need to follow the instruction: two light shades, two neutral but complementary colors, and one dark shade.

Week 7

General Feedback: Mr. Vinod reminded us to change the Instagram format, as now they have a new update with the preview, and we need to adjust accordingly.

Week 8

Specific Feedback: (absent)

General Feedback: Today’s class was a feedback session, and afterward, Mr. Vinod gave a briefing about Task 3.

REFLECTIONS

Experience

Throughout this assignment, I found the task challenging. Creating a wordmark that reflects myself was difficult because I didn’t really know what to choose, even after making the mindmap. However, during class, when Mr. Vinod said we could create something based on our culture, I was inspired to make something from the island I’m from, Java. I used to love learning about the Javanese script back in middle school, and doing the research brought back those memories.

Digitizing the artwork was one of the hardest parts of this task. I had to be careful with my curves, line weight, kerning, and so on. I needed to zoom in a lot and check whether things looked right. It was time-consuming, but I like how it turned out.

Observations

While working on this, I felt frustrated because I didn’t know how to sketch my wordmark. I did a lot of research just to figure out what I wanted. It took some time, but once I found a direction I liked, I tried to apply the same characteristics to my artwork.

Findings

From this task, I learned how to create a wordmark using everything I’ve learned in class. I realized that building personal branding isn’t easy, and there are a lot of things I need to consider. Coming up with a wordmark and a brand that really resonates with me was hard, but I managed to solve it. I also got to use two Adobe software, Adobe Illustrator and Adobe After Effects. Through this assignment, I started to understand After Effects better, especially when animating my wordmark.

Search This Blog

Aquela Zefanya Soares (0374377)