Advanced Typography - Task 2: Key Artwork & Collateral

Name: Liong Xenyi (0383125)
Module: Advanced Typography (GCD61004)
Date: 13/10/2025 - 17/11/2025 (Week 4 - Week 8)
Degree: Bachelor of Design (Honors) in Creative Media 
University: Taylor's University

Task 2: Key Artwork & Collateral

Table of Contents

Lecture
Lecture 4: Designing Type
Why design another typeface? Xavier Dupre (2007) suggested:
  • type design carries a social responsibility to continue and improve its legibility
  • type design is a form of artistic expression
Objective has to be cleasr
These are 3 different typographers that we can explore on the typeface design's purpose and limitations.

Adrian Frutiger
Frutiger
  • renowned 20th Century Swiss graphic designer, forte in typeface designing.
  • Considered responsible for the advancement of typography into digital typography, contributions includes the typefaces Univers and Frutiger.
  • Frutiger is a sans serif typeface, designed in 1968, specifically for Charles de Gaulle International Airport in France.
  • Purpose: To create a clean, distinctive and legible typeface that is easy to see from both close up and far away; extremely functional.
  • Considerations/Limitations: letterforms needed to be recongised even in poor light conditions or when reader is moving quickly. He tested with unfocused letters to see which letterforms could be identified.
Fig 1.1 Frutiger typefaces used on signboards (17/10/2025, Week 4)

New Devanagari Font
  • Adrian Frutiger received many honors at the University in the holy city of India, Varanasi.
  • He had designed a new Devanagari font for modern typesetting and printing processes at the request of the Indian Design Institute. 
  • Goal: simplify the sacred characters, without compromising their ancient calligraphic expression.
  • Religious 'wise men' approved of his first draft and saw no "desecration of something that was, for them, scared."
Fig 1.2 Adrian Frutiger at the National Institute of Design (NID), India, 1964 (17/10/2025, Week 4)


Matthew Carter 
Verdana 
  • Son of Harry Carter, Royal Designer for Industry, contemporary British type designer and ultimate craftsman. 
  • Carter trained as a punchcutter at Enschede by Paul Radisch, responsible for Crosfield's typographic program in the early 1960s, Mergenthaler Linotype's house designer 1965-1981.
  • Carter's fonts were created to address specific technical challenges, one example being Verdana (1996) for Microsoft.
  • Purpose: the font was tuned to be extremely legible even at very small sizes on the screen due to the popularity of the internet and electronic devices. 
  • Considerations/Limitations: the font exhibits characteristics derived from the pixel rather than the pen, the brush or the chisel. Commonly confused characters, such as the lowercase i, j, l.
Fig 1.3 Verdana Examples; IKEA changing from Futara to Verdana (17/10/2025, Week 4)

Fig 1.4 Verdana typeface (17/10/2025, Week 4)

Bell Centennial 
  • In 1976, AT&T commissioned the design of a new typeface with the sole purpose for their telephone directories.
  • The design had to solve multiple technical and visual problems related with the existing phonebook typeface, Bell Gothic.
  • Ink traps compensated the amount of ink spread that occurs when printing on low-quality paper at high speeds, making it look normal (refer to Fig 1.6).
Fig 1.5 Bell Centennial typeface (17/10/2025, Week 4)

Fig 1.6 Comparison of font vs printed of ink traps (17/10/2025, Week 4)



Edward Johnston
Johnston Sans 
  • Creator of influential London "Underground" typeface, later known as Johnston Sans (1916)
  • Asked to create a typeface with "bold simplicity" that was truly modern yet rooted in tradition.
  • His design combined classical Roman proportions with humanist warmth.
  • Purpose: London's Underground railway ordered a new typeface for its posters and signage. 
  • Consideration/Limitations: "Johnston's remit was to unite London Underground Group, the different companies all using the same rails and tunnels."
Fig 1.7 Johnston Sans typeface (17/10/2025, Week 4)

