Labels

Advanced Typography: Task 2 Key Artwork & Collateral

13/05/2025 - 17/06/2025 (Week 04 - Week 09)
Shema Goldie Angwen / 0372129
Advanced Typography
Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 2: Key Artwork & Collateral

WEEK 5 - LECTURE 5
Advanced Typography: Perception & Organization

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 in typography.

Carl Dair place 7 types of contrast:

1) Contrast of Size: Provides a point to which the reader’s attention is drawn (the big letter will be obviously seen first before the small), the most common use of size is in making a title or heading noticeably bigger than the body text.
2) Contrast of Weight: describes how bold type can stand out in the middle of lighter type of the same style. Other than using bold, using rules, spot, squares is also provide a “heavy area” for a powerful point of visual attraction or emphasis.
3) Contrast of Form: The 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) Contrast of Structure: The different letterforms of different kinds of typefaces.
5) Contrast of Texture: By putting together the contrasts of size, weight, form, and structure, and applying them to a block of text on a page.
6) Contrast of 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. Mixing wide blocks of long lines with tall columns of short line can also create a contrast.
7) Contrast of 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.
Figure 1.1: Seven Types of Contrast by Carl Dair,
source: Lecture Video Advanced Typography - Perception & Organization, Week 5 (23/05/2025)

Form
  • refers to the overall look and feel of the elements that make up the typographic composition
  • the part that plays a role in visual impact and first impressions.
Typography can be seen as having two functions:
  • to represent a concept 
  • to do so in a visual form
Displaying type as a form provides a sense of letterforms’ unique characteristics and abstract presentation.

Figure 1.2: Example of Great Combinations of Typographical Forms, 
source: Lecture Video Advanced Typography - Perception & Organization, Week 5 (23/05/2025)

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 a space.

Organisation / Gestalt
  • 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.
  • The Gestalt psychologists, especially Max Wertheimer, developed a number of “laws” that predict how perceptual grouping occurs under a variety of circumstances (Wertheimer, 1923/1938).
Gestalt: Perceptual Organisation / Groupings 
Law of Similarity: states that elements that are similar to each other tend to be perceived as a unified group
Law of Proximity: elements that are close together tend to be perceived as a unified group.
Law of Closure: the mind’s tendency to see complete figures or forms even if a picture is incomplete
Law of (Good) Continuation: humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect
Law of Symmetry
Law of Simplicity (Praganz)

INSTRUCTIONS


Task 2 (A) / Key Artwork (10% - Individual)

What is a Key Artwork? In the context of this task, the key artwork is a wordmark/lettering, but is also an artwork. As a wordmark/lettering it is used to identify a person but it is also used as an artwork that might adorn a lapel pin/T-shirt/poster (collateral). The key artwork can be disassembled into constituent shapes to form vibrant patterns that continue to maintain and expand its visual identity.

Use your first name or pseudonym

Explore and compose as many permutations and combinations of your name in the form of a wordmark/lettering. The final key artwork must be an elegant solution, well balanced and composed, not complicated or confusing that leads to a functional and communicable key artwork. This key artwork will subsequently be used in Task 2(B) collateral.

Task 2 (B) / Collateral (20% - Individual)

You are tasked to design a t-shirt, lapel pin, an animated key artwork and an Instagram account (or as instructed in class) transforming the key artwork into a brand. Students will work on the animated key artwork first and fine-tune the outcomes before going on to the and other collateral material: t-shirt, lapel pin and finally an Instagram account. The output must result from in-depth exploration and must communicate both visually and textually the desired message and mood set by the key artwork and its function.

Task 2A 'Key Artwork'

Visual Research

Figure 2.1: Visual Research , Week 4 (15/05/2025)

To start off, I did visual research, mostly using Pinterest.

Reference Sources
https://pin.it/5MDgadqfX

Then, I created a mind map about myself. After that, I began sketching all the ideas that came to mind.

Among the sketches, I decided to go with option #1. In the class, Mr.Vinod asked me about the keyword, and I mentioned "organized," "simple," and "elegant." He told me to focus on one, so I chose "elegant." Then, he mentioned that Option #1 doesn’t feel well-balanced, while Option #2 has a better sense of balance. While option #3 and #4 is not readable. After receiving the feedback, I explored further and focus more on the "elegance" keyword. 

I personally preferred the first option over the second one. So I revised the unbalanced "H" and made changes to the "S" before asking for feedback. The revised version is shown in Figure 2.2. He said that the current version of "S" is just okay, it follows current trends, but it could be simplified. He also suggested changing the "A" because he often sees that kind of form. He mentioned that the wordmark is fine, but personally, I feel that I haven’t succeeded in creating something truly memorable. I then asked him how to make something different, because to be honest, I’m feeling a bit desperate with this task. He told me to just think of this task as something fun and the idea will come naturally.

