Advanced Typography -Task 2 : Key Artwork & Collateral

Typography - Task 2 : Key Artwork & Collateral

13/05/2025 - 10/06/2025 (Week 4 – Week 8)

Valenz Jycee Primadi / 0373407
Typography / Creative Media / School of design
Task 2 / Key Artwork & Collateral

TABLE OF CONTENTS

1. Lectures

2. Instructions

Task 2

3. Exercise Part 2(A)- Key Artwork

4. Exercise Part 2(B)- Key Artwork

5. Task 2 Complilation Outcome

6.Feedback

7. Reflection

8.Further Reading

LECTURES

Week 5: Perception And Organisation

Key Concepts in Typography and Perception

1. Perception in Design

Definition of Perception: Perception is how something is regarded, understood, or interpreted .
Manipulation of Perception: In design, especially advertising, perception can be manipulated to influence understanding.

2. Importance of Contrast in Typography

Role of Contrast: Contrast is essential for creating distinction between different types of information, aiding in readability and comprehension.

Fig 1.1. Methods of Contrast by Rudi Ruegg, Week 5 (20/05/2025)

7 Types of Contrast by Carl Dair

Fig 1.2 Methods of Contrast by Carl Dair Week 5 (20/05/2025)

Methods of Creating Contrast:

Size: Contrasting the size of text creates a visual hierarchy, making larger text the focal point and smaller text subordinate.

Fig 1.3 Contrast (Size), Week 5 (20/05/2025)

Weight: Changing the weight of text (bold, lighter) can make elements stand out or blend in. Bold type can stand out against lighter text.

Fig 1.4 Contrast (Weight), Week 5 (20/05/2025)

Form: Differentiating between capital and lowercase letters or using different typefaces.

Fig 1.5 Contrast (Form), Week 5 (20/05/2025)

Contrast: Different fonts called weights and styles can help organize and emphasize information like bold vs. light, upper case vs. lower case, or Roman vs. italic.

Fig 1.6 Contrast, Week 5 (20/05/2025)

Texture: The overall appearance of type can create visual interest.

Fig 1.7 Contrast (Texture), Week 5 (20/05/2025)

Direction: Mixing vertical and horizontal text can create dynamic layouts.

Fig 1.8 Contrast (Direction), Week 5 (20/05/2025)

Color: Thoughtful use of color can enhance contrast but must be applied carefully to avoid confusion.

Fig 1.9 Contrast (Color), Week 5 (20/05/2025)

3. Gestalt Principles in Design

Gestalt Psychology: This theory emphasizes that the whole is greater than the sum of its parts, which is crucial in design.

Key Principles:

Law of Similarity: Similar elements are perceived as a unified group.
Law of Proximity: Elements close together are perceived as related.

Fig 1.10 Law Of Proximity & Similiarity, Week 5 (20/05/2025)

Law of Closure: The mind tends to complete incomplete figures.
Law of Continuation: Humans perceive continuous lines and patterns.

Fig 1.11 Law Of Closure& Continuation, Week 5 (20/05/2025)

4. Organization of Information

Hierarchy in Design: Effective organization of information is crucial for readability and understanding.
Social Responsibility: Designers have a responsibility to ensure that information is presented clearly and effectively to facilitate knowledge transfer.

5. Form and Functionality

Duality of Form and Function: Good design balances visual appeal (form) with functionality.
Memorable Design: Effective typography should be visually intriguing and memorable.

Fig 1.12 Form, Week 5 (20/05/2025)

INSTRUCTIONS

Task 2(A)–Key Artwork

Mind Mapping

We begin task 2 by creating a mind map about our personalities. Here is a short mind map about me:

Fig 2.1 Mind Map, Week 5 (16/05/2025).Jpeg

I also created a mood board to make it easier for me to find inspiration for my wordmark design. With my numerous identities, my most scattered personality is that of a cute but chaotic person.

Fig 2.2 Mood Board, Week 5 (16/05/2025).Jpeg

Sketches

I started to develop some sketches. As I mentioned, my personality is cute and also chaotic, so for the letter "MKAN," I gave a bubbly impression, while for the letter "I," I gave a chaotic impression, using elements that depict chaos, such as lightning and zigzags.

Fig 2.3 Sketches, Week 5 (18/05/2025)

Digitization

I started digitizing my sketches. I used the pen tool and shapes to get a bubbly shape. I did all the letters first to see whether anything needed to be changed or not.

The following is the first digitization that I made temporarily:

Fig 2.4 First Digitization, Week 5 (22/05/2025)

During digitization I did more variations so I could see the final result. After doing many digitization attempts, I finally chose attempt 3 because I think the keyword reflects cute and chaos.

