ADVANCED TYPOGRAPHY : TASK 2 KEY ARTWORK & COLLATERAL

Carl Dair adds a two more principles into the mix; texture and direction. Dair posits 7 kinds of contrast (most of which has already been covered by Rudi Reugg using different terms) :

Fig 1.5.2: Dair's Seven Typographical Contrast-images, Week 4 (14/05/2025).

1. Size
Provides a point to which the reader's attention is drawn. For example if you have a big letter and a small letter you will obviously see the big letter first before the small. The most common use of size is in making a title or heading noticeably bigger than the body text.

2. Weight

Describes how bold type can stand out in the middle of lighter type of the same style. Provide a "heavy area" for a powerful point of visual attraction or emphasis.

3. 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 under the contrast of form.

4. Structure

Structure means different letterforms of different kinds of typefaces. For example, a monoline sans serif and a traditional serif, or an italic and a blackletter.

5. Texture
By putting together the contrasts of size, weight, form, and structure, and applying them to a block of text on a page, you come to the contrast of texture. Texture refers to the way the lines of type look as a whole up close and from a distance.

6. Direction
The opposition between vertical and horizontal, and the angles in between. Turning one word on its side can have a dramatic effect on a layout. Text blocks also have their vertical or horizontal aspects of direction.

7. Colour
The use of color is suggested that a second color is often less emphatic in values than plain black on white. Therefore it is important to give thought to which element needs to be emphasized and to pay attention to the tonal values of the colors that are used.

Form

Greek words "typos" (form) and "graphis" (writing), typography means to write in accordance with form.

Typography can be seen as having two functions:

to represent a concept
to do so in a visual form.

Organisation / Gestalt.
Gestalt --> german word meaning the way a thing has been "placed" or "put together".

Gestalt theory : the whole of anything is greater than its parts, believed that you must look at the whole of experience.

Perceptual Organisation / Groupings

Fig 1.5.3: Example for similarly and proximity, Week 4 (14/05/2025).

Law of Similarity : elements that are similar to each other tend to be perceived as a unified group. Similarity can refer to any number of features, including color, orientation, size, or indeed motion.

Law of Proximity : items close to each other tend to be grouped together, whereas items further apart are less likely to be grouped together.

Fig 1.5.4: Example of closure and continuation, Week 4 (14/05/2025).

Law of Closure : refers to the mind's tendency to see complete figures or forms even if a picture is incomplete

Law of Continuation : humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect.

Law of Symmetry : the mind perceives objects as being symmetrical and forming around a center point.

Law of Simplicity (Praganz) : how human process visual information that are simple, organized and

stable.

Back to T.O.C

2. Instruction

Document 2.1 : Module Information Booklet for Advanced Typography.

3. Task 2A

This task required us to make a wordmark from our name/pseudonym that represent our identity.

3.1 Research

To begin with, I made myself a mind map, to guide the process of making the wordmark. With this mind map I can identify my design goals and achieve the aesthetic that suit me the most.

Fig 3.1.1: Mind map About me, Week 4 (15/05/2025).

Back to T.O.C

3.2 Ideation

Mood Board

After I made the mind map, I take out some key point to begin my mood board, and try to search references based on what suits me the most.

Fig 3.2.1: Mood Board, Week 4 (15/05/2025).

Sketches

After I compile my references, I start exploring and made some sketches.

Fig 3.2.2: Sketches progress, Week 4 (15/05/2025).

Digital Exploration

Among all of my sketches, I choose the first and the fourth to digitize.

Fig 3.2.3: Digital attempt #1, Week 4 (15/05/2025).

Fig 3.2.4: Digital exploration #1, Week 4 (15/05/2025).

After Week 5 feedback, I try to redo my references and idea. I take out another keyword in my mind map and choose Neat, Bold, Playful and Flexible.

Fig 3.2.5: Sketch exploration, Week 5 (23/05/2025).

Fig 3.2.6: Digital attempt #2, Week 5 (23/05/2025).

Fig 3.2.7: Digital exploration #2, Week 5 (23/05/2025).

I refined the word to make it neater, while softening the overall look by rounding the edges to avoid a tense appearance. To add a playful and flexible feel, I varied the letter heights–making some letters longer or shorter than others.

After week 6 feedback, I need to adjust little things for the edges and the counter space.

Fig 3.2.8: Fixed letters, Week 6 (29/05/2025)

Fig 3.2.9: Final WordMark design, Week 6 (29/05/2025).

Color exploration

Because I like pink and matcha I decided to use green and pink as the base color for my palette.

