Advanced Typography | Task 2 - Key Artwork & Collateral

|| 15/05/25 – 18/06/25 (Week 4 – Week 9) 

|| Tee Zi Tong, 0366165

|| Advanced Typography 

|| Task 2: Key Artwork & Collateral

CONTENT LIST 

1. Lecturer Notes 

2. Instructions 
3. Task 2A Progressions

4. Task 2B Progressions 

5. Task 2 (A&B) Final Outcome

6. Feedback
7. Reflections
8. Further Readings

LECTURER NOTES 

Lecturer 5 /Perception and Organization

Typography and Design- Perception

Perception is the way something is considered, perceived, or understood; in the field of design, it is usually the manipulation of what the people perceive in order to develop a different comprehension, at least in advertising where it tends to reach the attic of deception even though it often uses truth as a gimmick 

In typography, perception describes the usage and translation of a reader via the viewpoint, the interpretation of contrast and layout, which can be either textual, visual, graphical or color oriented.

Hypocrisy in Typography

Contrast gives a difference or a point of separation between information, which is vital in readability and clarity of layouts, which contain much text

Fig1.1.1, Contrast

Rudy VanderLans and Kadare give systems to make contrast, in typography; some of the frequent techniques are as follows:

• Size: The bigger the elements are, the more attention they attract, so it is often used with titles compared to the text
• Weight- Bold or heavy type will be used against the light text in order to highlight points or create an eye appeal 
• Form: Uppercase/Lowercase, Roman/italic, condensed/expanded differences make an interesting and hierarchy 
• Structure: The use of different type faces or styles (e.g. serif and sans-serif) that are used together to produce contrast by using the difference in letterforms 
• Texture: Seeing the general appearance of text blocks as a result of letterforms, and configurations, is part contrast and visual effect 
• Direction: to make lively layouts, differences in vertical, horizontal and slanted text are divided; the axial typographic system takes advantage of this property
• Color: When done intelligently, color helps to highlight details; when used clumsily the color can as well mix-up the hierarchy of information

INSTUCTIONS  

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

TASK 2(A) PROGRESSIONS   

Task 2(A) Key Artwork 

Mind Map  

First, we started by making a mind map to explore things about myself.

Fig. 1.1.1, Mind Map, week 4 (13/5/2025)

Mood Board  

Next, we have to do research and sketch the wordmark, then compile it into a mood board

Fig. 1.1.1, Mood Board, week 4 (14/5/2025)

Digitize  

First, I digitized and tested a few versions using grids.

Fig,1.2.1, Process of Digitizing, week 5 (29/5/2025)

Then, I chose this wordmark as my final design.

Fig,1.2.2, First Version Digitization, week 7(2/6/2025)

After Mr. Vinod reviewed my wordmark, he suggested that I make some edits to the final design. He mentioned that the strokes under the letters 'C' and 'E' could be removed, and that the letter 'L' should be improved to appear more balanced, as it currently shows that my Adobe skills still need improvement.

And this was the edited final version,

Fig,1.2.3, Second Version Digitization, week 7(4/6/2025)

Color Scheme

Next, we need to create a color scheme. I chose to create a color scheme using dark blue, purple, pink, and light yellow to reflect a happy and soft style.

Fig,1.3.1, Color Scheme, week 7(5/6/2025)

Compilation

Next, we need to create a wordmark based on the following requirements:

• A black wordmark on a white background

• A white wordmark on a black background

• A color palette

• The wordmark in its actual colors placed on the lightest shade of the color palette

• The wordmark in the lightest shade of the color palette placed on the darkest shade of the palette

Fig,1.4.1, Final Compilation, week 7(5/6/2025)

TASK 2(B) PROGRESSIONS   

Task 2(B) Key Artwork & Collateral

Expansion 

First, I completed the wordmark expansion based on my original design.

Fig,2.1.1, Expansion, week 7(5/6/2025)

3 Collateral

For my three collateral items, I chose water bottle, clothing, and tote bag. To begin, I gathered references from Pinterest.

Fig,2.2.1, Progression, week 7(5/6/2025)

Then, I have started to work on it using my wordmark and expansion 

Fig,2.2.2, Progression, week 7(5/6/2025)

My Portrait 

I selected three images and tested them to see which one worked best for the portrait.

Fig,2.3.1, Progression, week 7(6/6/2025)

Next, I tested how the wordmark and its expansion would look on the chosen image.

Fig,2.3.2, Progression, week 7(6/6/2025)

