Advanced Typography / Task 2 : Key Artwork & Collateral

Perception in typography deals with the 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. However, our focus today is on typography.

Contrast

There are several method in typography to create contrast. Below are methods of contrast by Rudi Ruegg.

Fig 1.1 - Methods of Contrast by Rudi Ruegg

7 Types of Contrast by Carl Dair

Carl Dair on the other hand showcases 7 Types of Contrast, lets look at them and their explanation.

Fig 1.2 - 7 Types of Contrast by Carl Dair

1. Size

Fig 1.3 - Size

A contrast of size provides a point to which the reader's attention is drawn.

The most common use of size is in making a title/ heading noticeably bigger compared to the body text.

2. Weight

Fig 1.4 - Weight

Describes how bold type can stand out in the middle of the lighter type of the same style.

Other than using bold, using rules/spots/ squares also provides a heavy area for an emphasized point of visual attraction.

3. Form

Fig 1.5 - Form

A distinction between a capital letter and its lowercase equivalent, or a Roman letter and its italic variant, condensed/ expanded versions.

4. Structure

Fig 1.6 - Structure

The different letterforms of different kinds of typefaces. For example, monoline sans serif and traditional serif/ italic and blackletter.

5. Texture

Fig 1.7 - Texture

Created by putting the contrasts of size, weight, form, and structure together.

Texture refers to the way the lines of type look as a whole up close and from a distance.

6. Direction

Fig 1.8 - Direction

Opposition between vertical and horizontal, and the angles in between.

Turning one word on its side can create a dramatic effect, text blocks also have their vertical/ horizontal aspects of direction.

Mixing wide blocks of long lines with tail columns of short lines can also create a contrast.

7. Colour

Fig 1.9 - Colour

The use of colour suggests that a second colour is often less emphatic in values compared to plain black on white.

It is important to give thought to which element needs to be emphasized and to pay attention to the tonal values of colours that are used.

Form

Form refers to the overall look and feel of the elements that make up the typographic composition. It is the part that plays a role in visual impact and first impressions. A good form of typography tends to be visually intriguing to the eye which leads the eye from point to point, entertaining the mind and often memorable.

Fig 1.10 - Forms

The word typography originated from the Greek words 'typos' (form) and 'graphis' (writing), which means to write in accordance with the form.

Typography can be seen as having 2 functions:

1. To represent a concept

2. To represent a concept in a visual form

Displaying type as a form provides a sense of letterforms' unique characteristics and abstract presentation. Below are some examples of great combinations of typographical forms:

Fig 1.11 - Examples of great combinations of typographical forms

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 due to the manipulation of its letterform by distortion, texture, enlargement, and being extruded into a space.

Fig 1.12 - Examples how form and communication come together

Organization

Gestalt

Gestalt is a German word meaning the way a thing has been "placed" or "put together".

An attempt to understand the laws behind the ability to acquire and maintain meaningful perceptions.

A Gestalt psychologist, Max Wertheimer developed a number of laws that predict how perceptual grouping occurs under a variety of circumstances.

Emphasizes that the whole of anything is greater than its parts—based on the idea that the things we experience are a unified whole.

Perceptual Organization / Groupings

Gestalt Laws

1. Laws of Similarity

2. Laws of Proximity

3. Laws of Closure

4. Laws or Continuation

5. Laws of Symmetry

6. Laws of Simplicity (Praganz)

1. The Law of Similarity

States that elements that are similar to each other tend to be perceived as a unified group.

Similarity can refer to any number of features, including colour, orientation, size, or indeed motion.

2. The Law of Proximity

State elements that are close together tend to be perceived as a unified group.

Items close to each other tend to be grouped together, whereas items further apart are less likely to be grouped together.

3. The Law of Closure

Refers to the mind’s tendency to see complete figures or forms even if a picture is incomplete, partially hidden by other objects, or if part of the information needed to make a complete picture in our minds is missing.

4. Law of (Good) Continuation

Holds that humans tend to perceive each of two or more objects as a different, singular, and uninterrupted object even when they intersect.

The alignment of the objects or forms plays a major role in this principle.

Instructions

Module Information Booklet

Task 2 (A) — Key Artwork (10%)

Timeframe: Week 4 - Week 6 (Deadline Week 6)

In task 2A, we were given instructions to create a wordmark of our own name/pseudonym.

What we need to submit:

Black wordmark on white background
White wordmark on black background
Colour palette
Wordmark in actual colours on lightest shade of colour palette
Wordmark in lightest shade of colour palette on darkest shade of colour palette
Wordmark animation

Task 2 (B) — Collateral (20%)

Timeframe: Week 6 - Week 8 (Deadline Week 8)

