Advance typography : Key Artwork & Collateral

 22.05.2024 - 5.06.2024 (Week 5-Week 7)

Ruthlene Chua Zhen Si 0365222 

Bachelor of Design (Honours) in Creative Media - Advanced Typography

Task 2

• Lecture
• Instruction
• Class Summary 
• Task 
• Task 2(A) / Key Artwork
• Task 2(B) / Key Artwork & Collateral
• Feedback
• Reflections
• Further reading  

---

LECTURE (SUMMARIES VIDEO) 

Week 5-22/05/2024: PreceptionAndOrganisation_AdTypo_5

Intro: 

Typography perception involves how readers visually navigate and interpret content through contrast, form, and organization. 

• The content can include: 
1. Text
2. Visuals
3. Graphics
4. Colors

• Contrast
• Several methods in typography create contrast, including those devised by Rudi Ruegg, which are shown on the left and are self-explanatory.
• The different uses of text in each example mentioned below create contrast.
• Why is it important to create contrast? 
• To create distinction or differentiation between information 
• Avoid reader has difficulty separating different types of information

Figure 0.a Different Contrast with letters 

• Contrast / Size
• Size contrast draws the reader's attention, with larger text being noticed before smaller text
• Titles or headings are typically made noticeably larger than the body text

Figure 1.a Contrast on size letter or wording

• Contrast / Weight
• Weight describes how bold type stands out among lighter type of the same style
• Besides bold text, using rules, spots, and squares can create "heavy areas" for strong visual emphasis

Figure 1.b Contrast in weight letter or wording

• Contrast / Form
• Contrast of form includes the distinction between a capital letter and its lowercase equivalent, as well as between a roman letter and its italic variant
• Condensed and expanded versions of a typeface also fall under contrast of form

Figure 1.c Contrast in the form of letter or wording

• Contrast / Structure
• Structure refers to the different letterforms of various typefaces
• Ex: Monoline sans serif compared to a traditional serif, or an italic compared to a blackletter

Figure 1.d Contrast the structure of the letter or wording

• Contrast / Texture 
• Combining contrasts of size, weight, form, and structure in a block of text creates texture
• Texture refers to How lines of type appear as a whole, both up close and from a distance, influenced by letterforms and their arrangement

Figure 1.e Contrast the texture of the letter or wording

• Contrast / Direction
• Contrast of direction involves the opposition between :
• vertical, horizontal, and angled elements
• Turning a word on its side can dramatically affect a layout, and mixing wide blocks of long lines with tall columns of short lines creates contrast

Figure 1.f Contrast the direction of the letter or wording

• Contrast / Color
• Using color suggests that a second color is typically less intense than plain black on white
• It's crucial to prioritize which element requires emphasis and to consider the tonal values of the chosen colors

Figure 1.g Contrast the color of the letter or wording

• Form
• "Form" in typography refers to the overall appearance and impression of the elements in the composition
• It significantly influences visual impact and initial perceptions
• Well-crafted form in typography captivates:
• The eye, guiding it smoothly across points and engaging the mind, often leaving a lasting impression

Figure 1.h Artwork that successfully make great adjustments to their forms

• Typography, originating from the Greek words "typos" (forms) and "graphis" (writing), means writing by form

• Typography can be seen as having two functions:
1. To represent a concept
2. To do so in visual form

• Displaying type as a form highlights the unique characteristics and abstract presentation of letterforms
• The interaction between meaning and form achieves a harmonious balance of function and expression.
• Viewing typefaces as forms alters their readability, as they undergo manipulation through distortion, texture, enlargement, and spatial extension.

Caution part: A designer should understand visual perception. This would apply to every aspect of design, including typography. 

• Gestalt
• A German term, that refers to how things are structured or organized
• Its Psychology aims to uncover the principles governing meaningful perception acquisition and retention
• The theory asserts that the whole is greater than the sum of its parts, emphasizing unified experiences
• In design, especially in typographic layouts, the overall visual form is crucial
• While individual elements may function well independently, their collective arrangement determines the overall impact and effectiveness of the design

