Advanced Typography / Task 2

16.10.2024 - 17.11.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

Size
weight
contrast of form
contrast of structure
contrast of texture
contrast of colour
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:

To represent a concept
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

Law of Similarity
Law of Proximity
Law of Closure
Law of Continuation
Law of Symetry
Law of Simplicity (Praganz)
...

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.7 Final Task 2(A) Collateral 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

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

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

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

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

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

Fig.5.5

Final Task 2(B) Collateral PDF (11/11/2024)

Task 2 Final Compilation

Fig.6.1 Black wordmark on white background (20/11/2024)

Fig.6.2 White wordmark on black background (20/11/2024)

Fig.6.3 Colour palette (20/11/2024)

Fig.6.4 Wordmark in actual colours on lightest shade of colour palette (20/11/2024)

Fig.6.5 Wordmark in lightest shade of colour palette on darkest shade of colour palette (20/11/2024)

Fig.6.6 Animation GIF (20/11/2024)

Fig.6.7 Final Task 2(A) Collateral PDF (20/11/2024)

Fig.6.8 Final Collateral 1 (20/11/2024)

Fig.6.9 Final Collateral 2 (20/11/2024)

Fig.6.10 Final Collateral 3 (20/11/2024)

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

Fig.6.11 Final IG Page (20/11/2024)

Fig.6.12

Final Task 2(B) Collateral PDF (20/11/2024)

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

This task gave me a deeper understanding of the combination of artistry and practicality in font design. Although there were some challenges in the process, such as how to make the layout unique and easy to read, I gained a lot through continuous attempts. Especially when exploring creative expressions, I discovered some new inspirations. This experience made me feel satisfied and made me more confident in future designs.

Observations

In my case, it was apparent as I observed that the significance of the given assignment was in the typographic investigation of text by means of accurate typographic execution and innovative type designing. It models, by experimental layout methods, how vision and functionality can be accepted and balanced. Such exploration is definitely not only a technical problem but also an appreciation of the aesthetic value of fonts.

Findings

While developing this concept, I realized that font designing requires a one to think about whether a certain font will look good on paper and whether it is practical to use. They all make big differences, even the changing of font style and space between the words. At the same time, the attempt to use different typographic techniques helped to understand how to combine the peculiarities of the sphere and effective communication of information in design works.