Advanced Typography - Task 2: Key Artwork & Collateral
ADVANCED TYPOGRAPHY - TASK 2: KEY ARTWORK & COLLATERAL
WEEK 4 - WEEK 7 | 10/11/2025 - 21/10/2026
Aina Ahmed Aleem | 0355701 | BDCM
Advanced Typography | Mr. Vinod
LECTURES
Contrast in Size
Size contrast creates a clear focal point. A larger element naturally draws the eye first, which is why titles or headings are often much bigger than body text.
Through this process, I realized that my design style leans toward
minimalist, creative, and sleek visuals which ultimately shaped the
final direction of my wordmark, “AINA.”
I then began sketching different typographic explorations to refine the
concept.
These are the sketches I created during my exploration phase, and the one below is the sketch I selected to digitize.
I ensured that all lines were properly aligned, the proportions were accurate, and the spacing between each line remained consistent throughout.
So, I went back to the beginning and experimented with a new direction this time incorporating bright orange and a berry pink. These shades complemented each other well and felt much more authentic to my brand identity.
The final outcome showcases my wordmark, carefully selected color palette, designed collaterals, and self-portrait, all coming together to convey a cohesive and distinctive brand identity.
TABLE OF CONTENTS
- Lectures
- Instructions
- Part A: Key Artwork
- Part B: Type and Play
- Task 2 Outcome Compilation
- Feedback
- Further Readings
- Reflection
LECTURES
WEEK 5 - 07/10/2025
Perception refers to how something is seen, understood, or interpreted.
In typography, perception is shaped not just by what we see directly but
also by external factors that influence how we read and understand
visual content. Elements such as contrast, form, color, and organization
guide how a viewer navigates and interprets text and graphics. This
raises key questions: How does contrast affect readability, and what
role does form play in shaping meaning?
Lecture 5 : Perception and Organization
Contrast
Typography uses many techniques to create contrast. Rudi Ruegg’s methods provide simple, effective ways to differentiate elements. Carl Dair expands on this by introducing additional principles such as texture and direction, outlining seven key types of contrast that help designs stand out with clarity and impact:
Typography uses many techniques to create contrast. Rudi Ruegg’s methods provide simple, effective ways to differentiate elements. Carl Dair expands on this by introducing additional principles such as texture and direction, outlining seven key types of contrast that help designs stand out with clarity and impact:
- Size
- Weight
- Form
- Structure
- Texture
- Color
- Direction
Size contrast creates a clear focal point. A larger element naturally draws the eye first, which is why titles or headings are often much bigger than body text.
Contrast in Weight
Weight contrast highlights differences in boldness. Bold text stands out against lighter text, and even non-text elements like thick lines or shapes can create a strong visual emphasis.
Weight contrast highlights differences in boldness. Bold text stands out against lighter text, and even non-text elements like thick lines or shapes can create a strong visual emphasis.
Contrast in Form
Form contrast refers to variations such as uppercase vs. lowercase, Roman vs. italic, or condensed vs. expanded typefaces.
Form contrast refers to variations such as uppercase vs. lowercase, Roman vs. italic, or condensed vs. expanded typefaces.
Contrast in Structure
Structure compares different typeface categories—for example, a monoline sans serif versus a serif, or an italic style versus blackletter.
Structure compares different typeface categories—for example, a monoline sans serif versus a serif, or an italic style versus blackletter.
Contrast in Texture
Texture is created by combining size, weight, form, and structure across blocks of text. It reflects how type appears both up close and from a distance based on letterforms and spacing.
Texture is created by combining size, weight, form, and structure across blocks of text. It reflects how type appears both up close and from a distance based on letterforms and spacing.
Contrast in Direction
Directional contrast involves vertical, horizontal, or angled orientations. Rotated text or varying line lengths can shift how the viewer’s eye moves through the layout.
Directional contrast involves vertical, horizontal, or angled orientations. Rotated text or varying line lengths can shift how the viewer’s eye moves through the layout.
Contrast in Color
Color contrast considers tonal differences. Black on white is naturally
strongest, so when using additional colors, it's important to decide which
elements should stand out most.
Form
Form refers to the overall appearance and feel of elements within a typographic composition. It plays a major role in creating visual impact and shaping first impressions. Strong typographic form is engaging, guides the viewer’s eye smoothly, and leaves a memorable impression.
Form refers to the overall appearance and feel of elements within a typographic composition. It plays a major role in creating visual impact and shaping first impressions. Strong typographic form is engaging, guides the viewer’s eye smoothly, and leaves a memorable impression.
Organization / Gestalt
Gestalt is a German term meaning “shape” or “configuration.” Gestalt theory focuses on how we naturally group visual elements to form meaningful perceptions. It highlights that we experience designs as unified wholes—meaning the overall form is more important than individual parts.
In design, this helps us understand how audiences interpret visual information and how elements should be arranged to create clarity and cohesion.
Gestalt Principles of Perceptual Organization
These principles help guide visual hierarchy and organization. Understanding and applying them strengthens typographic layout, improves clarity, and makes complex content easier to interpret.
Gestalt is a German term meaning “shape” or “configuration.” Gestalt theory focuses on how we naturally group visual elements to form meaningful perceptions. It highlights that we experience designs as unified wholes—meaning the overall form is more important than individual parts.
In design, this helps us understand how audiences interpret visual information and how elements should be arranged to create clarity and cohesion.
Gestalt Principles of Perceptual Organization
- Law of Similarity – Elements that look alike (in color, size, shape, etc.) are perceived as a group.
- Law of Proximity – Elements placed close together are seen as belonging to the same group.
- Law of Closure – The mind tends to complete incomplete shapes or forms.
- Law of Continuation – We perceive elements as continuing along a smooth path or direction.
- Law of Symmetry – Symmetrical elements are perceived as part of the same group or unified structure.
- Law of Simplicity (Prägnanz) – We interpret complex images in the simplest, most organized form possible.
These principles help guide visual hierarchy and organization. Understanding and applying them strengthens typographic layout, improves clarity, and makes complex content easier to interpret.
INSTRUCTIONS
TASK 2 - PART A : KEY ARTWORK
Timeframe: Week 04 - Week
05
Deadline: Week 06
Description:
Create a key artwork using custom lettering that represents an
individual’s identity while standing strong as an independent visual
piece. The design must be versatile, allowing its elements to be
rearranged into patterns or graphics for items such as pins, T-shirts,
or posters, while maintaining a cohesive and consistent visual
identity.
IDEATION
The task began with creating a mind map about myself. This helped me
visually explore my personality, interests, and values. From there, I
developed both a visual and typographic mood board to translate these
ideas into a clearer design direction. These steps allowed me to define
the mood, shapes, and colors that best represent my identity.
|
| Fig 1.0 Mindmap |
SKETCHES
|
| Fig 1.1 Sketches |
These are the sketches I created during my exploration phase, and the one below is the sketch I selected to digitize.
|
| Fig 1.2 Final Sketch |
PROCESS
After finalizing my sketch, I digitized the wordmark in Adobe
Illustrator. This stage involved refining the letterforms, adjusting
proportions, and ensuring the design was precise, polished, and fully
scalable. I ensured that all lines were properly aligned, the proportions were accurate, and the spacing between each line remained consistent throughout.
|
| Fig 1.2 Process |
|
| Fig 1.3 Final wordmark digitized |
The next step was exploring color palettes. I initially focused on
burgundy and red tones because they felt aligned with my brand.
However, after testing them out, the colors didn’t fully capture my
style or personality.
|
| Fig 1.4 Process - color exploration |
So, I went back to the beginning and experimented with a new direction this time incorporating bright orange and a berry pink. These shades complemented each other well and felt much more authentic to my brand identity.
|
| Fig 1.5 Process - final color palette |
|
| Fig 1.6 Final outcome |
I created a simple animation by designing each frame in Illustrator and
then bringing them into Photoshop to animate the sequence.
|
| Fig 1.7 Animation gif |
TASK 2 - PART B : COLLATERAL
Timeframe: Week 06 - Week 07
Deadline: Week 08
Description:
Develop design applications using the key artwork created in Task 2A. Apply the custom lettering and its visual elements across various mockups or products such as posters, merchandise, or digital layouts to demonstrate how the identity system maintains a cohesive and versatile presence across different mediums.
Develop design applications using the key artwork created in Task 2A. Apply the custom lettering and its visual elements across various mockups or products such as posters, merchandise, or digital layouts to demonstrate how the identity system maintains a cohesive and versatile presence across different mediums.
PROCESS
I started by creating a simple pattern to serve as the main design
motif, stacking my wordmark vertically to form a visually engaging
layout. I also used the middle section of the “A” to create a secondary
pattern or logo element that could be incorporated across my brand
identity.
|
| Fig 1.8 Pattern 1 |
|
| Fig 1.9 Pattern 2 |
Next, I developed the collaterals, selecting and applying the most
suitable designs to effectively represent the project and maintain a
cohesive brand identity. I explored different color ways before
selecting the final 3.
|
| Fig 1.10 Collateral process |
The final outcome showcases my wordmark, carefully selected color palette, designed collaterals, and self-portrait, all coming together to convey a cohesive and distinctive brand identity.
|
| Fig 1.11 Final outcome - ig feed layout |
TASK 2 - OUTCOME COMPILATION
FINAL OUTCOME (2A)
|
| Fig 2.0 FINAL black wordmark on white bg |
|
| Fig 2.1 FINAL white wordmark on black bg |
|
| Fig 2.2 FINAL color palette |
|
| Fig 2.3 FINAL actual color on lightest shade |
|
| Fig 2.4 FINAL lightest shade on darkest color |
|
|
Fig 2.4 FINAL animation GIF |
Fig 2.5 FINAL PART 2A PDF
FINAL OUTCOME (2B)
|
|
Fig 2.6 FINAL Collateral 1 |
|
| Fig 2.7 FINAL Collateral 2 |
|
| Fig 2.8 FINAL Collateral 3 |
Fig 2.8 FINAL Collateral PDF
INSTAGRAM: 3A.VISUALS
|
| Fig 2.9 FINAL feed layout |
Fig 2.10 FINAL feed layout PDF
FEEDBACK
WEEK 5 - 21/10/25
General feedback: Mind map and sketches should be more in
depth, digitise wordmark for next class
Specific feedback: Submitted task 1 after finalising
everything
WEEK 6 - 28/10/25
General feedback: Wordmark should be readable, and should
resonate with the characteristics from the mind map
Specific feedback: Got my wordmark approved. Was told to
digitise by next week and create colour palette
WEEK 7 - 04/11/25
General feedback: Follow instructions for next week.
Specific feedback: no specific feedback
FURTHER READINGS
Book Title:
Typography Referenced: A Comprehensive Visual Guide to the
Language, History, and Practice of Typography
Chapter:
The Language of Type & Visual Communication
This chapter focuses on how typography forms the foundation of strong
visual identities. The authors explain that a wordmark is more than
stylized text, it is a distilled visual signature that communicates
personality, tone, and purpose. The chapter discusses how designers
refine letterforms, spacing, and proportion to ensure the wordmark is
both distinctive and readable. It also highlights the importance of
developing a consistent typographic system, including color, hierarchy,
and layout rules, so the identity can extend smoothly across different
applications. The chapter reinforces that typography must remain
cohesive yet adaptable, which aligns with today’s work where I created a
wordmark, established a color palette, and applied the visual system
across various collaterals to form a unified brand identity.
|
| Fig 2.11 Typography referenced |
REFLECTION
In this project, I developed a typographic brand identity starting from sketches and moving into digital refinement in Illustrator. I explored proportions, spacing, and alignment to finalize my wordmark. After experimenting with color palettes, I selected one that best represented my personality and applied the identity across various collaterals such as patterns and mockups.
Observation
I noticed how small design choices like stroke angles, spacing, and color tones greatly affected the overall mood of the brand. My first color palette didn’t feel right, which showed me how strongly color influences a brand’s personality. I also observed that elements from the wordmark could be reused to create patterns and supporting graphics that reinforced the identity.
Findings
I learned that creating a strong visual identity requires both experimentation and self-awareness. Trusting my instincts helped me create a brand that felt authentic. Testing my design across different applications also showed me the importance of consistency and adaptability in branding. This project strengthened my understanding of how typography can shape a brand’s character.
I learned that creating a strong visual identity requires both experimentation and self-awareness. Trusting my instincts helped me create a brand that felt authentic. Testing my design across different applications also showed me the importance of consistency and adaptability in branding. This project strengthened my understanding of how typography can shape a brand’s character.
Comments
Post a Comment