Type Design
General Process of Type Design:
  1. Research
    • Understand type history, type anatomy and type conventions. Know terminologies, side-bearings, metrics, hinting, etc.
    • Determine the purpose and its different applications.
    • Examine existing fonts for inspiration, ideas, references, context, usage pattern, etc.
  2. Sketching
    • Traditional tool set: brushes, pens, ink and paper; scan to digitise. Some are more confident with their hands and have better control.
    • Digital tool set: example, Wacom; directly into a font design software, as it's much quicker, persistent and consistent; sometimes impede the natural hand strokes.
    • Both methods has pros and cons.
  3. Digitisation
    • Professional software to digitise typefaces: FontLab and Glyphs App.
    • Using Adobe Illustrator to design letterforms and then into the specialised font apps is however, frowned upon by the purist.
    • The importance is not just the form, but the counter form for the purpose of readability.
  4. Testing
    • Important component to refine and correct aspects of the typeface.
    • Prototyping is also part of the testing process and leads to important feedback.
    • Readability and legibility of the typeface becomes important consideration, but not as crucial if it's a display type, with expression of the form being important.
  5. Deploy
    •  There are always teething problems that did not appear in the prototyping and testing phases; revision doesn't end at deployment.
    • Rigour of testing is important so that teething issue remain minor.

Typeface Construction
Roman Capital: the grid consists of a square and a circle that just touches the lines of the square in four places. In the square, there is a rectangle which is three quarters the size of the square and positioned at the center. Using grids (with circular forms) can facilitate the construction of a letterform. 
Fig 1.8 Roman Capital construction with grids (17/10/2025, Week 4)

Construction and considerations
Classification according to form and construction:
Fig 1.9 Construction and considerations of creating letterforms (17/10/2025, Week 4)


Important visual corrections: 
  • Extrusion of curved and protruding forms past the baseline and cap line; this applies to vertical alignment between curved and straight forms. 
  • Distance between letters - it's not possible to place letters next to each other with equal spacing; the letters must be altered to a uniform 'visual' white space. The white space between letters should appear the same, called 'fitting' the type.
Fig 1.10 Visual correction (17/10/2025, Week 4)

Fig 1.11 Letters 'c' and 'e' construction (17/10/2025, Week 4)


Lecture 5: Perception and Organisation
Perception in typography: deals with visual navigation and interpretation of the reader via contrast, form and organisation of the content. Content can be textual, visual, graphical or in the form of colour. 

Contrast
Carl Dair's typographical contrasts:
  1. Size: the reader's attention is drawn to the bigger letter first before the small letter; most common usage is in a title or heading.
  2. Weight: how bold type can stand out in the middle of lighter type of the same style; using rules, spot, squares also provide a 'heavy area' for a powerful visual attraction or emphasis.
  3. Contrast of Form: distinction between a capital letter and its lowercase equivalent, or a roman letter and its italic variant; condensed and expanded versions of typeface are also included.
  4. Contrast of Structure: different letterforms of different kinds of typefaces; example - a monoline sans serif and a traditional serif, or an italic and a blackletter.
  5. Contrast of Texture: refers to the way the lines of type look as a whole up close and from a distance, depending partly on the letterforms themselves and how they're arranged. (Put contrasts of size, weight, form and structure on to a block of text.)
  6. Contrast of Colour: the second colour is often less emphatics in values than plain black or white; it is important to give thought to which elements needs to be emphasised and pay attention to tonal values.
  7. Contrast of Direction: opposition between vertical and horizontal, and the angles in between. Text blocks have their vertical or horizontal aspects of direction; mixing wide blocks of long lines with tall columns of short line can create contrast.
Fig 1.12 Carl Dair's seven Typographical Contrast (22/10/2025, Week 5)


Fig 1.13 Rudi Ruegg's typographical contrast (22/10/2025, Week 5)

Form
It refers to the overall look and feel of the elements that make up a typographical composition, playing a role in visual impact and first impressions. A good form in typography tends to be visually intriguing to the eye, leading the eye from point to point, entertaining the mind and is most memorable.
Fig 1.14 Example of form in typography (22/10/2025, Week 5)

Typography two functions:
  1. To represent a visual concept
  2. To do so in visual form
The interplay of meaning and form brings a balanced harmony both in terms of function and expression. When a typeface is perceived as a form, it no longer reads as a letter because it has been manipulated by distortion, texture, enlargement, and has been extruded into space.