Using the wordmark that we created from task 2A, we were instructed to expand the visual identity and apply the design to chosen collaterals. This also included creating a layout design for an Instagram page.

What we need to submit:

3 Collateral
Instagram link
IG screen grab with good resolution

-------------------------------------------------------------------------------

Task 2 A: Key Artwork

Getting started : Personal Mindmap

To start, we were instructed to create a mindmap about us. Here is a simple mindmap about me:

Fig 2.1 - Mindmap 'Who am I', Week 4

I also created a mood board for my artistic direction and inspirations for my wordmark design. I focused on a few keywords based on what I like, such as: Cat, Bubble, simple, stars and elegant.

Fig 2.2 - Moodboard, Week 4

Sketches and digitizing

After choosing the style direction and keywords, I decided to do some pencil sketches. After that, I digitized my works.

Fig 2.3 - Pencil sketch, Week 4

For the 1st idea, I decided to go with an elegant yet simple handwriting style. As you can see, the letters are all connected by the strokes. Then I added a big 4-pointed star on the 'R' and many small stars surrounding the wordmark.

Fig 2.4 - Idea 1 digitization, Week 4

For the 2nd idea, I decided to have rounded, bubbly fonts, with the 'R' designed like a cat.

Fig 2.5 - Idea 2 digitization, Week 4

Feedback, redesigning and digitizing again

After having Mr. Vinod review these works during class time, he commented that for Idea 1, I could explore more variations of the wordmark, such as making the strokes thicker, using different widths, or using flat tip pens.

As for idea 2, he asked me "what make your cat type design different from other people?" and asked me to explore more on that, as more work could be done.

Therefore, I started exploring new designs, below are my new works:

1. Expanding on idea 1 - idea lines

Here, I have decided to try messing with the width of the strokes in the wordmark of idea 1 and came up with a different layout. However, I quickly gave up on expanding this design as I found it too difficult to redesign.

Fig 2.6 - Expanding on idea 1 - idea lines (Gave up), Week 5

2. Exploring new design - idea web designer

For this design, I decided to use a font called 'Franxurter Totally - medium' and build my design based on this font. At first, I wanted to use many cat-related elements like the car ears, fish, and cat's tail. Then, I removed the fish element in the letter 'a' in favour of a clover shape design that represent good luck. The cat ear were kept but moved to the letter 'c' instead.

For the cat tail design, I decided to remove it and replace it with bars connecting the letters 'R', 'h' and 'l' together. At this point I realised that the connecting part of 'h' and 'l' looked like a webpage, so i decided to incorporate some web element like the search bar, the 3 dots at the bottom, and added a black line to create the webpage feel.

Fig 2.2 - Expanding on idea 2 - idea web designer, Week 5

The final version of this design idea is the second to last design on the left.

Fig 2.3 - Idea 2 - idea web designer Final version, Week 5

3. Exploring new design - idea blocky

For this design, I had the sudden urge to make blocky words. So here they are.

Fig 2.4 - Idea 3 - Exploring new design - idea blocky, Week 5

The final version of this design idea was chosen because it reminded me of the among us character

Fig 2.5 - Idea 3 - idea blocky Final version, Week 5

4. Exploring new design - idea street icon

This is my favorite design idea out of the rest. I started by using 'Franxurter Totally - medium' as a base. I swapped out the the letter 'A' for a triangle (looks like a hazard sign). The letter 'R' was reused from the previous designs as it fits the style and theme well. The letter 'E' was inspired by the menu button seen in websites, and the letter 'H' was inspired by the font used in the game 'Zenless zone zero'.

Fig 2.6 - letter redesign inspirations, Week 5

Fig 2.7 - Idea 4 - Exploring new design - idea street icons, Week 5

Fig 2.8 - Idea 4 - idea street icons Final version, Week 5

After reviewing all new designs, I decided that I liked idea number 4 - Idea street icon - the best, and showed it to Mr. Vinod for review.

Fig 2.9 - Chosen wordmark, Week 5

Feedback and minor adjustments

The feeback given was to adjust the kerning of the letters, as the 'R' look a bit far from the 'A", and space between the 'E' and 'L' is too wide. So, I adjusted the letters to be much tighter.

Fig 2.10 - Wordmark kerning adjustments, Week 6

Fig 2.10 - Final digitized wordmark, Week 6 (27/5/2025)

Colour Application

For the colour palette, I used websites like Colour Hunt to look for the right colour combinations of my liking. After picking and choosing, I selected 2 colour palette that i liked. However, I liked the pink on the 1st palette, and the other colours on the second palette, so I extracted the colours that I like and created a new colour palette for my wordmark.

Fig 2.11 - Color palette exploration, Week 6

After showing Mr Vinod my colour palette, he commented that I needed a 5th colour for my palette, preferably a lighter colour. So I added a light buttercream colour into the palette.