And I decided to go for the first one as my final portrait, and here was the final version of it. 

Fig,2.3.3, Portrait First Attempt, week 7(6/6/2025)

Animation GIF 

To start, I created a layout frame using Adobe Illustrator.

Fig,2.3.1, Animation Progression, week 7(7/6/2025)

After that, I converted it into a GIF in Adobe Photoshop.

Fig,2.3.2, Animation Progression, week 7(7/6/2025)

And here was the result of attempt, 

Fig,2.3.3, First Attempt for Animation, week 7(7/6/2025)

And here was the second attempt after changing size to Instagram new size,

Fig,2.3.4, Second Attempt for Animation, week 7(7/6/2025)

Instagram Layout

I planned the layout in Adobe Illustrator before posting it on Instagram.

Fig,2.3.3, Instagram Layout Plan, week 8(8/6/2025)

And here was the final Instagram Layout after posting in Instagram. 

Fig,2.3.3, Instagram Layout Plan, week 8(8/6/2025)

TASK 2 FINAL OUTCOME: 

Task 2(A) Key Artwork

Fig,3.1.2, black wordmark on a white background, week 7(5/6/2025)

Fig,3.1.2, white wordmark on a black background, week 7(5/6/2025)

Fig,3.1.3, Color Scheme, week 7(5/6/2025)

Fig,3.1.4, wordmark in its actual colors placed on the lightest shade of the color palette, week 7(5/6/2025)

Fig,3.1.4, wordmark in the lightest shade of the color palette placed on the darkest shade of the palette, week 7(5/6/2025)

Fig,3.1.5, Final Compilation in PDF Format, week 7(5/6/2025)

Task 2(B) Key Artwork & Collateral

Instagram Link: https://www.instagram.com/chl0e_t33/

Fig,3.2.1, Water Bottle Collateral, week 7(5/6/2025)

Fig,3.2.2, Tote Bag Collateral, week 7(5/6/2025)

Fig,3.2.3, Shirt Collateral, week 7(5/6/2025)

Fig,3.2.4, Portrait, week 7(6/6/2025)

Fig,3.2.5, Patterns, week 7(6/6/2025)

Fig,3.2.6, Patterns, week 7(7/6/2025)

Fig,3.2.7, wordmark in the lightest shade of the color palette placed on the darkest shade of the palette, week 7(5/6/2025)

Fig,3.2.8, Color Scheme, week 7(5/6/2025)

Fig,3.2.9, Final Compilation in PDF Format, week 8(8/6/2025)

Fig,3.2.10, Final Animation GIF, week 7(7/6/2025)

FEEDBACK

Week 8

General Feedback:

We reviewed the assignment and went through the requirements for Task 3.

Specific Feedback:

Mr. Vinod felt that my work was okay overall, but mentioned that it could be improved further, especially in the collateral design.

Week 7

General Feedback:

This week, Mr. Vinod informed us that all collateral designs must now follow the 4:5 Instagram portrait ratio format. He also encouraged us to explore and expand our wordmark designs further in order to develop more creative variations and visual interest. The goal is to push the concept beyond the basic form and discover new ways to represent our identity more effectively.

Specific Feedback: N/A

Week 6

General Feedback:

When designing letterforms, it's important to maintain a sense of visual balance by keeping stroke thickness consistent in both vertical and horizontal directions. Paying attention to the shapes of serifs, the angles of curves, and the spacing within and around each letter enhances overall coherence. Using graph paper and aligning elements to a grid can greatly improve precision during the construction process. Additionally, matching the internal space of letters with the weight of the strokes often creates a cleaner and more visually pleasing result.

Specific Feedback:

Mr. Vinod gave me suggestions to edit the final wordmark. He mentioned that the strokes under the letters 'C' and 'E' can be removed, and the letter 'L' should be improved to appear more balanced, as it currently reveals that my Adobe skills still need improvement.

Week 5

General Feedback:

Mr. Vinod provided comments on our sketches and mood boards for Task 2, along with useful tips to help us improve our current designs. He also shared a real example which is Alliance Bank logo to explain the concept more clearly.

Specific Feedback:

Mr. Vinod reviewed my wordmark mood board and asked me to try extracting more from the font. He said the letter 'L' was okay to continue with.

REFLECTIONS

Experience

When I did not find a lot of research or exploration in the early stages of this assignment, my primary concern was making a combination with the things I liked on a personal level. Due to it, I found myself being stuck. I also tried out various styles on my sketches and the digitized wordmark, but I eventually settled on a version that I believed would be considered by Mr. Vinod as something that would go by in a way that he would consider it as safe. The thing was, however, that the result was not good and I replaced it with a spikier one, more solid and befitting.

