Advanced Typography | Task 2 : Key Artwork and Collateral

April 21,2025

12/05/2025 - 12/05/2024(Week 3 - Week )

YANGYANG / 0363575

Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University

Task 2 : Key Artwork and Collateral

LIST

1. Lectures

2. Instructions

3.Task 2 : Key Artwork and Collateral

4. Feedback

5. Reflections

6. Further Reading

Lectures

Week 4 : AdTypo_4_Designing Type

Two Core Purposes of Typeface Design

Social Responsibility
- Typeface design should enhance legibility to improve communication in society.
Artistic Expression
- Type design is not only functional but also a form of personal or artistic exploration.

Typography balances functionality and creativity—it's both practical and expressive.

Case Studies: Function-Driven Typeface Design

Frutiger (1968)

Purpose: Designed for Charles de Gaulle Airport to ensure clear readability from both near and far.

Features: Clean, highly legible, and suitable for public signage.

Adaptation: Frutiger Arabic modifies letterforms for Arabic readability while retaining modern clarity.

Verdana (1996) – Matthew Carter

Purpose: Created for Microsoft to remain legible at small sizes on low-resolution digital screens.

Features: Wide letterforms, open spacing—optimized for early web use.

Bell Centennial (1975–78) – Matthew Carter

Purpose: Developed for AT&T phone books to address printing issues with Bell Gothic on low-quality paper.

Technical Solution: Introduced ink traps—tiny cuts in letterforms that prevent ink from smudging at small sizes.

Public Visual Systems: The London Underground Case

Johnston Sans (1916) – Edward Johnston

Purpose: To unify the London Underground’s signage with a modern yet classically rooted typeface.

Design: Inspired by Roman capitals with humanist qualities; functional and elegant for public use.

Fig1.1 Letter

Gill Sans – Eric Gill

Origin: Based heavily on Johnston Sans.

Features: More commercial and simplified for broader applications.
Fig1.2 Gill sans

General Typeface Design Process

Research

Study type history, anatomy, and technical terms (e.g., metrics, hinting). Define purpose and context of use.

Sketching

Use traditional (pen and paper) or digital tools (e.g., Wacom tablet). Hand-drawing offers natural flow; digital offers speed and precision.

Digitization

Use professional software like FontLab or Glyphs App. Consider both letterform shapes and counterspaces for legibility.

Testing

Includes prototyping, refinement, and user feedback. Focus on readability for text fonts and expressive quality for display fonts.

Deploy & Maintain

Post-launch revisions may be needed to ensure cross-context performance.

Typeface Construction and Optical Adjustments

Roman Capitals Construction

Based on a square grid (e.g., 8x8), with a circle touching all sides and a rectangle covering ¾ width.

This geometric framework helps guide letterform proportions and structure.

Fig1.3 Roman

Optical Corrections & Spacing

Optical Alignment: Curved or protruding parts should slightly exceed the baseline or cap height for balance.

Fitting (Spacing): Mechanical spacing doesn’t equal visual balance. Adjust letter spacing for consistent visual white space.
Fig1.4 Spacing

Week 5 – Perception and Organisation in Typography

This week focused on how contrast and structural organisation influence the perception of typography. We studied Rudi Ruegg’s nine principles of typographic contrast—size, weight, form, structure, texture, direction, colour, type style, and positive/negative space. Each type of contrast plays a role in visual hierarchy, attention guidance, and readability. This exploration helped me understand how visual dynamics can enhance the effectiveness of typographic design and informed my key artwork development.

Instructions：

Mind Mapping

Fig2.1 Mindmap, Week 5 (22/05/2025)

Mood board

Fig2.2 Inspiration board, Week 5 (22/05/2025)

Sketches

Fig2.3 Sketch, Week 5 (22/05/2025)

This is the wordmark I designed for “LERYS.” Throughout the design process, I aimed to combine a clean typeface with dynamic flame elements to convey the brand’s energy, personality, and modern aesthetic. The most distinctive feature is my redesign of the letter “E”, which I shaped like a flame to symbolize passion, strength, and ever-evolving creativity.

At first, my design was overly complex, and the overall form looked fragmented and inconsistent. With Mr. Vinod’s guidance and feedback, I gradually refined the wordmark, simplifying its appearance while retaining the flame’s character. This helped me apply core design principles and resulted in a final version that maintains visual impact without sacrificing clarity or balance.

Through this process, I not only improved my design judgment but also learned the importance of simplification in visual communication.

Digitalize

Fig 2.4 Final work, Week 5 (22/05/2025)

In the initial stages of designing this wordmark, my concept was overly complex, making the overall graphic appear fragmented and lacking in visual appeal and simplicity. With Mr. Vinod’s suggestions and guidance, I gradually refined the design, resulting in a more cohesive and recognizable form. I retained the flame element, but simplified it to avoid clutter, ensuring that the final design aligns with both aesthetic value and design principles.