• Organization/ Gestalt: Perceptual Organization/ Groupings:
1. Law of similarity: 
• Similar elements tend to be perceived as a unified group, where similarity can be based on color, orientation, size, or motion
2. Law of proximity: 
• The gestalt grouping law states that elements close together are perceived as a unified group, emphasizing proximity as a key factor in grouping, while items farther apart are less likely to be grouped together
3. Law of Closure: 
• Refers to the mind's tendency to perceive complete forms even when details are missing or obscured
4. Law of Continuation: 
• Humans tend to perceive two or more objects as distinct and singular even when they intersect, with their alignment playing a crucial role in this principle
5. Law of symmetry:
• Elements that are symmetrical to each other tend to be perceived as a unified group
6. Law of Simplicity (Praganz )

Figure 1.i Gestalt principles 

---

INSTRUCTION   

---

CLASS SUMMARY 

Week 5: This week, Mr. Vinod conducted an online meeting where he provided feedback on our presented idea sketches, digitized key artwork, and keywords. We were instructed to upload our work to Facebook and present the ongoing idea communication through wordmarks or lettering.

Week 6: Lectures are delivered, and we are required to commence our task 2B once we receive approval for 2A.

Week 7: Get task 2B feedback from Mr.Vinod, make adjustments to it, complete the e-portfolio, and be ready to submit. A briefing for Task 3 was given, started to prepare for Task 3.

---

Week 5

