Advanced Typography - Task 2: Key Artwork & Collateral

20.10.2025 - 16.11.2025 / Week 5 - Week 8

Dave Christian Moniaga / 0385630

Advanced Typography / Bachelor of Design (Hons) in Creative Media

Task 2: Key Artwork & Collateral

Lectures

Week 5: Perception & Organisation

Perception in typography deal with visual navigation & how viewers interpret content based on contrast, form and organization.

Contrast

There are multiple ways to create contrast in typography as shown by Rudi Ruegg:

Fig 1.1 Methods to create contrast by Rudi Ruegg (21/10/2025, week 5)

Contrast is important to create distinction / differentiation of information for the reader. It helps to make the design work pop out clearly & ambiguously.

For Carl Dair, contrast can also be achieved through texture & direction. He also posits 7 kinds of contrast, some which have the same ideas as Rudi Ruegg.

Contrast/Size

contrast on size points on which the reader's attention is drawn to; contrast of heading to body text (usually 1-2pt is enough / different weight). This idea should be used in context to what you are making.

Contrast/Weight

weight involves how bold can stand out with a lighter type of the same style. Using rules, spot, or square also provide a "heavy area".

Contrast/Form

the difference between capital letters and lowercase, roman and italic, condensed and expanded versions of typefaces. (important in poster, books, etc)

Contrast/Structure

different letterforms / typefaces such as, a monoline sans serif and a traditional serif.

Contrast/Texture

a combination of size, weight, form, and structure as lines of text up close and in a distance, creates texture. This is also affected in their arrangements.

Contrast/Direction

difference in direction such as vertical and horizontal, including angles in between. Variation in text blocks height and their columns also counts.

Contrast/Color

Using a secondary color has less emphatic value than b&w. It requires great consideration on the element that you use color on; too much can create confusion.

Fig 1.2 Carl Dair's 7 Typographical Contrast (21/10/2025, week 5)

Form

Form creates the most visual impact as it refers to the look & feel of elements in typography; it should be visually intriguing and leads viewers eyes. its often the most memorable as it entertains the mind. A similar comparison is like the tune of music.

As the Greek word "typos" (form) & "graphis" (writing), typography means to write according to form. The two functions of typography are:

to represent a concept
in visual form

Fig 1.3 Examples of good form (21/10/2025, week 5)

A strategical placement to create beautiful and harmonious alignment can be seen from the examples. Their aspect as a communication tool changes as their form does; a combination of both brings balance in function and expression.

Fig 1.4 Extreme use of form and information (21/10/2025, week 5)

Organization / Gestalt

Gestalt is German for they way things are "placed" or "put together". Gestalt theory emphasize that the whole of anything is greater than its parts; we experience thing as a unified whole (The sum of its part is not greater the whole).

Fig 1.5 Some of Gestalt Principles (21/10/2025, week 5)

Law of Similarity, elements that are similar tend to be perceived as a unified group (colors, orientation, size, motion).

Law of Proximity, elements that are close together perceived as unified group.

Law of Closure, the mind's tendency to complete figures/forms in an incomplete picture.

Law of (Good) Continuation, humans perceives two or more objects as different, singular, & uninterrupted. we prefer to see continuous flow of visual elements rather than separated objects.

Law of Symmetry, we perceive symmetrical elements as a unified whole/group.

Instructions

Task 2A: Key Artwork

In this task, we are instructed to design a key artwork based of our name or pseudonym. Following that, we will also transform our key artwork into a collateral in the next part of this task.

To start off, I made a mind map about myself that puts into detail my personality, hobbies, background, aesthetics, and my pseudonym: "kali".

Fig 2.1 Mind Map about me (20/10/2025, week 5)

I took several keywords that I felt represents me the most and is a part of my personality. I took several references from Pinterest that have a similar effect and feel to my keywords for inspiration.

Fig 2.2 Key artwork references from Pinterest (20/10/2025, week 5)

Fig 2.3 Key artwork sketch attempt #1 (20/10/2025, week 5)

Based on the feedback in week 5, I noticed that I have to reduce the amount of keywords I have so that I can have a more cohesive key artwork. I chose three keywords to focus on instead:

military/order
grunge
gothic

Fig 2.4 Key artwork sketch attempt #2 (26/10/2025, week 5)

From these sketches, I chose one of each that feels the most refined and stands above the rest. I then put these sketches and refined them in Illustrator.

Fig 2.5 Key artwork (28/10/2025, week 6)

Out of the three I chose the grunge key artwork, though based on his feedback, I needed to change the gunshot shape of the "a" as it resembled closely to the overused mainstream star shape used in a lot of trending key artwork.

Fig 2.6 Key Artwork Refine (28/10/2025, week 6)