Organisation (Gestalt)
Gestalt: German word; the way a thing has been 'placed' or 'put together'. Gestalt psychology is to understand the laws behind the ability to acquire and maintain meaningful perceptions. Gestalt theory emphasises that the whole of anything is greater than its parts - based on the idea that we experience things as unified whole: instead of breaking down thoughts and behaviour, the gestalt psychologists believed to look at the whole experience. In design, the elements that make up the design is only as good as the overall visual form.
  1. The Law of Similarity: elements similar to each other tend to be perceived as a unified group; similarity can be any features, such as colour, orientation, size or motion.
  2. The Law of Proximity: elements close together tend to be perceived as a unified group.
  3. The Law of Closure: mind's tendency to see complete figures or forms even if a picture is incomplete. partially hidden by other objects, or if a part of the information needed to complete a picture is mising.
  4. Law of (Good) Continuation: humans tend to perceive each of two or more objects as different, singular and uninterrupted object even when they intersect; the alignment of the objects or forms play a major role for this principle to take effect.



Module Information Booklet



Task 2
Part A: Key Artwork
Instructions
  • Make a mind-map of yourself and identify keywords
  • Make a mood board for direction
  • Produce sketches of wordmark/lettering of your name
  • Digitise final 2/3 key artworks and get approval
  • Construct an appropriate grid to build your characters on.
  • export JPEG, grayscale, 300ppi 
  • Go to the colour hunt and pick a colour palette for your identity 
  • wordmark: actual colour on lightest shade
  • lightest colour on darkest shade of the palette
  • Take a black and white self-portrait place key artwork (wordmark) on it artistically

Process
I made a mind-map of myself and extracted keywords to summarise what I want to represent in my key artwork.
Fig 2.1 Mind-map of myself (17/10/2025, Week 4)

Keywords/Summary:
  • Spontaneous
  • Imaginative
  • Fun
After my (crazy) informative mind-map, I see that I am leaning towards the creative arts, with my interests and skills. I wanted to showcase something that I resonate with while exploring different designs that could show people my brand.

Well, this beginning part was a little messy, as I had to redo my sketches and remake my mood board. Pinterest was down (such convenient timing) and I couldn't find the exact wordmarks I wanted. My sketches had too much drawing instead of writing a name, so I had to redo. The advice I was given was to narrow my keywords and use grids to make a wordmark without it looking too 'sketchy' or like a drawing. Below was my first progress.
Fig 2.2 1st Sketch Progress (17/10/2025, Week 4)

The following week, I created a new mood board, with a more precise style I want. Since I like spontaneous, fun lettering while my interests also revolve around medieval fantasy things, I wanted to try and combine both styles to somehow reflect what my interests are. However, Mr. Vinod said I should choose one type, as it is hard to combine both, especially when I didn't have time to study the letterforms carefully. Though, I managed to create a few ideas and liked one I did.
Fig 2.3 2nd Sketch Progress (22/10/2025, Week 5)

Mood Board
I decided on choosing the spontaneous fun side of the mood board, as I feel it represents my personality more, which should reflect on my brand. I changed my keywords to: spontaneous, imaginative and fun (same as above). 
Fig 2.4 Mood Board (22/10/2025, Week 5)

My chosen sketches to digitse and see which works are:
Fig 2.5 Final Sketch #1 (22/10/2025, Week 5)

Fig 2.6 Final Sketch #2 (22/10/2025, Week 5)

The feedback I received on Fig 2.5 was to fill the empty elements with colour and for Fig 2.6 to remove the 'i' dot. Both were approved as interesting and could be digitised. I should use a grid to make the letters, while using the space wisely and balance the wordmark.

Digitisation
I constructed individual grids for both of the sketches. Even though my first wordmark (Fig 2.5) will look more spontaneous in size and space, I try to keep it consistent and evenly spaced to create balance and harmony. The letters 'X' and 'y' takes up two spaces of the grid, while the remaining letters take up one space. With the letters 'i' and 'y' passing the ascender and descender, I tried to evenly space them out and balance with the bigger letter 'X'. I filled in the spaces with colour instead and made the lines rounded instead of sharp and thin.
Fig 2.7 Digitisation wordmark #1 (25/10/2025, Week 5)

Next, I tried digitising the second wordmark (Fig 2.6). This was trickier to work out the spacing but balanced the wordmark as best as I could. The capital 'X' letter takes up double the space, while the others take up one space of the grid. I left out the lines on the edges of the letters. I used similar curves and shapes to make the letters.
Fig 2.8 Digitisation wordmark #2 (25/10/2025, Week 5)