Figure 2.2: Second Attempt Sketch, Week 5 (20/05/2025)

Then, I continued to explore further and Figure 2.3 is my finalized sketch after the exploration. I decided to simplify the "S," experiment more with merging the "M" and "A," and added subtle twists, like the small curve from "H" to "E" and from "M" to "A." I decided to chose this as the final sketch because I feel it conveys a sense of elegance.

Figure 2.3: Final Sketch, Week 5 (20/05/2025)

Digitization

I then began digitizing my sketch, starting by creating a baseline as a guideline. After that, I traced the sketch in Adobe Illustrator. However, I made some adjustments along the way, as I felt certain parts were not proportional. I added a serif to the right leg of the "A" and refined the curve within the letter to improve its balance and overall appearance.

Figure 2.4: Digitization Process, Week 5 (22/05/2025)

Figure 2.5: Digitization - Initial Version, Week 5 (22/05/2025)

Then in class Mr Vinod stated that Figure 2.5 is good in terms of consistency. The curve in the H and A needs to be smoothening, but it is getting there. He likes the lower E part, he said it's excellent. The H and E are really good. The M and A are good too. But the construction of this crossbar is very poor. He told me to revise that. Then adjust the upper part of the S. Once you have done that, you are good to go, he said.

So, I decided to make some revisions. I smoothed the curves in the "H" and "E" as well as in the "M" and "A." I also revised the "A," making it a bit larger to achieve better visual balance. Additionally, I brought the "E" and "M" closer together and removed the excess curve extending from the right leg of the "A."

Figure 2.6: Digitization - Revised Version, Week 6 (27/05/2025)

Figure 2.7: Revising Process, Week 6 (27/05/2025)

Figure 2.8: The Differences, Week 6 (27/05/2025)

Task 2B 'Collateral'

For the wordmark expansion shown in Figure 3.2, I insert the word 'simplicity' to the design as it is aligns with the keyword I chose, which is 'elegance'. I chose 'simplicity' to represent 'elegance' as many designers believe that elegance is often found in simplicity. Then, to enhance the design, I incorporated a wave-like curve pattern taken from the curves found in the "H" to "E," and in the "M" to "A" in my wordmark. I then insert the word 'simplicity' to this pattern, to create the same flow. 

In class, Mr. Vinod gave feedback on my color palette in Figure 3.2 and Figure 3.3, saying that it's okay overall, but one of the colors needs to stand out more or "pop".

Figure 3.1: Choosing Color Scheme Process, Week 6 (27/05/2025)

Figure 3.2: First Attempt - Wordmark on Self Portrait along with Wordmark Expansion, 
Week 6 (27/05/2025)

Figure 3.3: First Attempt - Color Scheme, Week 6 (27/05/2025)

I then decided to revise the color scheme, focusing on selecting a color that stands out more. Figure 3.4 is the revised color scheme, along with the wordmark applied to the self-portrait and its expanded versions.

Figure 3.4: Second Attempt - Wordmark on Self Portrait along with Wordmark Expansion, 
Week 6 (31/05/2025)

Figure 3.5:  Second Attempt - Color Scheme, Week 6 (31/05/2025)

Then, we were instructed to expand our key artwork identity into our chosen collateral. The first thing I did was think about what best suits my keyword which is 'elegance'. Then I decided to go with a clothing theme and created mockups for safety pin badge, tote bag, and printed fabric.

For the safety pin badges shown in Figure 3.7, I chose a bright pink color from the fourth row of my color scheme, combined with the "simplicity" wave-curved text in soft pink, the lightest shade in my color scheme.

Figure 3.6 : The Process - Mock Up #1, Week 6 (31/05/2025)

Figure 3.7 : Safety Pin Badge - Mock Up #1, Week 6 (31/05/2025)

For the tote bag shown in Figure 3.9, I chose a dark brown color from the third row of my color scheme as the base color. I combined it with the the repeated "simplicity" wave-curved text that create a pattern, then I adjusted the opacity to very low so it appears subtle and doesn’t look too crowded. I then also paired this pattern with my wordmark, "Shema."

Figure 3.8 : The Process - Mock Up #2, Week 6 (31/05/2025)

Figure 3.9: Tote Bag - Mock Up #2, Week 6 (31/05/2025)

For the printed fabric shown in Figure 3.11, I also applied the repeated "simplicity" wave-curved text to create a pattern. I chose four colors from my color scheme to be used for the text color and the base fabric color.
Figure 3.10: The Process - Mock Up #3, Week 6 (31/05/2025)

