Advanced Typography / Task 2

16.10.2024 - .0.2024 / Week 4 - Week 6

GAN YI KIAN / 0374572
Advanced Typography / Bachelor of Design (Hons) in Creative Media
Task 2 / Key Artwork & Collateral

---

LECTURES

Week 5

Perception & Organisation

Contrast

Fig.1.1 contrast 

There are several methods in typography to create contrast the one on the left is devised by Rudi Ruegg. They are self-explanatory.

Carl Dair adds a two more principles into the mix; texture and direction “to make design work and meaning pop out — clearly and unambiguously, and with flair.” 

Dair posits 7 kinds of contrast

1. Size
2. weight
3. contrast of form
4. contrast of structure
5. contrast of texture
6. contrast of colour
7. contrast of direction

Fig.1.2 Example

Source: Arletta, Abby, Kelly, Eunice, Wen Yi, Baahy, Ava, Jason, Sangeetha

Size

A contrast of size provides a point to which the reader’s attention is drawn. The most common use of size is in making a title or heading noticeably bigger than the body text.

Fig.1.3 Example

Weight

Weight describes how a bold font stands out among lighter fonts in the same style. In addition to using bold text, using rules, dots, and squares can also provide a "heavy area" for attraction and emphasis.

Fig.1.4 Example

Form

Formal contrast refers to the difference between uppercase letters and their lowercase counterparts, or the difference from italics. Includes compressed and expanded versions of fonts

Fig.1.5 Example

Structure

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

Fig.1.6 Example

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. This depends partly on the letterforms themselves and partly on how they’re arranged. 

Fig.1.8 Example

Direction

Contrast of direction is the opposition between vertical and horizontal, and the angles in between. 

Fig.1.9 Example

Colour

Suggest that a second color is often less emphatic in values than plain black on white. 

Fig.1.10 Example

Form

Form refers to the overall look and feel of the elements that make up the typographic composition.It is the part that plays a role in visual impact and first impressions.Good typography tends to attract the eye visually. It can guide people's eyes.

Fig.1.11 Example

Originating from the Greek words “typos” (form) and “graphis” (writing), typography means to write in accordance with form.

Typography has two functions:

1. To represent a concept
2. To do so in a visual form.

Gestalt

Gestalt is a german word meaning the way a thing has been “placed” or “put together”. 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 theory emphasizes that the whole of anything is greater than its parts—this is based on the idea that we experience things as unified whole.you must look at the whole of experience. 

In typography layouts, the components/ elements that make up the design is only as good as

its overall visual form.

 Fig.1.12 Gestalt theory

Organisation / Gestalt: Perceptual Organisation / Groupings

1. Law of Similarity
2. Law of Proximity
3. Law of Closure
4. Law of Continuation
5. Law of Symetry
6. Law of Simplicity (Praganz)
7. ...
   

Fig.1.13 Example

Law of Similarity

• 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 

• Close together tend to be perceived as a unified group. 
• Items close to each other tend to be grouped together, whereas items further apart are less likely to be grouped together.

Fig.1.14 Example

Law of Closure

• The mind’s tendency to see complete figures or forms even if a picture is incomplete, partially hidden by other objects

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 Simplicity (Praganz)

• You will have to weigh them all to come to a consensus.of your own.
• The idea in the end, is to ensure awareness and inform your work process. 
• Organisation of information in the form of laying out complex content in a hierarchical manner requires practice and the knowledge gained herein but also elsewhere. 
• Knowledge obtained from reading, listening and viewing must be exercised or put to use for it to be retained and of standard. 

---

INSTRUCTIONS

Task 2(A) - Key Artwork 

We are required to make a mind map (of who we are or like to be), create a mood-board or an inspirations. for direction and produce sketches of possible wordmark/lettering of your name (first name or pet name or pseudonym — minimum 4-5 characters)

Mind Map

While making this mind map, I discovered that I actually don’t know myself very well either...

Fig.2.1 Mind Map (19/10/2024)

Mood-Board

Fig.2.2 References (19/10/2024)

Fig.2.3 References (26/10/2024)

Chosen keywords: Minimalist, Continuity, Gaming

I sketch directly in Adobe Illustrator because I don’t have a tablet to sketch on and I prefer to draw on the computer.

Fig.2.4 Sketch (21/10/2024)

Fig.2.5 Sketch (22/10/2024)

I finally decided to use the "Gaming" style wordmark for my digital creation and chose the one I liked best.

Fig.2.6 Gaming Sketch (26/10/2024)

Fig.2.7 Final Gaming Sketch (30/10/2024)

Today I need to show the final finished product for Mr Vinod in the class, but I don’t know which one I should choose. Mr Vinod said that I can choose the last wordmark to continue.

Fig.2.8 Process (30/10/2024)

It is interesting that when I showed the work to Mr Vinod, he asked me to show the work again to see if she could understand my wordmark and the result was not. She thought my letter K was h, I knew that this might be confusing and started changing the letter K after being confused

There are also letters A and N. Mr Vinod recommends that it is easier for me to design them, so I change them into an inclined line.

Fig.2.9 Process (30/10/2024)

At the end, I changed the next side of K to the same edge as the letter A and N.

Wordmark animation (Gif format)

At first, I used After Effect to create animations, but I found it difficult. Even though I referred to online tutorials, I still had no idea. In the end, I decided to use the animation method I learned in the previous semester, which was to use Photoshop.