Fig 3.2.10: Color exploration, Week 5 (23/05/2025).

Fig 3.2.11: Final color palette, Week 5 (23/05/2025).

Animation

To start with, I went back to my keyword, "flexible." I gathered some references and decided to stretch out the word to make it look flexible, so that each letter would resemble the others when it’s distorted.

Fig 3.2.9: Animation Reference, Week 6 (01/06/2025).

(Source: https://pin.it/2BxQzJ2vw).

Fig 3.2.10: Animation Progress, Week 6 (01/06/2025).

Fig 3.2.11: Final Animation (GIF), Week 6 (01/06/2025).

Back to T.O.C

3.3 Final Outcome

Fig 3.3.1: Black Wordmark on white background, Week 6 (29/05/2025).

Fig 3.3.2: White Wordmark on black background, Week 6 (29/05/2025).

Fig 3.3.3: Color Palette, Week 6 (29/05/2025).

Fig 3.3.4: Wordmark in actual colors on lightest shade of color palette, Week 6 (29/05/2025).

Fig 3.3.4: Wordmark in lightest shade of color palette on darkest shade of color palette, Week 6 (29/05/2025).

Fig 3.3.5: Wordmark animation, Week 6 (01/06/2025).

Fig 3.3.6: Final Compilation Wordmark (PDF), Week 6 (29/05/2025).

Back to T.O.C

4. Task 2B

Using the wordmark we created, we will select three collateral items and design our instagram layout accordingly.

4.1 Research

For the items, I chose things that I use daily, such as a phone case, t-shirt, and notepad. After searching for several mockup, I found mockups from https://mrmockup.com/free-three-iphone-cases-mockup/ for the phone case and searching the t-shirt and notebook from pexel.com.

Fig 4.1.1: The mockups, Week 6 (31/05/2025).

Back to T.O.C
4.2 Ideation

To create a playful design, I made the wordmark scramble around in different sizes. I also created a logo or name for the Instagram account: "AD by made" I used "AD" because it stands for advertising and also rhymes with my name.

Fig 4.2.1: Variations of design, Week 6 (31/05/2025).

#1 Phone Case

Using the mockup from a website, I changed the color and the design to fit my theme. I'm using Adobe Photoshop to edit the mockup.

Fig 4.2.2: Phone case layout design, Week 6 (31/05/2025).

Fig 4.2.3: Phone case mockup progress, Week 6 (31/05/2025).

Fig 4.2.4: Collateral #1 Phone case, Week 6 (31/05/2025).

#2 Tshirt

I used the layout design with the scrambled word and placed it on a T-shirt. I changed the color of the T-shirt and the background to match my color palette.

Fig 4.2.5: T-shirt mockup progress, Week 6 (31/05/2025).

Fig 4.2.6: Collateral #2 T-shirt, Week 6 (31/05/2025).

#3 Notebook

For the notebook, I created a design variation where my wordmark is aligned in a single line. I also added "AD by MADE" to create a brand name.

Fig 4.2.7: Notebook mockup progress, Week 7 (02/06/2025).

Fig 4.2.8: Collateral #3 Notebook, Week 7 (02/06/2025).

IG layout

For the layout, we needed to create a self-portrait design using a black and white photo. This was followed by three collateral items: one color palette and two additional designs.

First I added three collateral in the layout. Then I made the self portrait.

Fig 4.2.9: Layout progress #1, Week 7 (03/06/2025).

Fig 4.2.10: Self portrait progress #1 (Photoshop), Week 7 (03/06/2025).

I cropped my photo and turned it black and white using Photoshop. After that I exported it to illustrator to start the design.

Fig 4.2.11: Self portrait progress #2 (Illustrator), Week 7 (03/06/2025).

I added a background using the lightest color from my palette and included design elements. I also created new variations of the wordmark to include in my self-portrait.

I included the color palette along with the color codes, and added my two wordmarks in different colors one in green and the other in pink.

Fig 4.2.12: Layout progress #2, Week 7 (03/06/2025).

For the pattern exploration, I decided to use the letters A and D from my wordmark. Their shapes form a distinctive element that becomes part of my brand identity for the collateral.

Fig 4.2.13: Layout progress #3, Week 7 (03/06/2025).

Below is the finalized layout for the instagram:

Fig 4.2.14: Final Layout, Week 7 (03/06/2025).

Back to T.O.C
4.3 Final Outcome

Fig 4.3.1: Collateral 1, Week 7 (04/06/2025).

Fig 4.3.2: Collateral 2, Week 7 (04/06/2025).

Fig 4.3.3: Collateral 3, Week 7 (04/06/2025).

Instagram link: https://www.instagram.com/adbymade/

Fig 4.3.4: Instagram feed layout, Week 7 (04/06/2025).

Fig 4.3.4: Screenshot of Instagram Page, Week 8 (11/06/2025).

Fig 4.3.5: Task 2b Compilation (PDF), Week 8 (11/06/2025).

note: I already try compress it and make the pixel lower but somehow some of the pages still can't be seen or error.

Back to T.O.C

5. Task 2 Compilation

Fig 5.1: Black Wordmark on white background, Week 6 (29/05/2025).

Fig 5.2: White Wordmark on black background, Week 6 (29/05/2025).

Fig 5.3: Color Palette, Week 6 (29/05/2025).

Fig 5.4: Wordmark in actual colors on lightest shade of color palette, Week 6 (29/05/2025).

Fig 5.5: Wordmark in lightest shade of color palette on darkest shade of color palette, Week 6 (29/05/2025).

Fig 5.6: Wordmark animation, Week 6 (01/06/2025).

Fig 5.7: Final Compilation Wordmark (PDF), Week 6 (29/05/2025).

Fig 5.8: Collateral 1, Week 7 (04/06/2025).

Fig 5.9: Collateral 2, Week 7 (04/06/2025).

Fig 5.10: Collateral 3, Week 7 (04/06/2025).

Fig 5.11: Instagram tile in Illustrator, Week 7 (04/06/2025).

Instagram link: https://www.instagram.com/adbymade/

Fig 5.12: Screenshot of Instagram Page, Week 8 (11/06/2025).

Fig 5.13: Task 2b Compilation (PDF), Week 8 (11/06/2025).

note: I already try compress it and make the pixel lower but somehow some of the pages still can't be seen or error.

Back to T.O.C

6. Feedback

Week 5

General Feedback : Word mark can be seen in two, specifically describing you, or just something that you like and it doesn’t matter if anyone doesn't like it. Word mark is good because it is timeless, even though it is simple but there’s an appeal for it. Separate the personal like or commercially viable for word mark.

Specific Feedback : The references are good and Mr. Vinod can see it in my word mark. He didn’t see so much going on. Don’t use individual alphabet as the reference. Some of the references look like poster, there’s no balance. I need to explore more because right now, it's not quite there yet.

Week 6

General Feedback : Use one keyword that can represent the overall word mark

Specific Feedback : Make a similar counter space for all letter and make the edges all in the same radius and more neat.

Week 7

General Feedback : Expand the design more to create varieties.

Specific Feedback : Mr. Vinod said my layout already good.

Week 8

General Feedback : Foreground always have the important part, so if you display a pattern, don't make it the main foreground except if u want it to be.

Specific Feedback : Mr. Vinod said all good and keep up the good work.

Back to T.O.C

7. Reflection

Experiences

This task was fun because I got to explore a lot while creating my wordmark. I was able to explore my brand identity and express myself through the design. The work required a lot of creative thinking, but I managed to finish it. This was probably the most challenging task so far, yet also the most enjoyable.

Observations

Just like in Task 1, I learned a lot while receiving feedback from Mr. Vinod. I think his feedback really improved our work.

Findings

I learned how to create a brand identity that is actually selling, especially in the design industry. Creating a wordmark isn't just about personal preference–it also needs to be appealing and supported by a strong explanation to make it effective.

Back to T.O.C

8. Further Reading

Fig 7.1: The Vignelli Canon by Massimo Vignelli, Week 7 (04/06/2025)

This book provides an insightful guide to graphic design, expressing the author's approach, which is known for its minimalism and structured style. This book is filled with Vignelli's own work, showing how he applies his principles to real-world projects—such as corporate identity, publication design, packaging, and more.

Fig 7.2: Visual Power in page 24, Week 7 (04/06/2025).

This page provides insight into how design must possess visual strength. Good design requires strong visuals—weak concepts, color, or texture are not acceptable. With visual power, design can communicate ideas clearly and convey creative strength and expression. In design, contrast, scale, and light are powerful tools. In 2D design, the combination of scale and bold elements creates dynamic visuals. On the other hand, 3D design uses different materials, textures, and lighting to enhance visual presence. Visual strength is an expression of intellectual elegance. Using delicate layout and materials can create a strong visual presence. In conclusion, visual power is crucial for effective communication.

Back to T.O.C

Search This Blog

Madeline Ordelia Tjahjadi (0376920)