After I made some adjustments to each wordmark that works better, I compared them side by side. I like the first wordmark (Fig 2.9) more, as I think it balances better, as the sides are slightly larger that balances out, with the middle being smaller. I also resonate more with it as my brand, representing what I have on my mood board and keywords. It has a mixture of curves and straight lines, while fitting together in a fun and creative way. 

On the other hand, the second wordmark (Fig 2.9) is hard for me to balance the letters well and fill the space nicely. The letters also seem a bit empty and lacking, and so I'll move on with Fig 2.9
Fig 2.9 Adjusted digitisation #1 (25/10/2025, Week 5)

Fig 2.9 Adjusted digitisation #2 (25/10/2025, Week 5)

I continued to refine the first wordmark until it looks better and I am satisfied.
Fig 2.10 Refined digitisation #1 (25/10/2025, Week 5)

I tested out the space and how colour affects the wordmark with black and white. I actually like the black background with white text most, as it makes the key artwork pop out to attention, with the original key artwork coming in at second.
Fig 2.11 Black and white wordmarks (25/10/2025, Week 5)

Next, I had to choose the colour palette. And this was difficult for me. I generally love the contrast of orange and blue, while having orange and blue-green as my favourite colours. So what better options to represent my brand, I picked out a few that looked good. I tested out colours on my wordmark to see which looks the best.
Fig 2.12 Choosing the colour palette (25/10/2025, Week 5)

I decided I liked the last colour palette the best and explored what colour combinations I can come up with. I liked the blue more, so that will be my main colour choice. My favourite colour combination is the blue background and orange/beige wordmark, but I like to use both blue and orange in general.
Fig 2.13 Chosen colour palette (25/10/2025, Week 5)

Fig 2.14 Favourite chosen colours (25/10/2025, Week 5)


Animated GIF
As previously stated, I like to use both orange and blue, so I'll use two of the colours. As my keywords were spontaneous and fun, I'd like to make it seem full of energy and motion, while being imaginative with how I make it. I have not fully learned how to use After Effects or Animate, so I'll just use Illustrator and Photoshop to animate. 

I wanted the letters to move individually and come together into frame. After some jumping and whatever idea comes at the moment, I want to animate the drawing of the border around the wordmark and let the colours transform from blue to orange and back to blue again, with the final artwork being my favourite chosen colours.
Fig 2.15 Animated Frames (29/10/2025, Week 6)

It is a little messy, but it's ok for me to work with it, as I concentrate on making the outcome. I exported each frame and opened photoshop. I used the option of creating animation frames and use the timeline to create the animation. It took me some time as there were many frames, but I managed to complete it. However, I needed to add some frames to make it smoother. Even though the entire animation isn't smooth, I like the upbeat movement as it reminds me of stop-motion animation, making the wordmark more unique. 
Fig 2.16 Animating using Photoshop (29/10/2025, Week 6)

Fig 2.17 Added animation frames (29/10/2025, Week 6)

This is the animated GIF.
Fig 2.18 Animated Wordmark GIF (29/10/2025, Week 6)


Final Submission: 2A - Key Artwork
Fig 3.1 Black wordmark on white background (29/10/2025, Week 6)

Fig 3.2 White wordmark on black background (29/10/2025, Week 6)

Fig 3.3 Colour palette (29/10/2025, Week 6)

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

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

Fig 3.6 Final Key Artwork animation (29/10/2025, Week 6)

Fig 3.7 Final 2A Key Artwork PDF (29/10/2025, Week 6)




Part B: Collateral
Instructions
  • Collateral (3 items)
  • Expand your key artwork's identity into your chosen collateral
  • Plan out your IG design and consider creative ways of displaying your visual identity (collateral)
  • Screenshot of IG with good resolution with IG link
Process
Key Artwork Expansion
I like my wordmark as a sticker type as it is, so it is difficult for me to think of different ways to expand my wordmark. Since I used many combinations of the colour palette, I decided to use that and alternate between four different ones (orange and blue, plus the inverted ones) and make a pattern of the wordmark, with the beige as the background. It's like a wallpaper or wrapper, with the key artwork forming a pattern. 
Fig 4.1 Process of expansion #1 (7/11/2025, Week 7)