Figure 3.11: Printed Fabric - Mock Up #3, Week 6 (31/05/2025)

I also planned out my Instagram design, considering creative ways to showcase my visual identity through collateral, as instructed. 

Figure 3.12: Instagram Grid Layout, Week 6 (31/05/2025)

In class, Mr. Vinod asked me about my satisfaction with my collateral, and I replied that it seemed just okay for me. He responded, “Then make it great.” After that, I made some changes, particularly to the self-portrait post and the color scheme. I adjust the brightness and contrast and added 3D styling to the pattern and text in Adobe Illustrator using the ‘3D and Materials’ > ‘Inflate’ feature. I also revised the bottom-right post, the yellow background, changing the color to dark brown only and slightly adjusting the size. 

I also updated my post format from 1080 × 1080 px to 1080 × 1350 px to match Instagram's new layout.

Figure 3.13: Second Attempt - Wordmark Expansion, Week 7 (03/06/2025)

Figure 3.14: Second Attempt - Wordmark Expansion, Week 7 (03/06/2025)

Figure 3.15: Second Attempt - Wordmark Expansion, Week 7 (03/06/2025)

Figure 3.16: Planning Instagram Layout, Week 7 (03/06/2025)

The following week in class, Mr. Vinod gave feedback and said my work was just a basic expansion, so I decided to explore further. 

Figure 3.17: Exploration Process, Week 8 (12/06/2025)

For the first one, I decided to duplicate my wordmark and create a fading effect by gradually decreasing the opacity, the lower it goes, the more transparent it becomes. Then, I added patterns to the upper left and bottom right corners. I created these patterns from the curves from my design, varying their size and arrangement to make it visual appealing.

Figure 3.18: Third Attempt - Wordmark Expansion, Week 8 (12/06/2025)

For the next design, I experimented by taking the letter 'S' from my wordmark, flipping it horizontally, and repeating it to form a circular formation. I then connected these circular shapes with my wordmark and combined them with a BnW portrait of myself to create a connecting layout. To add variation, I also applied the same pattern to my hair in the BnW self portrait.

Figure 3.19: Third Attempt - Wordmark Expansion, Week 8 (12/06/2025)

Next, I decided to modify my previous collateral mockups. I replaced the safety pin badge with a box packaging design, as I felt the badge was too mainstream and lacked visual appeal.

For the front of the box, I duplicated my wordmark and applied a fading effect by gradually decreasing the opacity, the lower it goes, the more transparent it becomes. For the paper inserted inside the packaging, I took inspiration from the Cartier project featured on the Pentagram website, which is shown in Figure 3.21. On the side of the box, I used a pattern taken from the curve of my wordmark, duplicate it with variations in size and placement. I also then added my wordmark below the box packaging.

After finishing the design, I felt the background was too plain, so I added a circular pattern made from repeated letter 'S' that previously also used in an earlier design, and placed it behind the box to enhance visual interest.

Figure 3.20: Exploring Process - Mock Up #1, Week 8 (12/06/2025)

Figure 3.21: Reference, Source: https://www.pentagram.com/work/cartier, Week 8 (12/06/2025)

Figure 3.22: The Result - Mock Up #1, Week 8 (12/06/2025)

For the tote bag, I kept the previous design but decided to add the circular pattern made from repeated letter 'S' shapes, along with my wordmark placed below the tote bag.

Figure 3.23: Exploring Process - Mock Up #2, Week 8 (12/06/2025)

Figure 3.24: The Result - Mock Up #2, Week 8 (12/06/2025)

For the printed fabric, I decided not to make any changes, just simply added my wordmark beneath it.

Figure 3.25: Exploring Process - Mock Up #3, Week 8 (12/06/2025)

Figure 3.26: The Result - Mock Up #3, Week 8 (12/06/2025)

Then, I moved on to planning the layout for the Instagram grid.

Figure 3.27: The Result - Instagram Grid Layout, Week 8 (12/06/2025)

For the animation, I used Adobe After Effects software, adjusting the opacity and the curve of each letter.
Figure 3.28: Animation Process - Adobe After Effects, Week 8 (12/06/2025)

Figure 3.29: The Result - Animation, Week 8 (12/06/2025)


Final Outcome of Task 2

Task 2A 'Key Artwork'

Figure 4.1: Black Wordmark on White Background JPEG, Week 6 (27/05/2025)

Figure 4.2: White Wordmark on Black Background JPEG, Week 6 (27/05/2025)

Figure 4.3: Colour Palette JPEG, Week 6 (27/05/2025)

Figure 4.4:  Wordmark in Actual Colours on Lightest Shade of Colour Palette JPEG, Week 6 (27/05/2025)

