Advanced Typography | Task 2: Key Artwork & Collateral

Date: 14/10/2025 - 17/11/2025 (Week 4 - Week 9)
Deadline: 17/11/2025 (Week 9)
Aishath Eshal Shihab, 0381863
Bachelor of Design (Honours) in Creative Media - Taylor's University
Task 2: Key Artwork & Collateral

Lectures

Week 4: AdTypo_4_Designing Type

Reasons for designing a typeface (according to Xavier Dupre):
1. Type design has a social responsibility to continue to prove its legibility.
2. Type design is a form of artistic expression.

Designing Type

Adrien Frutiger
Renowned 20th century Swiss graphic designer.
Frutiger is a sans-serif typeface designed in 1968 for the Charles de Gaulle International airport in France. Purpose: Create a clean, distinctive and legible typeface that's easy to see from up close and far away. Considerations/Limitations: Letterforms needed to be recognizable even in poor lighting or when the reader is moving quickly. He tested this with unfocused letterforms.
Frutiger also designed a new Devanagari font at the request of the Indian Design Institute. Goal: To simplify the sacred characters without compromising their ancient calligraphic expressions.

Matthew Carter
Son of Harry Carter, Royal Designer for Industry, contemporary British type designer, and ultimate craftsman. Trained as a punchcutter at Enschede by Paul Radisch, responsible for Crosfield's typogaphic program in the early 1960s, and Mergenthaler Linotype's house designer from 1965-1981.
Verdana (1996) for Microsoft. Purpose: Be extremely legible even at small sizes on the screen. Considerations/Limitations: Derived from pixel rather than pen, brush, or chisel. Commonly confused lowercase characters; i, j, l.
Bell Centenial (1975) for use in phone directories. The design had to solve multiple technical and visual problems with the existing phonebook typeface, Bell Gothic.

Edward Johnston
The creator of London "Underground" typeface that is later know as "Johnston Sans" (1916). He was asked to create something with "bold simplicity" that was truly modern yet rooted in tradition. Johnston's design combined classical Roman proportions with humanist warmth. Purpose: London's Underground railway ordered a new font for their posters and signage. Considerations/Limitations: He had to unite the London Underground Groups because their advertising and signage were all completely different.

General Process of Type Design
1. Research - understand type history, anatomy, and conventions. Know terminologies, side-bearings, metrics, hinting... Determine the type's purpose. Examine existing fonts for inspiration/reference/context/usage/pattern.
2. Sketching - Some designers sketch using traditional tool sets then scan them to digitize. While some sketch using digital tool sets but this can sometimes impede the natural hand strokes.
3. Digitization - There are professional softwares to digitize typefaces like FontLab and Glyphs App. Designers also use Adobe Illustrator to the letterforms beforehand.
4. Testing - The result of testing is part of the refining and correcting aspect. Prototyping is also part of testing and leads to important feedback. Depending on whether it is display/text type, the readabilty becomes an important consideration.
5. Deploy - Revision doesn't upon deployment.

Week 5: AdTypo_5_PerceptionAndOrganisation

Perception & Organization

Perception is the way something is regarded/understood/interpreted. In typography it deals with the reader's visual navigation and interpretation using contrast, form, and organization.

Contrast

There a several methods to create contrast, these are devised by Rudi Ruegg - light/bold, condensed/extended, organic/machined, roman/italic, small/large, negative/positive, serif/sans-serif, ornate/simple, and using different colours

Carl Dair adds two more principles into the mix, texture and direction. Dair's explanations:
1. Size: provides a point to draw the reader's attention.
2. Weight: bold type stands out in the middle of lighter type.
3. Form: the distinction between uppercase/lowercase, condensed/expanded, or roman/italic of the same letter in the same typeface.
4. Structure: different letterforms of different kinds of typefaces.
5. Texture: the way the lines of type look as a whole from up close and from a distance.
6. Direction: opposition between vertical, horizontal, and the angles in between.
7. Colour: a second colour is often less emphatic than black on white so give thought to what needs emphasizing.

Form

The overall look and feel of the elements making up the composition. A good form is visually intriguing, leads the eye from point to point, entertains the mind, and is memorable. Displaying type as a form provides a sense of the leltterforms' unique characteristics and abstract presentation. This was it no longer reads as a letter since it has been manipulated with distortion, texture, enlargement, and has been extruded into space.