I ended up choosing the option that features the gunshot and blood. My thought is that it would help at using this symbol as part of my collateral.

Fig 2.7 Key Artwork Final Design (28/10/2025, week 6)

As part of the final submission, I chose two color palettes from color hunt that matches the grunge vibe, specifically a good contrast with a primary color of red.

Fig 2.8 Color palette choices (28/10/2025, week 6)

The lecturer mentioned that both works, but I might need to tweak the off-white color from the first color palette. I felt that the first one also remind me too much about medical and sailor colors, so I went with the second one instead.

Fig 2.6 Wordmark with color palette (3/11/2025, week 7)

Final Submission: Task 2(A) Key Artwork

Fig 2.7 Black wordmark on white background (3/11/2025, week 7)

Fig 2.8 White wordmark on black background (3/11/2025, week 7)

Fig 2.9 Color Palette (3/11/2025, week 7)

Fig 2.10 Wordmark in actual colors on the lightest shade of the color palette (3/11/2025, week 7)

Fig 2.11 Wordmark in lightest shade of the color palette on the darkest shade of the color palette (3/11/2025, week 7)

Fig 2.12 Final Wordmark Compilation - PDF (3/11/2025, week 7)

Task 2B: Collateral

In this part of the task, I will be expanding my key artwork into a collateral. Since my key artwork has a lot of sharp edges as well as a bleeding gunshot symbol, the logical thing to do was to expand on these shapes.

Fig 3.1 References for barb wire, spikes, and gunshots (28/10/2025, week 6)

I feel as if the sharp edges resemble a barb wire. For the gunshot symbol, I can extend the dripping of the blood, remove it entirely, or change the gunshot spread as well.

Fig 3.2 Key artwork expansion exploration (28/10/2025, week 6)

To solidify my brand identity, I wanted to push the theme of grunge as an inspirational voice that push people against hard times in our current world affairs. I took several mock ups online from this website. I chose a billboard, tape design, and pins for my mockup.

Fig 3.3 Collateral Mock up (3/11/2025, week 7)

Fig 3.4 Scrapped t-shirt mockup (3/11/2025, week 7)

I also tried making a T-shirt mock up, but it felt a bit bland and didn't really fit the brand identity I was going for.

Fig 3.5 Collateral Instagram post (4/11/2025, week 7)

From the feedback in week 7, I realized that a lot of my collaterals have too much empty space. Subsequently, the idea of using a billboard to send this inspiring quote does not go in line with my grunge and rebellious theme.

Fig 3.6 Collateral with Instagram design (11/11/2025, week 8)

The following week, I reduced the amount of empty space and changed the billboard into a graffiti. I posted them in an Instagram account that I have made.

I also had to changed the dimensions of all my designs into 1080x1350 for the submission as Instagram had changed their sizing.

Task 2B: Collateral (Animation)

I sketched out a quick animation in Photoshop to test whether my idea would work. After I got confirmation from the lecturer, I tried to redo the same animation in After Effects.

Fig 3.7 Animation sketch test in Photoshop (3/11/2025, week 7)

With the new Instagram sizing, I plan to change the resolution of the animation. I then refine the placement of the initial spikes in Illustrator and grouped them to be ready for animation in After Effects.

Fig 3.8 Prep for animation in Illustrator (14/11/2025, week 8)

I underestimated the complexity of this animation when I tried to recreate it in After Effects. It took multiple attempts with different techniques, multiple Illustrator files that have different layers, but I finally managed to finish it on time.

Fig 3.9 Following frame by frame from Illustrator files (15/11/2025, week 8)

I converted the vectors into shape and took a few frames that I created in Illustrator as a base for the in-between of the animation.

Fig 3.10 Animation process in After Effects (16/11/2025, week 8)

I pre-comp the main animation movement, added motion blur and Easy Ease to create a smooth flow between the keyframes.

Fig 3.11 Final Animation GIF (16/11/2025, week 8)

Final Submission: Task 2(B) Collateral

Fig 3.12 Collateral 1: Graffiti (16/11/2025, week 8)

Fig 3.13 Collateral 2: Tape Design (16/11/2025, week 8)

Fig 3.14 Collateral 3: Pin Design (16/11/2025, week 8)

Fig 3.15 Wordmark Animation GIF (16/11/2025, week 8)

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

Fig 3.16 Instagram screen grab (16/11/2025, week 8)

Fig 3.17 Final Collateral Compilation - PDF (16/11/2025, week 8)

Task 2 Final Compilation

Fig 4.1 Black wordmark on white background (3/11/2025, week 7)

Fig 4.2 White wordmark on black background (3/11/2025, week 7)

Fig 4.3 Color Palette (3/11/2025, week 7)