Just to be truthful at moments I felt quite lost within the first few moments of assignment. I had not done it before and made a wordmark that reflects me; therefore, it was not an easy task. Nonetheless, I forced myself to do it. The collateral design was the hardest task in my opinion due to the fact that I did not find an arrangement that I feel satisfied about or could couple well with the items. I was short of time and so I hurried the animation part, but I suppose it came up fine.

Observations

This also helped me to see another aspect of design, which is the skill to express yourself. It gives a reminder to people on what kind of person, what your style is, and what you can do. Nonetheless, I also found out that it is hard to define my identity (in a clear way) at all. In my opinion, when people know themselves better without judging, it would be easy to create self-identity and be to express it in design.

Another factor I was able to note is that it is not easy to pick a powerful and appropriate color scheme. The color could be nice when taken on its own or in my art, but when put together in a palette, there is something that does not sit right. Ultimately, I chose to settle on the color scheme that I thought depicted my wordmark and collateral.

Findings

I discovered that it is quite challenging to develop a good wordmark expansion and pattern, and this was not a simple task as I thought. Repeating elements are not the point, moreover, it should be functional as a background element, which should not suppress the initial wordmark. I also found out that a wordmark must not be too decorative because many varieties may provoke confusion as to the intended meaning.

FURTHER READINGS

Thinking with Type by Ellen Lupton

Fig 4.1.1. Thinking with Type by Ellen Lupton (Week 5, 20/5/2025)

I read Thinking with Type to have more knowledge about the role of typography in real communication and design regime.

Key notes:

• The book is skillfully separated into main chapters: a letter, text, and a grid each defining major elements that refer to typography.
• It talks about type anatomy and how the shapes of the letters affect readability and visual levels.
• The text section gives details about spacing, alignment and the structure of paragraphs, this simplifies the production of layouts which are also visually sound.
• Lupton contains not only the do and don’ts of typography, but also real examples, which makes theory bridge a gap into practice.
• It focuses on the cultural and conceptual aspects of typography- how typography constructs meaning without words.
• Digital typography, such as screen design and web fonts usage also comes up in the book.

The book is very readable and informative. It is ideal both to novices and intermediate designers who want to learn how typography may influence form and function in the communication process.

Detail in Typography by Jost Hochuli

Fig 4.2.1. Detail in Typography by Jost Hochuli (Week 6, 27/5/2025)

I decided to read Detail in Typography in order to pay attention to the minor decisions that are, many times, ignored, but have a significant effect on the quality of typography.

Key notes:

• Hochuli dedicates much attention to the so-called micro parts of typography, e.g., the spacing between the letters and lines, hyphenation, and the use of the punctuation.
• He promotes care over text rhythm and optical balance when setting body text.
• One change in the line height or word spacing can alter the texture and legibility tremendously and this book proves it.
• Hochuli presents a very valid argument in asserting that designers have a duty in upholding the experience of the reader.
• It promotes the restrained and accurate use of the type which offers compliance with the ideas of the classical Swiss typography.
• They are clean, minimal, frequently based on book typography, which makes this an ideal choice of editorial and print designers.

One gets a sense of this book being a gentle yet strong message that good typography is usually unseen. It forms an excellent accompaniment to more theory-based books, and pays much attention to quality and detail refinement.

Type on Screen by Ellen Lupton (and Maryland Institute College of Art)

Fig 4.3.1. Type on Screen by Ellen Lupton (Week 7, 3/6/2025)

I used Type on Screen to get an insight of how typography evolves in the digital media (read screens, applications and responsive Web design).

Key notes:

• The book delves into the behavior of type on the digital interface and screen and pays high attention to user interaction and experience.
• It discusses responsive typography, dynamic grids, and using web-safe fonts.
• It includes a chapter on the typography of motion and animation of the type to be used as a branding tool or on narrative purposes.
• Lupton is discussing the limitations and possibilities of type design in apps, mobile and websites.
• Major typography terminologies are redefined to apply in the digital environment-- such as, pixel density, viewport dimensions, and rendering engines.
• Case studies contain practical illustrations used in the mobile applications, web design, and branding in the web environment.

This book will be the right choice; in case somebody is interested in UI/UX design or motion graphics. It is moving typography forward into the future and tells us that type should not only be beautiful, it should also work across the digital contexts.