Figure 4.5: Wordmark in Lightest Shade of Colour Palette on Darkest Shade of Colour Palette JPEG, 
Week 6 (27/05/2025)

Figure 4.6: Task 2A 'Key Artwork' PDF Compilation, Week 6 (27/05/2025)

Figure 4.7: Wordmark Animation (GIF), Week 8 (13/06/2025)

Task 2B 'Collateral'

Figure 5.1: Final Collateral Fabric, Week 8 (13/06/2025)

Figure 5.2: Final Collateral Box Packaging, Week 8 (13/06/2025)

Figure 5.3: Final Collateral Tote Bag, Week 8 (13/06/2025)

Figure 5.4: Instagram Feed Design Layout, Week 8 (13/06/2025)


Figure 5.5: Screenshot of Instagram Page, Week 8 (13/06/2025)

Figure 5.6: Task 2B 'Collateral' PDF Compilation, Week 8 (13/06/2025)

FEEDBACK

WEEK 5
General Feedback: 
The wordmark is about identity. Create something memorable, something signature that makes people instantly recognize it as yours.
Specific Feedback: He asked me about the keyword, and I mentioned "organized," "simple," and "elegant." He told me to focus on one, so I chose "elegant." Then, he mentioned that Option #1 doesn’t feel well-balanced, while Option #2 has a better sense of balance. After receiving the feedback, I explored further and focus more on the "elegance" keyword, and asked for feedback again. He said that the current version's "S" is just okay, it follows current trends, but it could be simplified. He also suggested changing the "A" because he often sees that kind of form. He mentioned that the wordmark is fine, but personally, I feel I haven’t succeeded in creating something truly memorable. I then asked him how to make something different, because to be honest, I’m feeling a bit desperate with this task. He told me to just think of this task as something fun and the idea will come naturally.

WEEK 6
General Feedback: Make sure your color palette includes complementary colors, contrast, light shades, and dark shades.
Specific Feedback: Good in terms of consistency. The curve in the H and A needs to be smoothening, but it is getting there. I like the lower E part, excellent. The H and E are really good. The M and A are good too. But the construction of this crossbar is very poor. I think you need to revise that. Then adjust the upper part of the S. Once you have done that, you are good to go. He also commented on my color palette, it's okay, but one color needs to be more pop up.

WEEK 7
General Feedback: Choose collateral that is relevant to you.
Specific Feedback: Mr. Vinod asked me, "Are you happy with your collateral?" I replied, "Just okay." He responded, "Then make it great.

WEEK 8
General Feedback: Provide at least three collateral expansions. Also, proceed to Task 3.
Specific Feedback: Basic expansion.

REFLECTION

Experience
To be honest, I initially felt overwhelmed because I wasn’t satisfied with my wordmark and struggled to create something visually appealing using my own name. I also felt under pressure, which made me rush the process and doubt my ability to come up with a fresh idea. Feeling stuck and a bit desperate, I talked to Mr. Vinod. He advised me to perceive the task as something fun and assured me that the idea would come naturally. After that, I stopped pressuring myself and simply explored whatever came to mind, and to my surprise, I started to really enjoy every part of this task.

Observations
I realized that a color scheme plays a crucial role in design. I usually gravitate toward earth tones and muted colors, and I tend to avoid bold or vibrant colors. However, I’ve learned that incorporating a pop of color can actually enhance the design, making it more visually appealing and eye-catching.

Findings
I found myself improving, and now I feel more confident in exploring new ideas. I’ve learned that by simply enjoying the process and not forcing myself, I’m better able to discover fresh and creative concepts.

FURTHER READING


Figure 6.1: I.D.E.A.S, Computer Typography Basics by David Creamer (2003), Week 8 (15/06/2025)

Fonts come in many different design:

1) Serif
  • Commonly used for headline fonts
  • "Serifs" are the little feet or arms that hang off the end of letter strokes
  • Come in 3 sub-categories: Oldstyle, Modern, and Square Serif Sans Serif
2) Sans Serif
  • Sans Serif fonts are "without serifs"
  • Usually have even stroke weight
  • Harder to read than Serif fonts
3) Mono-Spaced
  • Most fonts have proportional spacing
4) Display
  • Designed to catch viewer's attention for headline fonts
  • Should not be used as body copy fonts
5) Script
  • Designed to mimic handwriting
  • Should never be used in all capital letters
6) Text
  • Text fonts have an "Old-World" feel
  • Commonly used for certificates, diplomas, and invitations.
7) Dingbats
  • Symbol that are small pieces of art
  • Usually used in text or page


Labels:

Comments

Post a Comment

Popular Posts