Advanced Typography - Task 2

20.09.2023 -  11.10.2023 (Week 4 - Week 7)

Sorcha Griselda / 0353056 

Advanced Typography / Bachelor of Design in Creative Media / Taylor's University

Task 2 (A): Key Artwork

Task 2 (B): Collateral

---

LECTURES

Week 5 | Perception and Organisation

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. 

+ Contrast

Fig 1.1 Types of typographical contrast proposed by Rudi Ruegg

• Rudi Ruegg
• Weight
• Bold type variants stand out above lighter ones.
• Rules, spot, squares also provide "heavy areas" for powerful points of visual attraction or emphasis.
• Form
• Capital vs Lowercase
• Roman vs Italic
• Condensed vs Expanded
• Structure
• Monoline Serif vs Traditional Serif
• Italic vs Blackletter
• Colour
• A second colour is often "less emphatic" in values than plain black on white.
• They drag attention away really effectively, and thus we have to give thought to which element to emphasize to keep the overall piece not too noisy. 
• Size
• Space (-ve/+ve)
• Carl Dair

Fig 1.2 Types of typographical contrast proposed by Carl Dair

• [Extends Rudi Ruegg's list]
• Texture
• Comes from combining all the previous methods.
• Refers to the way the lines of type look from a distance.
• Depends on both the letterforms themselves and how they are arranged.
• Direction
• Vertical vs Horizontal 
• Turning words or text blocks on their sides can have dramatic effects on layouts.
• Mixing wide blocks of long lines with tall columns of short lines can also create contrast.

+ Form
Refers to the overall look and feel of the elements that make up the typographic composition. The word 'Typography' is derived from the Greek words "typos" which means "forms" and "graphis" which means "writing". The interplay of meaning and form brings a balanced harmony both in terms of function and expression, enabling it to ascend from just 'characters' into more of a 'bitmap', which is something that can be distorted, textured, enlarged and others. Good form in typography includes:

• Visually intriguing
• Leads the eye from point to point
• Entertains the mind
• Memorable

+ Organization (Gestalt)

Fig 1.3 Gestalt Principles of Grouping

Typographic layouts containing individual components are only as good as its overall visual form makes it out to be:

• Similarity
• Proximity
• Closure
• Continuation
• Symmetry

---

INSTRUCTION

---

Task 2 (A): Key Artwork

During the third week of class, we were assigned to design a key artwork. It is used to identify a person, but it is also used as an artwork that might adorn a poster (collateral). For this assignment, we need to use our first name or pseudonym. 

Research

As I was not familiar with the term 'key artwork', I tried to look up for inspiration on Pinterest. At first, I tried searching by keying in 'key artwork' on the platform, but all I got were pictures of actual keys. So, I ended up keying in 'wordmarks' and 'monograms' instead, hoping to find that creative spark that I need.

Fig 2.1 Key Artwork Research | 20/09/2023

Ideation and Sketches

After getting some inspiration from the research that I did beforehand, I start to do my sketches, which I did digitally on Procreate.

Fig 2.2 Initial Digital Sketches | 19/09/2023

Honestly, I was not satisfied with any of my sketches, as I feel they do not represent me. However, I did like the curve shape on my second sketch (from the left-side). As the meaning of my name is shining/bright, I decided to portray that in my keyword. Thus, the idea is to create a smile-looking shape for my key artwork. 

Fig 2.3 Digital Sketches #1 & #2 | 20/09/2023

After knowing the structure and shape I want, I continued my digitization on the Illustrator. I came up with two ideas that I finally like and tried to compare the side by side:

• #1 Sketch: the typeface inspired 'Modak' as I love the sleek curve that it has, which somehow depicts me in someway as I am the type person who has a sleek personality. Then, I tried to create one using the pen tool and shape it in a smiling-shape.
• #2 Sketch: I started the sketches by using the shape on the Illustrator. However, one downside of this idea is that it does not portray the smiling-shape that I wanted to portray.

I also tried to ask my friends and get some feedbacks from Mr. Vinod. 

Process

Initially, I kicked things off by using the 'Modak' font as a starting point for my design. Then, I took a more hands-on approach by shaping and freehand drawing it on the Illustrator to get the design that I had in mind. 

Fig 2.4 Digitization Process #1 | 26/09/2023

But as I worked on it, I noticed the lines were not quite consistent, and the final result did not quite hit the mark for me. Mr. Vinod also mentioned that my key artwork was a bit tricky to read, so I went back, made some more tweaks, and adjusted things to improve it.

Fig 2.5 Digitization Process #2 | 27/09/2023

After receiving feedbacks regarding the elements that I added, Mr. Vinod recommended maintaining a sleek appearance for my key artwork. Thus, I decided that my final version would not include any additional elements.

Fig 2.6 Digitization Process #2 | 27/09/2023

Final:

                 Fig 2.6 Final Key Artwork Design [JPEG Format] | 28/09/2023

Task 2 (B): Collateral

For the next assignment, we were tasked with designing relevant collaterals, an animated key artwork, and establishing an Instagram account to transform the key artwork into a brand. 

Color Palette

After finalizing with Task 2(A), I began by choosing a color palette from Color Hunt, the website that Mr. Vinod has recommended to us. Initially, I was just scrolling through the newest palettes, hoping to stumble upon something that resonated with me. Eventually, after multiples of hesitation, I came across a color palette with the perfect saturation that I was envisioning.

Fig 3.1 My Chosen Color Palette | 04/10/2023

After receiving feedback from Mr. Vinod, he pointed out that my color palette was too pastel. He suggested adding a vibrant color to make my collateral stand out more. Hence, I included a semi-pastel yellow into my color palette.

Animation Key Artwork

I struggled a lot when creating the animation for my key artwork. This is because I am not used to using Adobe After Effect and is still new to the features the platform has. I tried to watch several video tutorials on how to animate logo using After Effect and they kind of help me in some way.

Fig 3.2 Adobe After Effect Animation Progress| 08/10/2023

Fig 3.3 Adobe After Effect Animation Progress| 08/10/2023

Final:

Fig 3.4 Adobe After Effect Animation Progress | 08/10/2023

For the final animation, I decided to change the background layout of my design as I wanted to match with the overall theme of my Instagram branding.

Instagram Branding

Instagram link: @_sor.cha_

Fig 3.5 IG Profile Screen Grab | 10/10/2023

1) Stacked Box Packaging