Organization

Gestalt theory emphasizes that the whole of anything is greater than its parts. Therefore, in design, the components that make up the design are only as good as the overall visual form. Gestalt Perceptual Organizations/Groupings:
1. The Law of Similarity
   Elements similar to each other are perceived as a group.
2. The Law of Proximity
   Elements that are close together are perceived as a group.
3. The Law of Closure
The mind's tendency to see figures or forms even when the picture is incomplete.
4. The Law of (Good) Continuation
   People perceive each of two or more objects as different, singular, and uninterrupted even when they       intersect.
5. The Law of Symmetry (Praganz)
6. The Law of Simplicity

Instructions

Module Information Booklet

Task 2(A) / Key Artwork

Use your first name or pseudonym
Explore and compose as many permutations and combinations of your name in the form of a wordmark/lettering. The final key artwork must be an elegant solution, well balanced and composed, not complicated or confusing that leads to a functional and communicable key artwork. This key artwork will subsequently be used in Task 2(B) collateral.

Task 2(A) and 2(B) will require you to explore the boundaries of typographic communication using the knowledge gained from all modules not withstanding this semester’s exercises of Typographic Systems and Type & Play. Synthesise the knowledge and create a key artwork that excites and memorable.

Task 2(B) / Collateral

You are tasked to design a t-shirt, lapel pin, an animated key artwork and an Instagram account (or as instructed in class) transforming the key artwork into a brand. Students will work on the animated key artwork first and fine-tune the outcomes before going on to the and other collateral material: t-shirt, lapel pin and finally an Instagram account. The output must result from in-depth exploration and must communicate both visually and textually the desired message and mood set by the key artwork
and its function.

Collateral: Animated Key Artwork (800/1024 px, height and width; Gif format), use mock-ups to simulate the printing of the collateral. If instructed, you will be required to print the collateral.

Here are some good references of how your key artwork can be expanded to other collateral.

https://www.itsnicethat.com/articles/paula-scher-atlantic-theater-company

https://www.itsnicethat.com/news/mental-health-coalition-identity-pentagram-paula-scher-graphic-design-200520

https://www.instagram.com/p/CB5ZIRih5TB/?utm_source=ig_web_copy_link

Progress

Task 2(A) / Key Artwork

Moodboard, Mind Map, & Sketches

Figure 1.1 Moodboard 1 Week 5 (16/10/2025)

Figure 1.2 Moodboard 2 Week 5 (16/10/2025)

Figure 1.3 Mind Map Week 5 (16/10/2025)

Figure 1.4 First Sketches Week 5 (16/10/2025)

These first sketches were not up to the expectations. I think I misunderstood the task so I did more sketches based on my keywords - curvy, flowy, fun, casual.

Figure 1.5 Second Sketches 1 Week 6 (25/10/2025)

Figure 1.6 Second Sketches 2 Week 6 (25/10/2025)

Figure 1.7 Second Sketches 3 Week 6 (25/10/2025)

I decided not to go with the block/rounded letters because many other students in the class were doing their wordmarks similar to that style so I chose to refine the more flowy one where the letter "h" extends both upwards and downwards. Unfortunately, I missed the Week 6 online class so I could not recieve feedback for this.

Digitization

Before the Week 7 class I thought I should do another sketch and come up with something different.

Figure 2.1 New Idea 1 Week 7 (27/10/2025)

Figure 2.2 New Idea 2 Week 7 (27/10/2025)

I ended up not liking this one because of the imbalance in symmetry and it was just too chaotic so I went back to the last one again.

Figure 2.3 Digitization 1 Week 7 (27/10/2025)

This one I did by tracing my sketch using the pen tool but Mr. Vinod showed me how to digitize it using guide lines, and shapes and lines instead so that it looks more neat and cohesive.

Figure 2.4 Digitization 2 Week 7 (31/10/2025)

This is my final wordmark.

Animation

Figure 3.1 Animation Frames 1 Week 8 (15/11/2025)

Figure 3.2 Animation Frames 2 Week 8 (15/11/2025)