Fig 4.4 Wordmark in actual colors on the lightest shade of the color palette (3/11/2025, week 7)

Fig 4.5 Wordmark in lightest shade of the color palette on the darkest shade of the color palette (3/11/2025, week 7)

Fig 4.6 Final Wordmark Compilation - PDF (3/11/2025, week 7)

Fig 4.7 Collateral 1: Graffiti (16/11/2025, week 8)

Fig 4.8 Collateral 2: Tape Design (16/11/2025, week 8)

Fig 4.9 Collateral 3: Pin Design (16/11/2025, week 8)

Fig 4.10 Wordmark Animation GIF (16/11/2025, week 8)

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

Fig 4.11 Instagram screen grab (16/11/2025, week 8)

Fig 4.12 Final Collateral Compilation - PDF (16/11/2025, week 8)

Back to top

Feedback

Week 8:

General Feedback:

Since this is our final week to do this task, he set our submission date to November 17 and briefed us about Task 3. This task is about making a complete typeface, we should prepare 3-5 proposal ideas. Mr. Vinod also informed us to look at examples from the TDC competition folder he has provided us.

Specific Feedback:

As the Instagram sizing have changed, I have to turn my square designs of my collateral into the intended size of 1080x1350, this sizing should also reflect in all of the other collateral works that I have, such as the animation. Mr. Vinod also looked at my animation sketch and approved of it, allowing me to proceed and finalize it in After Effects.

Week 7:

General Feedback:

This week, we got feedback for our collateral designs. Mr. Vinod reminded us that the elements and shape that we use in our collateral have to come from the wordmark itself and cannot be something else entirely. Upon finishing the wordmarks, we are also told to proceed and upload the designs and images in an Instagram account that has the same name as our collateral brand.

Specific Feedback:

For my feedback, Mr. Vinod approved most of my designs and told me to make sure that the collaterals I have done are enlarged to reduce any unneeded empty space. My tape collateral needed to have closeups for ease of viewing and bold impact to the audience. I was also advised to refine my billboard collateral as my design clearly fits the rebel and anarchist style of graffiti better than a corporate billboard.

Week 6:

General Feedback:

There were some advice that Mr. Vinod gave us today. He did a tutorial on how we can maintain balance and consistent thickness when creating key artworks, as well as reminding us to soften sharp points in our design by cutting them so it is more pleasing to look at from afar. Based on what we have designed, we are also told to not be afraid in changing and deviating what we have so for, especially if our design hasn't been approved yet. Next week, we are tasked to continue with our key artwork by making a brand identity from it.

Specific Feedback:

Mr. Vinod approved of the digitized design that I made and tasked me to continue with choosing the color palette for my wordmark expression. I am also told to remove the star like shaped on the counter form of the "a" letter as mentioned previously last week about the overuse of the mainstream star. Following that, I can now focus on expanding my work for the collateral part of task 2.

Week 5:

General Feedback:

In our new task, the class was given feedback by Mr. Vinod on the sketches that we have developed through the mind map. In our key artwork, we have to maintain balance and consider the amount of space around our key artwork. The professor has also made a rule to ban any of the mainstream star & moon styled key artworks to reduce any repetition and promote more creativity among the students. He also introduced us to Wim Crouwel and his distinct typography through unique grids.

Specific Feedback:

For my current feedback, I need to refine and focus more detail with the keywords that I have chosen to have a more cohesive key artwork. Based on the sketches I have shown, Mr. Vinod quite like the direction of the grunge style sketch including some of the gothic ones too. Personally, I will try to focus on creating three outcomes that lean either more into the keywords; grunge, gothic, or military.

Reflection

Experience

I think this task was enjoyable and it pushed me in certain cases outside of my comfort zone. Being able to explore more about myself and create a brand idea behind it really helped to keep students like me motivated in creating and finishing this task. I was able to learn more about After Effects too as it was a program that I had never really touched before. Though I do feel like I could have explored more during my collateral, especially with the mock ups I have made.

Observation

In my experience with doing sketches and the ideation process of this task, I had to let go a lot of good ideas that I made. I feel like as an artist, I have accepted this part of the process as well as learning how to make the right choice when choosing the final design. At the same time, I also realized that this part of the exploration helps at giving me newfound knowledge about a lot of details that I normally would not encounter if I had just done the minimum amount of work needed.

Findings

When looking at the amount of detail and thinking that comes behind a design made by professionals, its astounding that so many people often overlook and not think twice about the visual symbolism that is present in the design. For example, In Paula Scher's design would not have initially guessed that the cone like shape in the Atlantic Theatre Company's new logo is of a spotlight.

Search This Blog

Dave Christian Moniaga (0385630)