Fig 4.2 Wordmark expansion #1 (7/11/2025, Week 7)

Next, I experimented with the different strokes of the letters. I figured I could use the dot in 'i' and made another pattern. Another border was drawn around the dot, similar to the border around the wordmark. I arranged them to form some sort of spikes and alternated the colours to both orange and blue. It matches the bold, standing out design of the wordmark, so I decided to use it.
Fig 4.3 Wordmark expansion #2 (7/11/2025, Week 7)

I made a flower with the same shape. It looks nice but it does not fit in with the vibe the key artwork design is going for. The main designs seem more bold in colours and creativity, and the flower does not really add much to the key artwork. 
Fig 4.4 Wordmark expansion not used #3 (7/11/2025, Week 7)

Collateral
I chose two pictures of a myself and played around on Photoshop to see how it looks like. I tried putting the key artwork in different styles to see how well it works. The first picture uses a mix of blending the key artwork and blurring the original photo. I like this more as the picture and style works well with the key artwork and the design, showcasing a more fun, street-art vibe. 
Fig 4.5 My picture and key artwork #1 (7/11/2025, Week 7)

As for the second picture, I converted it to black and white, but added colour to the blue jacket and ice-cream cone as they match the colour palette. However, compared to the first picture, this fits in less with the key artwork, as I wasn't too sure how to place it artistically well. I'll make the collateral first and compare.
Fig 4.6 My picture and key artwork #2 (7/11/2025, Week 7)

Still not sure what my brand entails, as it is can include anything to express its freedom, I randomly searched some simple mock-ups that looks cool. My key artwork fits more on things like stickers or logo types, with the contrast of the colours and the pop-up art the design portrays. This was my first attempts at making the collateral.
Fig 4.7 First collateral progress (7/11/2025, Week 7)

The feedback I received was to make the collateral have the same look and vibe. They needed to match one another to make a nice overall picture, and later on for the Instagram posts. I should further explore on the collateral and add my expansions too. I decided I like my first portrait picture (Fig 4.5) and decided to use that. I like the hat (as it goes well with my picture) but not so much on the shirt. Along with the bag and name-cards that represents my wordmark well, I decide to continue using these as my collateral. The computer doesn't fit the overall mood of the brand, and will change to just making stickers. 

For the first collateral, the bag, I decided to put the wordmark with the blue background, and add the expansions. The wordmark is like the brand's logo with some simple decoration. Even if it's just a paper-bag, the given bag when shopping for the brand's item will reflect with its simplicity and colour contrast. I also added the wallpaper expansion wordmark on the plain white wall, while adding a warm filter to blend well with the collateral. 
Fig 4.8 Collateral #1 (11/11/2025, Week 8)

I found a similar brown-paper envelop for stickers, which matches the paper bag. Whenever I buy stickers, they are usually packed in an envelop like this, and I like the idea of it while also promoting a support in the environment in imaginative ways. Instead of the square background, I added a lose border around the wordmark, a more free-form bubble, which further expands the key artworks alongside its keywords. There would be several varieties of stickers (mainly the colour change), and also the expanded line of the key artwork. 
Fig 4.9 Collateral #2 (11/11/2025, Week 8)

As for the last collateral, I like the idea of the hat more than the shirt, as it reflects the brand of the key artwork better. I also added the wallpaper expansion at the back, while adding a warm filter. I try to match the pictures as much as possible. I inverted the colours to give a variety of designs to choose from. 
Fig 4.10 Collateral #3 (11/11/2025, Week 8)

I like the name-cards, but it doesn't really represent my collateral much, so I decided to add it as an extra and representation of my wordmarks. It shows both of the main use of blue and orange colours that I like, which I have chosen as my main key artworks for this name brand. I like its simplicity and contrasting colours.
Fig 4.11 Extra collateral for wordmark (11/11/2025, Week 8)

I used Adobe Illustrator to test out the design for my IG posts. I originally wanted to use my animation for one of the post, but it clashes too much with my key artwork, as there are too many of them. I decided to cut that later and replace it with my wallpaper expansion instead. I also will switch up the name-card, colour palette, and wallpaper expansion to be more fitting. I also realised I used the wrong size, as IG has a new scale for its posts, but this is only for reference.
Fig 4.12 IG post design #1 (11/11/2025, Week 8)