For my animation a did a frame animation using Adobe Photoshop but I first made the individual frames on Adobe Illustrator. There's 30 frames in total.

Task 2(B) / Collateral

I did a total of four product mockups, stickers, tshirt, tote bag, and a book.

Figure 4.1 Product Mock Up Stickers Week 7 (28/10/2025)

Figure 4.1 Product Mock Up T-Shirt Week 7 (28/10/2025)

Figure 4.1 Product Mock Up Tote Bag Week 7 (28/10/2025)

Figure 4.1 Product Mock Up Book Week 7 (28/10/2025)

Final Output

Task 2(A) / Key Artwork

Figure 5.1 Black Wordmark on White Background Week 8 (16/11/2025)

Figure 5.2 White Wordmark on Black Background Week 8 (16/11/2025)

Figure 5.3 Colour Palette Week 8 (16/11/2025)

Figure 5.4 Wordmark Darkest Shade on Lightest Shade Week 8 (16/11/2025)

Figure 5.5 Wordmark Lightest Shade on Darkest Shade Week 8 (16/11/2025)

Figure 5.7 Wordmark Animation GIF Format Week 8 (16/11/2025)

Task 2(B) / Collateral

Figure 7.1 Collateral 1 Week 8 (16/11/2025)

Figure 7.2 Collateral 2 Week 8 (16/11/2025)

Figure 7.3 Collateral 3 Week 8 (16/11/2025)

Figure 7.4 Collateral 4 Week 8 (16/11/2025)

Instagram Handle - @esha1.cc

Figure 7.5 IG Screen Grab Week 8 (16/11/2025)

Feedback

Week 7

General Feedback: Start doing task 2b by expanding our key artworks into any chosen collateral, and plan out the IG design.
Specific Feedback: Use guides, shapes, and lines to create the key artwork instead of tracing the sketches. It gives a more uniform neater finish.

Week 6

General Feedback: Missed week 6 online class.
Specific Feedback: Missed week 6 online class.

Week 5

General Feedback: Have a good contrasting colour scheme. All the sketches should be related to at least one key word.
Specific Feedback: I need to have more sketches, sketches are meant to be quick and simple, workmarks shouldn't have so much detail. My moodboard had mostly titles and not wordmarks so it was wrong.

Reflections

Task 2(A) / Key Artwork

Experience

Creating a wordmark for myself was not as hard as I initially thought it would be. It was difficult, but in the end the hardest part was refining the wordmark. I did many sketches of just one idea because no matter how much a tweaked and tried to fix the design it still looked like it was missing something or something felt off about the design. However after I started digitizing, I found a final design that I liked more than all the other sketches I did.

Observations

During this task I noticed that missing just one class can be detrimental to the progress of the entire task. Because I missed getting feedback for my wordmark on week 6, I was completely in the dark about how I should proceed, as I did not have a final, approved, wordmark yet. This was my fault, so I ended up doing extra unnecessary work that I did not use for my final output.

Findings

I found that a wordmark should convey the feel and personality of the person or brand that it stands for. A wordmark should be designed and created in such a way that it attracts the target audience of the person or brand the wordmark represents. I feel that the wordmark I made for this task does represent who I am and the style of design I lean towards more.

Task 2(B) / Collateral

Experience

For this task I made many designs and came up with other ideas but when I tried to actually implement those ideas on Illustrator, it did not look like what I envisioned in my head. So, it was not easy trying to come up with patterns and designs based on the wordmark but after I had a few established designs I liked it was pretty easy to make the product mock ups.

Observations

In the process of this task, I saw that you can make a pattern or design out of anything. Of course not every element will look good in every which pattern or design but with the right eye and a few tweaks you can make a pattern/design/element.

I also noticed that the kind colour palette you use conveys different types of messages. A soft, pastel colour palette would convey a more calm, and light feeling while a bold, striking colour palette would convey a more energetic, and bold feeling.

Findings

I found that the design of a brand must be cohesive, each element, type, and colour must work well together without clashing or it can be an eye sore. The more put together the outwards design of the brand looks the more trusting potential clients and customers will be. The type of design used in branding directly reflects the sort of person or company the client will be working with. Hence why we used keywords when making our wordmarks.