Process:

Fig 2.5, Create the outline Week 5 (22/05/2025)

Fig 2.6, Draw the line Week 5 (22/05/2025)

Fig 2.7, select Week 5 (22/05/2025)

Fig 2.8, combine week 5 (22/05/2025)

Fig 2.9, Create the shape week 5 (22/05/2025)

Fig 2.10 Final outline, Week 5 (22/05/2025)

Given my previous attempts, I realised that word mark design is not as cumbersome as it could be, so I concentrated the main design on one letter at Mr.Vinod's suggestion, so that the design concept could be retained along with the neatness of the icon.

Fig 2.11 Final work PDF, Week 5 (22/05/2025)

Modifications：

Fig 2.6 Modification, Week 6 (22/05/2025)

Color Selection ：

Export Requirements:

Export your work as JPEG, in grayscale, at 300ppi.
Provide two versions:

Black on white
White on black

Colour Palette:

Visit Colour Hunt and select a colour palette that reflects your identity.

Wordmark Application.

Use the actual (main) colour of the palette on the lightest shade.

Use the lightest colour of the palette on the darkest shade.

Self-Portrait Design:

Take a black and white self-portrait.
Place your key artwork (wordmark) on the portrait artistically.

After digitizing the main wordmark design, I began exploring suitable color palettes to enhance the visual identity and character of the brand. To find the right combinations, I referred to several design resources and websites recommended by Mr. Vinod. These references offered a range of inspiring palettes and typography case studies, which helped me better understand how color influences mood, tone, and visual hierarchy in type design. Considering the flame element I created for LERYS, I experimented with colors that could convey passion and strength without overwhelming the design, aiming to boost its overall visual impact.

Fig 3.1 Color palette , Week 5 (22/05/2025)

Fig 3.2 Color palette 1 , Week 5 (22/05/2025)

Fig 3.2 Color palette 2 , Week 5 (22/05/2025)

Fig 3.3 Final Color palette, Week 5 (22/05/2025)

Fig 3.4 Final Color palette PDF, Week 5 (22/05/2025)

Visual identity:

I designed the letter ‘E’ in the shape of a flame, so I wanted to put this form here as well, with different colours interlocking, as if the temperature of the outer flame and the inner flame of the flame were changing.

Fig 4.1 letters , Week 5 (25/05/2025)

Fig 4.2 Patten, Week 5 (25/05/2025)

Animation ：

I created a text animation using After Effects, based on my custom wordmark “Lerys.” Guided by the keywords “bravery” and “flame,” I aimed to bring the design to life by simulating the motion and energy of burning fire, adding both emotion and intensity to the identity.

During the production process, I also used Procreate to handcraft visual elements, which allowed me to create more organic and fluid flame shapes. This combination of tools not only improved the visual quality but also deepened my understanding of how motion graphics can powerfully communicate a brand’s spirit.

Figure 5.1 Animation process Week 7 (4/06/2025)

Figure 5.2 Animation Week 7 (4/06/2025)

Task 2A Final Outcome

Fig 6.1 Black wordmark on white background, Week 6 (29/05/2025)

Fig 6.2 White wordmark on black background, Week 6 (29/05/2025)

Fig 6.3 Color palette, Week 6 (29/05/2025)

Fig 6.4 Wordmark in actual colours on lightest shade of colour palette, Week 6 (29/05/2025)

Fig 6.5 Wordmark in lightest shade of colour palette on darkest shade of colour palette, Week 6 (29/05/2025)

Fig 6.6 Animation, Week 7 (04/06/2025)

Fig 6.7 Task 2A PDF Compilation, Week 7 (4/06/2025)

TASK 2B: KEY ARTWORK & COLLATERAL

Self-Portrait Description

This self-portrait reflects who I am as a designer — structured yet expressive. I used a black and white photo of myself and added the word ‘LERYS’, representing both my name and creative identity. The curved text ‘Brave’ is my personal statement, inspired by the themes of fire and courage. The flame-like design elements express passion and energy, while the clean layout shows clarity and control.

Fig 7.1 Photo process, Week 7 (4/06/2025)

Fig 7.2 Photo, Week 7 (4/06/2025)

Products:

Handbags: Bringing Visual Identity to Everyday Life

Fig 7.3 Handbags Week 7 (4/06/2025)

Badge: compact and portable

Fig 7.4 Badge Week 7 (4/06/2025)

9-grid Instagram layout：

Fig 7.5 9 Grid Week 7 (4/06/2025)

2B Final Outcome :

Fig 7.6 Handbags 2 Week 7 (4/06/2025)

Fig 7.7 9 Grid 2 Week 7 (4/06/2025)

Link

Fig 7.8 9 Ins homepage Week 7 (4/06/2025)

Fig 7.9 2B FINAL Week 7 (4/06/2025)

Task 2 Outcome Compilation:

Fig 8.1 Black wordmark on white background, Week 6 (29/05/2025)

Fig 8.2 White wordmark on black background, Week 6 (29/05/2025)

Fig 8.3 Colour Palette, Week 6 (29/05/2025)

Fig 8.4 Wordmark in actual colours on lightest shade of colour palette, Week 6 (29/05/2025)

Fig 8.5 Wordmark in lightest shade of colour palette on darkest shade of colour palette, Week 6 (29/05/2025)

Fig 8.6 Key Artwork Animation, Week 6 (29/05/2025)

Fig 8.7 Task 2A PDF Compilation, Week 6 (29/05/2025)

Fig 8.8 Collateral 1, Week 7 (04/06/2025)

Fig 8.9 Instagram Feed Design Layout, Week 7 (04/06/2025)

Fig 8.10 Screenshot of Instagram page, Week 7 (04/06/2025)

LINK

Fig 8.11 Task 2B PDF Compilation, Week 7 (04/06/2025)

Feedback:

Week 8:

Today Mr.Vinod had a look at our finished project and gave us some final comments on it, as well as some introductions to Project 3 and the Lecture.

Week 7：

Mr.Vinod suggested changes to our previous class work in this week's class, which helped me to make my original design more concise and well organised, and gave me a deeper understanding of the word mark design.

Week 6:

In this week's class, Mr.Vinod checked our previous work, he critiqued my work very harshly and made me rework it until I got it right. This was a big shock to me but I will try to find a more correct and aesthetically pleasing design and hopefully grow and improve after this setback.

Week 5 :

In today's class Mr.Vinod gave us suggestions on how to revise our design and the central idea of designing word marks, and also gave me some ideas on how to make and explore it further.

Week 4 :

In this week's class Mr Vinod has been checking and advising us on the posters that we have made, so that we can improve on what we have done and have a clearer idea of the qualities that are needed in a poster design.

Reflection:

Experience:

In Task 2, I explored how to express personal identity through typography and developed it into a complete visual system. From initial keyword development to hand-drawn sketches, I centred the design around the word ‘Lerys’, hoping that it would convey the core imagery of ‘bravery’ and ‘flame’. In the process of refining the shape of the word In the process of refining the shape of the word, I kept streamlining the structure to make it more recognisable and expressive. After completing the main graphic, I used Procreate and After Effects to create animation effects, and applied the final design to product models such as mugs, badges and hats, as a preliminary attempt at practical application.

Observation:

Throughout the process, I realised that colour has a great impact on visual communication. my teacher, Vinod, pointed out that my early colour scheme was too dark and lacked visual impact. As I adjusted the colours, I began to understand that a sharp, contrasting colour scheme could better express the brand's character and emotional tension. In addition, I also discovered that fonts are not just words, but also visual symbols that can convey deeper messages if they are handled properly in terms of form and systematicity.

Discovery:

This assignment made me understand more deeply the expressive and functional nature of typography. Even some fine-tuning of details, such as word spacing, colour saturation or animation rhythm, can significantly enhance the overall effect. When I applied the design to peripheral products and social media pages, I also experienced how a unified visual language can build a complete brand image. Overall, Task 2 has not only honed my skills in design software, but also given me the confidence to explore my own visual expressions.

Further Reading:Typography Referenced

This book delves into the evolution of typography, the historical background of glyphs, and how to choose the right typeface for the actual design. As a highly practical book, it not only provides a rich theoretical foundation, but also emphasises the importance of fonts in visual communication.

The book mentions that when we think of a word, a string of letters comes to mind, which, once written, are transformed into letterforms with concrete forms. Whether it's a handwritten shopping list or an engraving on an ancient Roman column, they are collections of symbols that convey meaning. The authors emphasise that typefaces are not just tools for conveying language, but can also be visually symbolic and even evolve into totemic forms.

The book also introduces the many tools and media involved in typography, from traditional pen and paper to digital typography. In practice, designers need to realise the full potential of their tools while understanding their limitations. For example, the rendering of fonts at different sizes and on platforms is affected by the rendering method and character set, so it is not possible to ‘use one font for all’, but must be adapted and optimised for different situations. This process, from sketch to final product, reflects the systematic and professional nature of typeface design.

One of the interesting experiments is to use two pencils tied together to write, which can simulate the distribution of thickness produced by the change of the brush stroke, and thus help to understand the sense of weight and structural rhythm of the strokes of the typeface. This practical approach reflects the deep connection between typeface form and manual movement.

Finally, the book points out that typeface design is a process of constant iteration and revision. Designers must continually test character spacing, alignment, and other factors that affect readability in light of usage demands and technological developments. Through test samples of different sizes and formats, adjustments are made repeatedly until the desired visual effect is achieved. This rigorous and iterative process is an integral part of creating a high-quality font system.

Search This Blog

YANG YANG (0363575)