Fig 4.13 IG post design #2 (11/11/2025, Week 8)

Fig 4.14 IG post design #3 (11/11/2025, Week 8)

Design #1 (Fig 4.12) clashes too much, as there are several repeats of the same design. Design #3 (Fig 4.14) is a bit too light, and doesn't quite represent the colours I like and want. So I decide to go with Design #2, and go with the changes mentioned above.

I made a new Instagram layout. It mostly have a warm tone that balances the blue and orange together, without too much of a high saturation of colour. I like the effect of something pop and vintage mixed together for the brand.
Fig 4.15 IG posts layout (11/11/2025, Week 8)


Final Submission: 2B: Collateral
Fig 5.1 Collateral #1 (11/11/2025, Week 8)

Fig 5.2 Collateral #2 (11/11/2025, Week 8)

Fig 5.3 Collateral #3 (11/11/2025, Week 8)

Fig 5.4 Instagram Posts Design (11/11/2025, Week 8)


Fig 5.5 Screenshot of Instagram Post (11/11/2025, Week 8)

Fig 5.6 Final 2B: Collateral PDF (11/11/2025, Week 8)



Feedback
Week 5:
General Feedback: Don't draw too much details in the sketches, so that you can leave more room for ideas, resulting in more sketches. Use lines and margins or a grid to construct a unique key artwork, as structure is important for it to be cohesive.  It can be compacted in close proximity and have a flow, while being well balanced and harmonised. 
Specific Feedback: My wordmark sketches were too complicated, so simplify it. My mood board and sketches are quite different, while not capturing my keywords, so I have to rework on that too. I should shorten my keywords to one word instead, to a total of three.

Week 6:
General Feedback: Avoid a 45 degree angle as the wordmark, as it is not so nice. Use the space nicely, fill it up so it balances well. Have consistency in the stroke. Ask questions and be critical with your work. After constructing your work, look at it in a smaller size to see if it's readable. Show construction and process work of the letterforms.
Specific Feedback: When presenting sketches, I should label my designs for easier referencing. I shouldn't choose two very different types of style for my wordmark - choose one and stick with it. I have chosen one that I like, and one that Mr. Vinod approves as interesting, and I should quickly digitise it and continue on with the task.

Week 7:
General Feedback: This week, Mr. Vinod walked around the class to check out work, as most of us didn't finish making the collateral and animation for the wordmark. We need to quickly catch up and finish the task.
Specific Feedback: My wordmark is okay, the colour scheme works because of the contrast. I should quickly continue to make my collateral and Instagram post.

Week 8:
General Feedback: Finish task 2. Mr. Vinod showed us how to submit the E-portfolio, and advised us again to check everything is working and is able to be seen. He also briefed us about task 3 and that we should make a proposal with 3 ideas.
Specific Feedback: My collateral and self-portrait should look similar that looks good when put together. Should check the links given in Teams on how to expand my wordmark accordingly. Quickly finish making the collateral and animation.



Reflection
Observation:
This task allows more freedom to experiment and find out more about yourself through creating a wordmark. This was less tough compared to the previous task, as it is more on the creative side rather than researching and sticking to a certain rule. With this freedom, I sometimes observed that I will be a little stuck with no direction, but once I get the inspiration, I could start and ride the flow. This task helped with my own understanding of how to create a wordmark that represents something while expanding my critical thinking on creativity. 

Experience:
I like this task more than the previous tasks, as it allows me freedom to create what I want to reflect to others. It was hard at first, trying to find ideas and deciding on what I want, but it was a fun journey, though a little hard to match and expand my key artwork and collateral. In this task, I didn't really knew what I was doing at the start, but once I just tried it, I slowly get inspiration and direction in how to make my designs, which helps me get going. It was a fun task albeit I get a little lost sometimes. 

Findings:
My strengths lie in choosing colours that work and being able to work better when allowed more freedom and creativity. I could do this task a little more easily compared to previous typography tasks, while enjoying it more. On the other hand, I still find it tough to come up with something unique or to brainstorm more ideas, as I need to do it more often to get the hang of it.



Further Reading:





Comments