Fig.2.10 Animation process (12/11/2024)

Fig.2.11 Animation process (12/11/2024)

Fig.2.12  Animation GIF (12/11/2024)

Final Task 2(A) Key Artwork

Fig.3.1 Black wordmark on white background (30/10/2024)

Fig.3.2 White wordmark on black background (30/10/2024)

Fig.3.3 Colour palette (30/10/2024)

Fig.3.4 Wordmark in actual colours on lightest shade of colour palette (30/10/2024)

Fig.3.5 Wordmark in lightest shade of colour palette on darkest shade of colour palette (30/10/2024)

Fig.3.6  Animation GIF (12/11/2024)

Fig.3.6 All in One PDF (30/10/2024)

---

Task 2(B) - Collateral

We need to expand the identity of the main artwork to include the three accessories I have chosen.

I completed the mockup based on some URLs found in the senior’s blog (KIM SEOYOON)

• Unblast  https://unblast.com/
• Mockups Design  https://mockups-design.com/
• Mr Mockup   https://mrmockup.com/free-mockups/
• Mockup Bee   https://mockupbee.com/

I decided to use business cards, laptops and power banks to create my merchandise because I positioned my wordmark for the tech market

Fig.4.1 First Attempt (4/11/2024)

Fig.4.2 First Attempt (4/11/2024)

Fig.4.3 First Attempt (4/11/2024)

In addition, I want to create another logo design to be used as the avatar of my IG homepage

Fig.4.4 Another Logo (4/11/2024)

This is my first attempt and I think it’s a bit imperfect. I’m still thinking about how to make this homepage more of my own style and design.

Fig.4.5 IG homepage (4/11/2024)

First Attempt

This is the Instagram page I made before I started the class. Before Mr Vinod approved my work.

Fig.4.6 IG homepage (4/11/2024)

In the class, Mr Vinod told everyone that our Instagram homepage interface must look consistent, just like the color, symbol design and even the product selection must be consistent with the factors contained in our designed wordmark.

Of course, my work was not approved. First of all, not many people use business cards nowadays, so it is not a product that ordinary people will use. As for the color, my homepage has too many colors, and other designs do not match my design elements.Also, the background of black and white photos should be black and white so that the photos do not look messy.

So I started designing my IG homepage in class. Until Mr Vinod approved it.

Product

First of all, the product design, Mr Vinod suggested that I zoom in on the details of the product to make it more contrasting and interesting in the photo and add symbolic design.

 

Fig.4.7 Collateral 1 (11/11/2024)

Fig.4.8 Collateral 2 (11/11/2024)

Fig.4.9 Collateral 3 (11/11/2024)

Wordmark Explore

Fig.4.10 Wordmark Explore 1 (11/11/2024)

Fig.4.11 Wordmark Explore 1 (11/11/2024)

Wordmark Element Explore

 Fig.4.12 Wordmark Element Explore 1 (11/11/2024)

Fig.4.13 Wordmark Element Explore 2 (11/11/2024)

Color Palette

The above design colors are all selected from this color Palette.

Fig.4.14 Color Palette (11/11/2024)

B & W Picture

Original 

I chose this photo to make one of my Instagram homepages. I used Photoshop to edit it, adjust the color to black and white, and adjust the size. Then I added my wordmark to it.

Fig.4.15 Original Picture (11/11/2024)

Fig.4.16 B&W Picture (11/11/2024)

IG page

https://www.instagram.com/kian374572

Fig.4.17 IG page (11/11/2024)

Fig.4.18 Qr code (11/11/2024)

Final Task 2(B) Collateral

Collateral 1

Fig.5.1 Final Collateral 1 (11/11/2024)

Collateral 2

Fig.5.2 Final Collateral 2 (11/11/2024)

Collateral 3

Fig.5.3 Final Collateral 3 (11/11/2024)

Instagram handle & link

https://www.instagram.com/kian374572

IG screen grab

Fig.5.4 Final IG Page (11/11/2024)

PDF

 PDF (11/11/2024)

Fig.5.5 

Final Task 2(B) Collateral

---

FEEDBACK

Week 5

General Feedback: We need to digitize the wordmarks using Adobe Illustrator and upload the best ones next week.

Specific Feedback: Mr.Vinod recommended me to read Twentieth-century Type: Remix by Lewis Blackwell, but I have found many resources and cannot read this book for free.

Week 6

General Feedback: We need Mr Vinod in the class to leave through our final Wordmark and Color Palette.

Specific Feedback: Make sure the readability of wordmark.

Week 7

General Feedback: The design of all ig homepage posts must use relevant colors, elements, etc. to maintain consistency with the wordmark.

Week 8

Independent Learning Week

---

REFLECTION

Experience

Observations

Findings

---

 FURTHER READING 

Twentieth-century type: Remix by Lewis Blackwell

This is a book Mr Vinod recommended me to read when I was designing my wordmark, but I couldn’t find a free book to read after searching many resources, so I could only read the preview on Google Books.

Twentieth-century type: Remix (Pg 37)

This was a Vorticist attempt to liberate words (using a nineteenth-century woodcut alphabet) and the one above is an alphabet created by Theo van Doesburg in 1919, based on a square of 25 equal parts. Font drawn by The Foundry in the 1990s.