During the consultation session, Mr. Vinod said that my work was interesting, but there were some letters that needed to be refined again. He also said that the letter "I" should not be made sharp but made to scribble to reflect chaos even more.

Fig 2.4 Attempts Of Digitization, Week 5 (22/05/2025)

I started to refine the letter "MKAN" and also made the letter "I" more scribbly. I did some trial & error for the letter "I." Finally, I was able to make the letter "I" suitable for my final keyword.

Fig 2.5 Refining Process, Week 6 (27/05/2025)

Fig 2.6 Final digitized key artwork, Week 6 (27/05/2025).Jpeg

Fig 2.7 Final digitized key artwork On Class Submission, Week 6 (27/05/2025).Jpeg

Color Application

For my keyword color palette, I used the Adobe Color website to find color combinations that fit the theme. After selecting a few color palettes, I put them all together and compared how they looked when applied to my wordmark.

Fig 2.8 Color Application Testing, Week 6 (27/05/2025)

During the consultation session, Mr. Vinod mentioned that we need complementary colors, bright colors, dark colors, and neutrals. He said that some of my colors have not yet adjusted to the color requirements, so he prefers the first color palette.

Fig 2.9 Choosen Color Palette, Week 6 (27/05/2025).Jpeg

TASK 2A FINAL OUTCOME

Fig 2.10 Black wordmark on white background, Week 6 (27/05/2025).Jpeg

Fig 2.11 White wordmark on black background, Week 6 (27/05/2025).Jpeg

Fig 2.12 Choosen Color Palette, Week 6 (27/05/2025).Jpeg

Fig 2.13 Actual colour on ligthest shade, Week 6 (27/05/2025).Jpeg

Fig 2.14 Ligthest colour on darkest shade, Week 6 (27/05/2025).Jpeg

Fig 2.15 Actual colour Key Artwork, Week 6 (27/05/2025).Jpeg

Fig 2.16 Task 2A PDF Compilation, Week 6 (28/05/2025).PDF

Task 2(B) – Collateral

In the second task, we were asked to explore more deeply the keywords that we had created. The first task was to create collateral and mock-ups using the keywords that had been created; the total collateral was 9. Before I did the collateral, I looked for references for mock-ups.

Reference

Fig 3.1 References, Week 7 (03/06/2025)

Collateral Mock Up

To do a mock-up, the first thing I do is arrange the collateal. I use Adobe Illustrator to do the collateral. After that, I do research for the mock up, because my brand icon is cute and chaotic, I chose several items that represent that. I choose a hair clip, a tote bag, and also a drinking bottle.

For the tools that I used, I used the mock up tool (beta) and also the brush tool to help design the brand mock up. After that I did trial and error on the mock ups of the items. Some of the mock up used procreate only to changed the design of the background.

Fig 3.2 Collateral Mock Up Process, Week 7 (03/06/2025)

Mock Up 1# Hair Clip

I started designing my hair clip mockup. After finding the hair clip model, I did some experiments. My idea was to take the letter "I," scribble it, and put it on the hair clip so that it gives the impression of "I" chaos, as in "I am chaos ). Then Mr. Vinod said the hair clip design looks boring, he said put "Mikan" in on of the clips, so i changes it.

Fig 3.3 Hair Clip Mock Up Process, Week 7 (03/06/2025)

Fig 3.4 Revision Hair Clip Mock Up Process, Week 8 (10/06/2025)

Fig 3.5 Hair Clip Mock Up Collateral #1, Week 7 (03/06/2025).Jpeg

Fig 3.6 Revision Hair Clip Mock Up Collateral #1, Week 8 (10/06/2025).Jpeg

Mock Up 2# Water Bottle

Next comes the water bottle. I used a plain water bottle for the water bottle, and I designed it with the key artwork "Mikan" and a scribble drawing.

Fig 3.7 Water Bottle Mock Up Process, Week 7 (03/06/2025)

Fig 3.8 Water Bottle Mock Up Collateral #2, Week 7 (03/06/2025).Jpeg

Mock Up 3# Tote Bag

The final one is a tote bag, for tote bag design. Initially, the design was modeled after a bottled water design, but when Mr. Vinod saw the pattern, he proposed utilizing it for the tote bag. He appreciated the tote bag and pattern design.

Fig 3.9 Tote Bag Mock Up Process, Week 7 (03/06/2025)

Fig 3.10 Tote Bag Mock Up Collateral #3, Week 7 (03/06/2025).Jpeg

Self Potrait

Next, I continued by making a black and white self-portrait. For this, I took inspiration from a song album. I also did not forget to insert my pattern into the self-portrait.

Fig 3.11 Process Of Self Potrait, Week 7 (03/06/2025)

Fig 3.12 Final Self Potrait, Week 7 (03/06/2025).Jpeg