Fig 3.6 Process of Key Collateral - Box Packaging | 05/10/2023

Fig 3.7 Final Key Collateral - Box Packaging [JPEG Format] | 05/10/2023

2) Plastic Pouch Packaging

Fig 3.8 Process of Key Collateral - Plastic Pouch Packaging | 05/10/2023

Fig 3.9 Process of Key Collateral - Plastic Pouch Packaging | 05/10/2023

Fig 3.10 Final Key Collateral - Plastic Pouch Packaging [JPEG Format] | 05/10/2023

3) Postage Stamp

Fig 3.11 Process of Key Collateral - Postage Stamp | 05/10/2023

Fig 3.12 Final Key Collateral - Postage Stamp | 05/10/2023

Final Task 2 Submission:

Fig 3.13 Final Key Artwork in BW [JPEG Format] | 11/10/2023

Fig 3.14 Final Key Artwork in Color [JPEG Format] | 11/10/2023

Fig 3.15 Final Key Artwork Collateral Expansion in BW [JPEG Format] | 11/10/2023

Fig 3.16 Final Key Artwork Collateral Expansion in Color [JPEG Format] | 11/10/2023

Fig 3.17 Final Task 2: Key Artwork [PDF Format]  | 11/10/2023

Fig 3.18 Final Task 2: Key Artwork Animation [MP4 Format]  | 11/10/2023

Fig 3.19 Final Color Palette [JPEG Format] | 11/10/2023

Fig 3.20 Final Collateral: Stacked Box Packaging [JPEG Format] | 11/10/2023

Fig 3.21 Final Collateral: Plastic Pouch Packaging [JPEG Format] | 11/10/2023

Fig 3.22 Final Collateral: Postage Stamp [JPEG Format] | 11/10/2023

Fig 3.23 Final Task 2: Color Palette and Collaterals [PDF Format]  | 11/10/2023

Instagram link: @_sor.cha_

Fig 3.24 IG Profile Screen Grab | 11/10/2023

---

FEEDBACK

Week 4 | General Feedback

When creating a word mark, keep in mind that it should have a substantial meaning and memorable visual experience.

+ Specific Feedback

Looks like a scary smile.

Week 5 | General Feedback

Throughout this week, the feedback was relatively specific, focusing primarily on the accurate execution of the design with the chosen letters.

+ Specific Feedback

- Nice concept, but make sure the letters of your name is readable.

- Better without the stars.

Week 6 | General Feedback

The brand need to be legible and readable, not generic, as it will be very difficult for the viewers to pronounce the symbol.

+ Specific Feedback

Add a bright color to your color palette as to make your collateral stands out more.

Week 7 | General Feedback

The Instagram posts need to have visual richness which attract the viewers.

---

REFLECTION

Experience

I experienced many challenges throughout this assignment, primarily because it was a busy week, as it is packed with assignments. Among the tasks, I found Task 2A to be the most enjoyable. I am pretty satisfied with the process of creating my key artwork. However, as the assignment transitioned to Task 2B, I was exhausted, which diminished my enjoyment of creating my collaterals. I struggled to derive satisfaction, but I managed to push myself and not giving up. 

Observation

Through this assignment, I gained a knowledge of the effective use of color in text and the significance of distinguishing between uppercase and lowercase letters. It served as a valuable element that contributes to enhanced visual communication. Furthermore, I acquired an understanding of the delicate balance between ensuring information clarity and maintaining visual appeal. The absence of constraints allowed for expansive creative freedom may actually lead to an overwhelming accumulation of elements to enhance overall visual appeal.

Findings

Despite the hurdles, I recognize the value of these tasks in preparing us for Task 3, as it provides us with a practical introduction to designing an identity. The personalized approach, emphasizing the use of our name, fosters a deeper connection. I also discovered that design revolves around visual communication, in which I find myself concerned with the aesthetics of a design rather than ensuring if it is comprehensible for the viewers. Thus, I consistently need to remind myself of the task's focus in typography, which means readability and not the design's aesthetics.

---

FURTHER READING

Word Mark Design Tips

Creating a great word mark involves a thoughtful process that combines design principles, simplicity, and brand identity considerations. Some tips that can be applied are:

• Find the right font
• A word mark logo is more than just a regular typeface. It is derived from specifically created typefaces with an element or two that is stylized.
• Communicate with color
• While a word mark logo may lack a graphical element, the designer have the opportunity to leverage color to highlight the key elements of the brand.
• Utilize white space properly
• With the appropriate font choice, there will be negative or white spaces within the logo, providing momentum to individual letters or numbers.
• Play with shapes
• Shapes can be used to add emphasis to specific letters, create a sense of movement, and convey a certain mood.
• Experiment with backgrounds
• While creating a word mark logo, there are no restrictions on using background colors. The designer can creatively showcase your brand name against various canvas colors. As long as the colors exhibit good contrast and ensure readability, the designer is free to choose any combination that suits the brand.
• Consider a character feature
• Incorporating unique features in a word mark is significant in crafting a visually appealing and unforgettable logo that successfully conveys the brand's identity and values.