TASK 2A  : Key Artwork ( 25/05/2024  —— 29/05/2024）

For this particular assignment, we are required to create a key artwork using our first name or a pseudonym as a wordmark/lettering. Experiment with different designs and make sure the final design is elegant, balanced, and clear. This key artwork will be used in future tasks and should show our understanding of typographic principles from this semester.

At first, we are told to do a few sketches for this assignment, the more sketches the better. Therefore I made in total 7 sketches using my first name "chua", inspired by different items, emotions and personalities. 

1. I designed this sketch to reflect my straightforward and direct personality. To achieve this, I used minimal, simple strokes and incorporated a few clear bends in the curved parts of the letters, ensuring the design remained clean and uncomplicated.

Figure 1.0: Simple style of design 

2. This design expresses the feeling of being clueless, which reflects how I often feel, completely uninformed and without any clues about what is happening. The standout feature of this design is the dislocation of the words, creating a sense of chaos and confusion for the reader.

Figure 1.1: Clueless style of design 

3.This design draws inspiration from Greek fonts, incorporating an old-fashioned aesthetic into the typography. Greek fonts are known for their unique characters, distinctive glyphs, and specific typographic features not found in Latin fonts, such as the forms of letters like alpha (α) and beta (β). Through incorporating this uniqueness into the letters, I hope to communicate my own sense of self, though a little strange. However, this approach may reduce readability for readers.

Figure 1.2 : Greek style of design 

4.This design aims to depict my characteristic clumsiness. At times, I might move or handle things in a careless, awkward manner, often resulting in things being knocked over or broken. To visually express this trait, I structured the word to initially appear normal with the letters "C" and "H," but suddenly the letters "U" and "A" are displaced and fall down next to "H," conveying a sense of clumsiness and disorder in the design.

 

Figure 1.3: Clumsy style of design 

5. In this design, I aimed to evoke a sense of floating and twisting squirming, reflecting my personality of being weird and unpredictable. To convey this, I intentionally disrupted the alignments and varied the sizes and placements of the words, illustrating my inclination to stand out and diverge from the norm.

Figure 1.4: Weird and unpredictable style of design 

6. This design draws inspiration from the Pac-Man game and reflects my hobby and personality as a gamer, embodying qualities of accuracy, playfulness, and focus. The typography is styled in a futuristic and digital manner, featuring less smoothness and more of a mosaic pattern like the classic Pac-Man graphics. The use of square boxes creates shapes and patterns, adding a nostalgic touch while conveying a modern, digital aesthetic.

Figure 1.5: Gaming style of design 

7. In this final design, I intentionally created gaps within the letters, leaving parts missing and incomplete to evoke a sense of mystery and intrigue. This design element intentionally aims to raise suspicion and excite the audience's interest by being uncertain and fascinating. The words are intentionally written with empty spaces to highlight a mysterious and insightful visual aesthetic. 

Figure 1.6: Intrigue style of design 

From the feedback section for week 5, Mr. Vinod did mention that when creating our word mark, it's important to choose positive keywords that emphasize our strengths, not weaknesses. People prefer positive associations, so clarity and readability are essential in how we present ourselves. By focusing on our strengths and communicating clearly, we aim to create a strong, favorable impression that reflects our brand's identity and values.

Mr. Vinod suggested several designs for further improvement and changes, specifically highlighting the 1st, 5th, and 6th sketches that embody simple, unpredictable, and gaming design styles. Using an exclusion method, I considered feedback carefully and focused on areas where designs were successful and avoided cautionary aspects. Ultimately, I decided to refine and modify the 6th design, inspired by the Pac-Man game, integrating feedback to enhance its overall impact and appeal.

Changes and improvements are made below:

• Make some changes to the letter "A" like the ghost in the game , adding in some circle elements in the letter "H", modifying the words of the letter "C" making it, looks more like the "Pacman"
• Color pallets are applied to the keywords

Figure 1.7: Changes in the keyword and applied color

Week 6 ( 29/05/2024  —— 5/06/2024）

TASK 2A : Key Artwork _Arrangement on keyword color pallet and readability

For this particular week, the lecture warned against using decorative elements like word color without ensuring readability and clarity. It also emphasized the importance of originality and clear communication over following trends in feedback. Therefore, I made some changes in the class, these are the process of improvement and changes. 

1. First version: I showed the first version to Mr. Vinod. He said there is still a readability issue for the audience. The circle for the letter "H" is not necessary, it's a little bit too extra, too many elements in the wording. To solve this simply, he suggested aligning everything at the same level.

Figure 1.8: First version of making changes

2. Second version: After making changes directly in class, Mr. Vinod guided me to align all the gaps between the empty squares, creating a stable vacancy space. The current version wasn't planned correctly; the heights and widths must be uniform, and alignment in the middle is essential to ensure a clear and tidy visual appearance. 

Figure 1.9: Second version of making changes

3. Third version: All the alignments have been corrected, and the gaps between the white spaces in the letters are now uniform. I also made changes to the letter "U," incorporating empty spaces to create a design that partly hides and partly reveals the house from the "Pac-Man" game, enhancing the overall theme and connection to the game.

Figure 1.9: Third version of making changes

Figure 2.0: Printouts Version

• I chose a new color palette for my key artwork, incorporating dark blue, blue, yellow, grey, and lemon yellow. This palette provides contrasting colors to emphasize the design's prominence and enhance its visual impact. From the general feedback section, Mr. Vinod did emphasize the appearance should be better if we choose contrasting colors to show our keyword. 

Figure 2.1: Color Pallet

• This is what the design looks like in black and white, and in colors:
• Black and White Version: The design maintains its structure and clarity, with the alignment and gaps ensuring a tidy and visually balanced appearance. The adjustments to the letter "U" are clearly visible, showcasing the partly hidden and partly visible house from the "Pac-Man" game.

• Colored Version: The use of dark blue, blue, yellow, white, and lemon yellow adds vibrancy and emphasis to the design. The contrasting colors highlight the key elements and enhance the overall visual impact, making the design stand out prominently.

• Black wordmark on white background

Figure 2.2: Black ( Background) and White Version of  Color Design

• White wordmark on black background

Figure 2.3: White ( Background) and Black Version of  Color Design

• Color palette
1. #ECEDED
2. #FAE87F
3. #F9D54E
4. #1B4692
5. #1F2658

Figure 2.4: Color palette

Wordmark in actual colors on the lightest shade of the color palette

Figure 2.5: Grey ( Background) and Yellow Version of  Color Design

Wordmark in the lightest shade of color palette on darkest shade of the color palette

Figure 2.6: Dark Blue ( Background) and Grey Version of  Color Design

We are required to create a design featuring a representative symbol from our name design. I developed a pattern using repetition, emphasizing balance and consistent spacing between the letters and the patterns. One design focuses on the entire surname, while another highlights the game symbol, specifically the Pac-Man design for the letter "C", reaching a fun and gaming appearance. 

• Full surname: CHUA

Figure 2.7: Repetition Pattern (Full Surname)

• Surname first letter "C"

Figure 2.8: Repetition Design of the Letter "C" 

• We are required to create a wordmark animation using the keyword we have designed. Firstly, I used Adobe Illustrator to modify the wordmark, giving it the appearance of movement. This involves adjusting elements to simulate the motion, ensuring that the design remains engaging and dynamic.

Figure 2.9: Process of making animation on adobe illustrator 

• After exporting every single artboard from Adobe Illustrator, I import the artboard into Adobe Photoshop to make it into a gif. 

Figure 3.0: Process of making animation on adobe photoshop

• This is the animation's final outcome as a gif. 

Figure 3.1: Surname animation 

Week 7 ( 5/06/2024  —— 12/06/2024）

TASK 2B : Key Artwork & Collateral

• We are tasked with designing something like a t-shirt, lapel pin, animated key artwork, and an Instagram account to transform the key artwork into a brand. Start with the animated key artwork (800x1024 pixels, GIF format) and fine-tune it before creating the other materials. Use mock-ups to simulate printing, and print the collateral if instructed. The final output should result from in-depth exploration and effectively communicate the desired message and mood visually and textually across all materials.

In the feedback section, Mr. Vinod reminded us to choose more professional pictures by taking them against a white wall. He emphasized that the mockup items should be unique to attract the audience and draw their attention to the design and product. Therefore, I created a simple colored background to make the mockup items more prominent and plan to capture the audience's attention effectively. 

For the mockups, I chose to use items related to gaming equipment, such as a mouse pad, headset, and wireless computer mouse. These choices align well with the characteristics of the Pac-Man game, reinforcing the gaming theme of the design.

1.For the mockup, I used a mouse pad with a grey background. Strong colors were applied to the object to make it stand out, while the background features a light color to enhance contrast and draw attention to the design.

Figure 3.2: Mouse Pad

2.For the mockup with the headset, I used blue and yellow as the main colors. The pattern features the letter "C" and the Pac-Man symbol on the side of the headset, creating a cohesive and visually appealing design that highlights the gaming theme.

Figure 3.3 : Headset 

3.For the last mockup, I focused the patterns on the upper part of the mouse and placed a symbol at the bottom. This design ensures that the primary elements are easily visible and the overall look remains balanced and engaging.

Figure 3.4 : Wireless computer mouse

4.Here are the links to the Instagram profile of the product:

gink to Instagram profile : https://www.instagram.com/da_chua24?igsh=MXIzM-mp6aTdjMG51MA%3D%3D

Figure 3.5: Jump link to the Instagram profile

5. Profile overview, layout and appearance: 

Figure 3.6: Instagram Account

Task 2A Final Outcome: 

Figure 3.7:Black Wordmark with White Background

Figure 3.8:White Wordmark with Black Background

Figure 3.9:Color Palette

Figure 4.0 :Wordmark in actual color on lightest shade of color palette

Figure 4.1:Wordmark in the lightest shade of the color palette on the darkest shade of color palette

Figure 4.2: wordmark animation

Task 2B Final Outcome: 

Figure 4.3: Collateral of mousepad

Figure 4.4: Collateral of headset

Figure 4.5: Collateral of headset

Figure 4.6:Instagram Link

Figure 4.7:Instagram Screen Grab

The entire task final outcome submission in pdf format: 

Figure 4.8: PDF of TASK 2A and 2B

---

FEEDBACK

Week 5 - Feedback to ensure idea-sketches, digitized 'key artwork' & keywords

Specific Feedback: Make some improvements on the readability, you should create a logo that is required by whoever needs it, the Pacman gaming, simpler and also the unpredictable words can use some editing, and make space for improvements.

General Feedback:  Find and do more research about the key word, make something that the supplier would be interested on.      

Week 6 - Feedback for Task 2A

Specific Feedback:  Choose the right word color, not just apply to it. Readability is a must, still need to make adjustments to the wording.  

General Feedback:  You must be aware that readability is very important, don't just follow the trending element, and have more unique and more imaginative self thinking.      

Week 7 - Feedback for Task 2B

Specific Feedback: -

General Feedback: Choose more professional pictures by taking pictures from a white wall. The things that are needed to mockup must have the uniqueness to attract the audience, letting the viewers pay more attention to the design and the product.                   

---

FURTHER READING 

Figure a: Cover of the book 

The Role of Typography in Logo Design

The book "Everything There Is to Know About Logo Design" covers essential aspects of typography that can significantly boost my efforts in creating impactful keywords and collateral materials for this particular task (task 2a and 2b). 

• Why Typography Matters
• Typography is more than just picking a font
•  It's about choosing and arranging letters to form words that convey the right message.

•  The book stresses that the typeface we select can make or break your logo design. 
• How ? 
• The size, spacing, and style of the letters all play a crucial role in how your logo is perceived. 
• For example: a chunky serif font might make a brand feel traditional and reliable, while a sleek sans-serif font might give a modern and clean impression.

Types of Fonts: Serif vs. Sans Serif

• Understanding the difference between serif and sans-serif fonts is vital:

1.Serif Fonts: 

• These have little "feet" or lines at the ends of letters, giving them a classic and sophisticated look. 
• They are often used in printed materials to evoke a sense of tradition and reliability. 
• Such as: Think of fonts like Times New Roman and Garamond.

2.Sans Serif Fonts: 

• These lack the decorative ends, making them cleaner and often easier to read on screens. 
• They give a modern and straightforward feel. 
• Such as: Helvetica and Arial.

Figure b: Serif Font

Key Principles of Effective Typography

• To create compelling logos and collateral, the book suggests following these principles:

1. Balance: 
• Ensure your text isn’t too wide or too narrow. Proper width helps in maintaining readability.
2. Scalability: 
• Typography should look good at all sizes, from business cards to billboards.
3. Whitespace: 
• Use spacing effectively to create a clean and balanced design.
4. Consistency:
•  Keep typography consistent across all branding materials to reinforce brand identity.

Experimentation and Customization

• The book encourages designers to test different fonts and tweak them to create a unique look.

•  Custom fonts can set your brand apart and make your logo instantly recognizable. 

• For instance, the customized fonts used by brands like Coca-Cola and Twitter help them stand out.

Figure c: Importance of Color Pallet

Practical Tips

• Don’t overdo it with effects like shadows or gradients. Simplicity often works best.

• Aim for balance in your design elements, ensuring your logo is appealing and scalable.

• Be original. Avoid copying other logos and steer clear of generic stock art.

• By applying these insights, you can use typography to craft powerful keywords and create cohesive, eye-catching collateral that enhances your brand’s identity.

---

REFLECTIONS

Experience

This semester immersed me in the intricate world of typography and design. From learning about perception and organization to practical assignments like creating my wordmark, I explored the impact of contrast, form, and structure on visual communication. Each design choice—from minimalist to whimsical—reflected not just my skills but also my personality and creative journey.

Observation

I observed how principles like Gestalt laws influence cohesive visual design. Understanding elements like proximity and similarity helped refine my designs based on feedback, enhancing clarity and communicative power. Guidance from Mr. Vinod emphasized the balance between creativity and functionality, steering me toward a unique design identity.

Finding

Task 2B marked a transition to practical application, where I designed animated artwork and mockup items. This experience highlighted the importance of professionalism and audience engagement. Integrating gaming themes and meticulous color palettes in my designs showcased my commitment to visual impact and narrative coherence. In conclusion, this semester deepened my understanding of design’s role in effective communication. From mastering typographic nuances to crafting meaningful visuals, each experience has shaped me into a more skilled and strategic designer, poised to evolve creatively and professionally.