Collateral Pattern

First, I started with the pattern creation. Initially, the idea of the pattern was the keyword "Mikan" placed on the artboard; then, under the letter "I," there was a scribble line drawn down to the bottom of the artboard. Mr.Vinod accepted the idea, but he suggested that the key artwork "Mikan" be in the middle, and around it there was a scribbled line, making it even more chaotic.

Hearing the suggestion, I immediately executed the design; when I showed it again to Mr. Vinod, he said that it would be better if the mikan was erased and the line was connected to form 1 scribble line pattern.

Fig 3.13 Pattern expansion, Week 7 (03/06/2025)

Fig 3.14 Final Pattern expansion, Week 7 (03/06/2025).Jpeg

Instagram Feed Collateral

Next, I started designing the layout of the Instagram collateral feed. I was quite confused in arranging the layout.

Making a collateral layout is not easy but not difficult either; when arranging it, I got various inputs. After doing several experiments, I finally made two versions of the collateral layout that I liked for my Instagram.

Fig 3.15 Instagram Layout, Week 7 (03/06/2025)

Adjustment Instagram 2

I received feedback that the collateral "I" should be changed because it doesn't match the other collateral. He said it was too noisy compared to my other layout. So I changed the collateral to the words "Cute & Chaos" with scribbles on the O and e.

Fig 3.16 Refining Collateral , Week 8 (10/06/2025)

Fig 3.17 Final Refining Collateral , Week 8 (10/06/2025).Jpeg

Below is my finalized version of the Instagram feed layout:

Fig 3.18 Instagram Feed Design Layout, Week 8 (10/06/2024).Jpeg

Key Artwork Animation

I used After Effects for the animation because my main key points are "I." I animated my "I" using opacity, wiggle, and the line scribble that appears. So this is the final result:

Fig 4.1 Animatoion Process, Week 8 (10/06/2025)

Fig 4.2 Final Animatoion, Week 8 (10/06/2025).GIF

TASK 2B FINAL OUTCOME

Fig 5.1 Mock Up Hair Clip Collateral #1, Week 8 (10/06/2024).Jpeg

Fig 5.2 Mock Up Water Bottle Collateral #2, Week 8 (10/06/2024).Jpeg

Fig 5.3 Mock Up Tote Bag Collateral #3, Week 8 (10/06/2024).Jpeg

Fig 5.3 Key Artwork Animation, Week 8 (10/06/2024).GIF

Fig 5.4 Instagram Feed Design Layout, Week 8 (10/06/2024).Jpeg

Instagram link: https://www.instagram.com/mikan._monogram/

Fig 5.5 Screenshot of Instagram page, Week 8 (10/06/2025)

Fig 5.6 Task 2B PDF Compilation, Week 8 (10/06/2024).PDF

Task 2 Outcome Compilation

Fig 6.1 Black wordmark on white background, Week 6 (27/05/2025).Jpeg

Fig 6.2 White wordmark on black background, Week 6 (27/05/2025).Jpeg

Fig 6.3 Chosen Color Palette, Week 6 (27/05/2025).Jpeg

Fig 6.4 Actual colour on ligthest shade, Week 6 (27/05/2025).Jpeg

Fig 6.5 Ligthest colour on darkest shade, Week 6 (27/05/2025).Jpeg

Fig 6.6 Actual colour Key Artwork, Week 6 (27/05/2025).Jpeg

Fig 6.7 Task 2A PDF Compilation, Week 6 (28/05/2025).PDF

Fig 6.8 Mock Up Hair Clip Collateral #1, Week 8 (10/06/2024).Jpeg

Fig 6.9 Mock Up Water Bottle Collateral #2, Week 8 (10/06/2024).Jpeg

Fig 6.10 Mock Up Tote Bag Collateral #3, Week 8 (10/06/2024).Jpeg

Fig 6.11 Key Artwork Animation, Week 8 (10/06/2024).GIF

Fig 6.12 Instagram Feed Design Layout, Week 8 (10/06/2024).Jpeg

Instagram link: https://www.instagram.com/mikan._monogram/

Fig 6.13 Screenshot of Instagram page, Week 8 (10/06/2025)

Fig 6.14 Task 2B PDF Compilation, Week 8 (10/06/2025).PDF

FEEDBACK

Week 5

General Feedback :

For this week Mr. Vinod said about the importance of creating a wordmark that reflects our brand and personality, helping clients easily recognize us. For Week 6, we should focus on finalizing the wordmark and choosing a balanced color scheme with dark, middle, and light tones for visual harmony.

Specific Feedback :

He mentioned that my wordmark needs better readability and that some sketches don’t clearly represent the themes of 'cute' and 'chaos.' However, he’s okay with sketches 1 and 2, so I’ll focus on refining those to better align with the concept and improve clarity.