Fig 2.12 -Final choice of colour palette, Week 6 (27/5/2025)

Making the Animation

For animation, I used Adobe After Effects to animate the wordmark. I went to Youtube to learn how to use the trim path tool.

Fig 2.13 - Animation process on Adobe After Effects, Week 6

Fig 2.14 - Finalized Animation, Week 6 (31/5/2025)

-------------------------------------------------------------------------------

Task 2A Final

(Edit 8/6/2025 - Changed square artwork size to new Ig size (1080px x 1350px)

Fig 2.15 - Black wordmark on white background, Week 7 (3/6/2025)

Fig 2.16 - White wordmark on black background, Week 7 (3/6/2025)

Fig 2.17 - Colour Palette, Week 7 (3/6/2025)

Fig 2.18 - Wordmark in actual colours on lightest shade of colour palette, Week 7 (3/6/2025)

Fig 2.19 - Wordmark in lightest shade of colour palette on darkest shade of colour palette, Week 7 (3/6/2025)

Fig 2.20 - Finalized Animation, Week 7 (3/6/2025)

Fig 2.21 - Task 2A PDF Compilation, Week 7 (3/6/2025)

-----------------------------------------------------------------------------------------------------------

Task 2 B: Collateral

Below is the website where I got my mockup template from:

https://mockupbee.com

All of the mockups were done using Adobe Photoshop with patterns and design layouts prepared using Illustrator.

Collateral 1 - Phone Case

The first mockup I chose was an Phone case. After finding a suitable mockup model for my designs from the website, I started creating design for my mockup.

The idea was to go for 'simple and clean', so I when with a blue background and my wordmark, split into 2, and arranged vertically. The pink line was added for a pop of colour.

Fig 3.1 - Phone case design, Week 8

Fig 3.2 - Collateral 1 - Phone case, Week 8

Collateral 2 - Metal Water Bottle

The second mockup that I have chosen was a metal water bottle.

Using a blue base for the design, a pattern is laid over the base, with the wordmark hidden in one of the triangle pattern. The pattern is made from the letter 'A' from my wordmark.

I have made 2 colours of the design and in the end, I decided to go with the blue design to put on the mockup.

Fig 3.3 - Water bottle design (Colour: Black), Week 8

Fig 3.4 - Water bottle design (Colour: Blue), Week 8

Fig 3.5 - Collateral 2 - Metal bottle case (Blue), Week 8

Collateral 3 - T-shirt

Finally, the last mockup that I picked out is a T-shirt.

Using a black base for the design, the triangular pattern from the 2nd collateral was reused for the t-shirt pattern. By adding some colour to the pattern, I feel it strengthens the brand identity.

I have made 2 design and in the end, I decided to go with the first design to put on the t-shirt.

Fig 3.6 - T-shirt design 1, Week 8

Fig 3.7 - T-shirt design 2, Week 8

Fig 3.8 - Collateral 3 - T-shirt design 1, Week 8

After deciding which design to use and editing it on the mockup, I cropped the mockup images to fit the new Instagram grid (1080px x 1350px):

Fig 3.9 - Finalized collaterals (cropped), Week 8 (11/6/2025)

Identity Expansion & Instagram Tile Design

Colour Palette

For the colour palette, I have created 5 boxes with all 5 colour, then arranged them to be one colour down from their original colour layer. the grey box is then moved to the top.

Fig 3.10 - Colour palette, Week 8

Black & White Photograph

For the photograph, I took a picture of myself, then added a black and white filter over the image. After that, I arranged my wordmark over my image like so.

Fig 3.11 - Black and white self portrait (original photo to finished product), Week 8

Pattern Expansion

For the first pattern expansion, I will be using the 'A' from my wordmark. In the fully coloured design of the wordmark, as that 'A' is consider the highlight of the wordmark. I have also applied the blue and pink colours on the pattern.

Fig 3.12 - Pattern expansion 1, Week 8

For the second pattern expansion, I have decided to use the lines that make up the wordmark as the base of the pattern.

Fig 3.13 - Pattern expansion 2, Week 8

Once everything is finalized, I compiled them to make the Instagram layout.

Fig 3.14 - Instagram layout, Week 8 (11/6/2025)

Modification and Adjustments

After showing my work to Mr. Vinod, he commented that I could have expanded more on the design. It's ok, but can be better. I have decided not to expand more as I like my current pattern design enough.

He also mentioned that the GIF should be uploaded to the Instagram page.

Due the GIF needing to be uploaded to the Instagram page, I have made some adjustments to the layout and some of the pattern/word tiles.

Fig 3.15 - New layout planning, Week 8

Below is my finalized version of the Instagram feed layout:

Fig 3.16 - New layout, Week 8 (13/6/2025)

-------------------------------------------------------------------------------

Task 2B Final

Fig 3.17 - Collateral 1, Week 8 (13/6/2025)

Fig 3.18 - Collateral 2, Week 8 (13/6/2025)

Fig 3.19 - Collateral 3, Week 8 (13/6/2025)

Fig 3.20 - Instagram page design layout, Week 8 (13/6/2025)

Instagram link: https://www.instagram.com/r.a.c.h.e.l_42/

Fig 3.21 - Instagram page screenshot, Week 8 (13/6/2025)

Fig 3.22 - Task 2B PDF Compilation, Week 8 (13/6/2025)

Final: Key Artwork & Collateral Compilation

Fig 4.1 - Black wordmark on white background, Week 7 (3/6/2025)

Fig 4.2 - White wordmark on black background, Week 7 (3/6/2025)

Fig 4.3 - Colour Palette, Week 7 (3/6/2025)

Fig 4.4 - Wordmark in actual colours on lightest shade of colour palette, Week 7 (3/6/2025)

Fig 4.5 - Wordmark in lightest shade of colour palette on darkest shade of colour palette, Week 7 (3/6/2025)

Fig 4.6 - Finalized Animation, Week 7 (3/6/2025)

Fig 4.7 - Task 2A PDF Compilation, Week 7 (3/6/2025)

Fig 4.8 - Collateral 1, Week 8 (13/6/2025)

Fig 4.9 - Collateral 2, Week 8 (13/6/2025)

Fig 4.10 - Collateral 3, Week 8 (13/6/2025)

Fig 4.11 - Instagram page design layout, Week 8 (13/6/2025)

Instagram link: https://www.instagram.com/r.a.c.h.e.l_42/

Fig 4.12 - Instagram page screenshot, Week 8 (13/6/2025)

Fig 4.13 - Task 2B PDF Compilation, Week 8 (13/6/2025)

Feedback

Week 5:

General feedback :

Mr Vinod reviewed our Task 2A, Key Artwork. Some general feedback to note:

Don’t put too many graphical elements
Learn to explain your design
(Mr Vinod showcased many great typography designers)
Make sure it is readable

After that, we were instructed to watch lecture 5 and write notes.

Specific Feedback :

Feedback on Task 2A, Key Artwork:

(Idea 2) What make your cat type design different from other people, explore more on that, more work could be done.
(Idea 1) Explore more variations, make the strokes thicker, different widths, flat tip pens

Week 6:

General feedback :

Mr Vinod reviewed our Task 2A, Key Artwork. Some general feedback to note:

Spacing, do adjust it
Keep the wordmark sweet and simple
Animation (not too long/ complicated) (must be simple and quick)

After that, we were instructed to choose colour palette and apply them to the wordmark. Also, begin animating the wordmark and Task 2 (B) Collateral.

Specific Feedback :

Feedback on Task 2A, Key Artwork: digitized

Good, but fix spacing between ‘R’ and ‘A’ / ‘H’ and ‘E’
Colour palette – add another light colour and arrange all the neutral colours together

Week 7:

General feedback :

Mr Vinod reviewed our Task 2B, Collateral. Some general feedback to note:

Remember to have 5 colours in your colour palatte, also remember to have a complementary colour to your base colour.

Specific Feedback :

Feedback on Task 2B, Collateral

Good work

Week 8:

General feedback :

Mr Vinod reviewed our Task 2B, Collateral. Some general feedback to note:

Most of the works don’t stand out.
Pattern should not fight with the wordmark
Add the gif to the Instagram page

Specific Feedback :

Feedback on Task 2B, Collateral

Could have expanded more on the design
(phone mockup) where did the pink line come from?

Reflections

Experience :

Out of all the tasks, Task 2 has been one of the most interesting. I had a lot of fun exploring how to make my name into a wordmark and expanding that into patterns and collaterals. It was also a great opportunity to improve my skills on Adobe Illustrator, Photoshop, and especially After Effects. It was frustrating trying to animate my wordmark, as some ideas I had could not be executed. But after a lot of trial and error (and a few wonderful YouTube tutorials and reddit posts), I managed to create something I was happy with.

Observations :

When I worked on the Instagram layout for Task 2B, I found it really helpful to view all my tiles together. It helps me to plan out the tiles and how to arrange it. Also, YouTube tutorials has really saved my life in this task, I have managed to learn many new tips and trick of the adobe software, and how to create the work I want.

Findings :

I noticed that finalizing keyword and getting reference idea early can help speed up the designing processes and eliminate much stress and confusion. Other than that, I have learned that creating variation of an initial design may lead to unexpected outcomes. Also, when designing mockups, choose items that fit the style of your wordmark.

Search This Blog

Rachel Ng Jie Ting (0378902)