Week 6

General Feedback :

Mr. Vinod reminded us to upload our final logo along with a smaller version. He emphasized choosing a color scheme with dark, medium, and light tones that have good contrast. Next week, we’ll begin working on the collateral, so it's important to finalize the wordmark and color scheme.

Specific Feedback :

He said that my wordmark is interesting and has potential, but the letter 'I' needs to appear more random to match the intended concept. He also mentioned that the other letters still need refinement to improve consistency and better reflect the overall theme of the design.

Week 7 General Feedback: Mr. Vinod spoke to us about the importance of using patterns in our design. He explained that patterns can be created using single letters from our wordmark. He also emphasized that incorporating contrast is essential for enhancing the visual impact and overall quality of our work.

Specific Feedback :

Mr. Vinod said that my mockup is already good and looks nice, but he pointed out that my pattern needs improvement. He suggested making the pattern more scribbly and adding more elements to make it fuller and more dynamic.

WEEK 8 : General Feedback :

Develop a cohesive visual identity by seamlessly integrating the logo into the core pattern system without introducing unrelated elements; design at least three consistent brand collaterals—such as a poster, packaging, and social media asset—and ensure the animation emphasizes expressive letterforms, maintaining a strong typographic focus as you proceed to Task 3.

Specific Feedback :

Mr. Vinod mentioned that the color scheme of the collaterals is strong and well-executed. However, some mockups—such as the hair clip design—need refinement to better align with the overall visual direction. For the animation, he emphasized that the letter “I” should be more animated, as it serves as a key focal point in the identity.

REFLECTION

Experience I found Task Two to be both a fun and stressful experience in this module. I really enjoyed merging my own design style with a meaningful identity concept. This task gave me the opportunity to explore various creative software tools, such as Illustrator and After Effects, which not only enhanced my technical skills but also allowed me to discover new tools. However, I struggled immensely with coming up with the key artwork idea and with animating in After Effects. The biggest challenge washaving too many ideas that I wanted to use, which made it difficult to choose the best one. Overall, this task helped me learn more about myself and taught me the importance of research in the process.

Observations Throughout Task 2, I spent time researching various brand logos and studying how they visually communicate personality through icon design. This research helped me understand how elements like shape, form, and simplicity are used to reflect a brand's core identity. By analyzing different logo systems, I was able to see how subtle design choices convey specific traits—such as playfulness, elegance, or chaos—which helped guide my own design process. Translating personality into an icon became a key focus for me, and this step allowed me to evaluate and refine my work more effectively to ensure it aligned with the intended brand message.

Findings

I discovered through this project that branding is simply effective visual communication. I usually focus on what is visually appealing to me, not whether the main artwork is a strong representation of the brand identity. Coming from a fine art background, it was difficult for me to find the balance between creativity and clarity in this assignment. It was a reminder that the main artwork is meant to be understood by the viewer as well as meaningful.

Fonts & Settings:

Sabon – 9/12
Baskerville – 9/12
Bodoni – 9.5/12
Clarendon – 8/12
Gill Sans – 9/12
Helvetica – 8/12
Futura – 8.5/12

Each entry emphasizes that typography is not about fonts alone but how they are used, similar to how architects use materials like glass and steel.

Classification Note:

On the right side, the page includes a recurring statement: “Selecting type with wit and wisdom requires knowledge of how and why letterforms evolved.”

Fig 11.3 Big Typeface Families, Week 6 (P.P 47)

Big Typeface Families

Interstate (Tobias Frere-Jones, 1993): A versatile sans-serif family with multiple weights (Light to Black) and widths (Compressed to Condensed). Ideal for signage and display.
Univers (Adrian Frutiger, 1957): A complete type system with 21 versions across 5 weights and 5 widths. Designed as a unified family from the start.
Scala & Scala Sans (Martin Majoor): A serif and sans-serif pair designed to work together. Includes italics, small caps, non-lining numerals, and display variants like Scala Jewel.
Insight: Modern type families go beyond basic styles, often including wide ranges of weights, widths, serif/sans versions, and typographic features for greater design flexibility.

Fig 11.3 Castaways typeface, Week 7 (P.P 49)

The Castaways typeface, designed by Ken Barber in 2001, was inspired by hand-lettered signs found in Las Vegas. It was developed under the art direction of Andy Cruz and engineered by Rich Roat for House Industries.

The font captures a playful, retro aesthetic with roots in commercial signage, combining hand-drawn charm with digital precision. This work highlights the evolving process of type design—from traditional methods to digital production—and reflects the complexity and refinement involved even in modern type creation.

Search This Blog

Valenz Jycee Primadi (0373407)