Advanced Typography - Task 3

1/6/2021 - 1/7/2021 // Week 11 - Week 14

Gan Shin Tung / 0346455

Advanced Typography / Bachelor of Design (Hons) in Creative Media 

Task 3: Final Project Type Exploration and Application

---

Lecture

Week 5: Perception & Organization

Perception is the way in which something is regarded, understood. or interpreted. So, is perception what you see and therefore understand or what you are manipulated into seeing and understanding? Perception in typography deals with the visual navigation and interpretation of the reader via contrast, form and organization of the content. Content can be textual, visual, graphical or in the form of color. However, our focus today is in typography. 

Contrast/Size

A contrast of size provides a point to which the reader's attention is drawn. For example if you have a big letter and small letter you will obviously see the big letter first before the small. The most common use of size is in making a title or heading noticeably bigger than the body text.

Contrast Form

Contrast of form is 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.

Contrast 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.

Contrast / Texture

By putting together the contrast 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 threy're arranged.

Form

For 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. A good form in typography tends to be visually intriguing to the eye; it leads the eye from point to point, it entertains the mind and its most often memorable.

Organisation / Gestalt

Gestalt theory emphasizes that the whole of anything is greater than its parts this is based on the idea that we experiences things as unified whole. Instead of breaking down thoughts and behavior to their smallest elements, the gestalt psychologists believed that you must look at the whole of experience.

Gestalt Perceptual Organization/ Groupings

• Law of Similarity
• Law of Proximity
• Law of Closure
• Law of Continuation
• Law of Symmetry
• Law of Simplicity (Paraganz)

The Law of Similarity is the gestalt grouping law that states that elements that are 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.

The Law of Proximity is the gestalt grouping law that states elements that are close together tend to be perceived as a unified group. This straightforward law states that items close to each other tend to be grouped together, whereas items further apart are less likely to be grouped together.

The Law of Closure refers to the mind's tendency to see complete figures or forms even if a picture is incomplete, partially hidden by other objects, or if part of the information needed to make a complete picture in our minds is missing.

Law of (Good) Continuation holds that humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect. The alignment of the objects or forms plays a major role for this principle to take effect.

The Law of Symmetry (Law of Praganz)

Organization 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.

---

Instruction

<iframe src="https://drive.google.com/file/d/1VHFeQWykhbim_bieeDuv3Dk6uJXkyU65/preview" width="640" height="480"></iframe>

---

Final Project

PROPOSAL:

Figure1.1 Proposal Slides (24/5/21)

Figure1.2 First Attempt(1/6/21)

My first attempt was not approved by Mr.Vinod, he said that the sharp end can't show the hot or spicy on fire feel.

Figure1.3 Second Attempt(7/6/21)

Figure1.3 Second Attempt(7/6/21)

This time I try to use the shape of the flames to make the letters. Mr.Vinod said I got the idea of it but there is something still not right about it. I'll have to make it looks more like a fire. I also think that I should maybe use another way to present my fire elements in my fonts. So I continue on visual research and try out another way.

Figure1.4 Third Attempt(18/6/21)

Figure1.5 First Attempt(18/6/21) 

Figure1.6 Forth Attempt(21/6/21)

Figure1.7 Second Attempt(21/6/21)

Mr.Vinod suggested to lower the height of the flame for the letter, also make adjustments for letter K and Q. For punctuations he asked to use the normal ones without including the flame elements. He also suggested to make the flame goes down on the G.

Figure1.8 Fifth Attempt(22/6/21)

Figure1.9 Third Attempt(22/6/21)

Figure2.0 Sixth Attempt(22/6/21)

Figure2.1 Forth Attempt(22/6/21)

Figure2.2 Seventh Attempt(22/6/21)

Figure2.3 Final Font Design JPG(23/6/21)

Figure2.4 Final Font Design JPG(23/6/21)

Figure2.5 Final Font Design PDF(23/6/21)

After finish making adjustment to the numbers and letters, I try to place the letters together to test out how the logo would look like.

LOGO TEST:

Figure2.6 Logo Test (22/6/21)

Figure2.7 Final Logo JPG (25/6/21)

Figure2.8 Final Logo PDF

APPLICATION:

OFFICIAL WEBSITE:

Figure2.4 Original Website Logo (27/6/21)

Figure2.9 Redesigned website Logo (27/6/21)

PRODUCT PACKAGING:

CUP NOODLE:

Figure3.0 Original Cup Noodle Packaging Logo (27/6/21) 

Figure3.1 Redesigned Cup Noodle Packaging Logo (27/6/21)

CUP NOODLE COVER/LID:

Figure3.2 Original Cup Ramen Cover Logo(27/6/21)

Figure3.3 Redesigned Cup Ramen Cover Logo(27/6/21)

RAMEN PACKAGING:

Figure3.4 Original Ramen Packaging Logo (27/6/21)

Figure3.5 Redesigned Ramen Packaging Logo (27/6/21)

HOT SAUCE BOTTLE:

Figure3.6 Original Hot Sauce Logo (27/6/21)

Figure3.7 Redesigned Hot Sauce Logo (27/6/21)

Figure3.8 Collateral Compilation PDF(28/6/21)

FINAL OUTCOME:

Figure3.9 Final Outcome PDF(28/6/21)

FONT MAKING PROCESS:

Figure4.0 Import Fonts in FontLab7(27/6/21)

Figure4.1 Kerning(276/21)

Download my font : Hot, Regular

FURTHER APPLICATION:

Mr.Vinod suggested me to create an advertising poster or social post in order to make use of my fire fonts, as the collateral showcase too little of it. Therefore, I made social post using my own font that I've created in order to show more of my fonts on larger vision.

Figure4.2 Google Visual References(28/6/21)

I went on google samyang's signature character which is hochi the chicken. I collect the png of the characters I need then I photoshop them to make my social post.

Figure4.3 Editing in Photoshop(28/6/21)

Then I photoshop the character that I've chosen by using the quick selection tool in Adobe Photoshop cc.

Figure4.4 Adding Elements in Adobe Illustrator(28/6/21)

After that I add my elements so as my text using my created fonts into the social post design. So as the color, strokes and vector was all done in Adobe Illustrator. 

SOCIAL POST DESIGN:

Figure4.2 Samyang Social Post Design(29/6/21)

Figure4.3 Samyang Social Post Design#2(29/6/21)

Figure4.4 Samyang Social Post Design PDF(29/6/21)

---

Reflection

Week 11: I did the sharp ends to make it like spicy and painful but it doesn't really work out for the fonts itself as it doesn't show a spicy feel instead it shows painful and horror. I decided to figure out some other methods to present the fire.

Week 12: I did various of visual research and I found out how others use the flame in their alphabet elements and I try to do that myself. It turns out to be better and I am happy about it. Although I still think that there is lack of something, somehow the fire doesn't look realistic and appealing, but I just showed what I have to Mr.Vinod in class.

Week 13: I continue work on my fonts, but at the same time I did a lot of visual research, which helps me to figure out more ideas to work on. I am learning from other's work and get inspirations, which is a good thing but the process is not enjoyable if you keep not getting ideas. 

Week 14: It is the last week, there is so much things to do and conclude. It's pretty much stressful but looking at my fonts I've made that fits well with the product or packaging I am half relief. I am extremely satisfied with my final outcome, no matter what others think I am assured of myself.

---

Feedback

Week 11: 

Specific Feedback: The sharp ends does not symbolize the fire or show hot spicy feel. You need to figure out another way to present it, this is not the way. 

Week 12: 

Specific Feedback: You seems to get it now but there is still something missing, maybe you could apply effects to the strokes would give a bit more fire shape. You try and error and explore more.

Week 13:

Specific Feedback: This looks better than the previous ones, just fix the K and Q, make it more like capital letters. Lower the height of the flames. I like how you used upper and lower case numbering just make sure the end cuts are consistent, as for punctuations just use the normal ones.

Week 14
General Feedback: You have to generate your own fonts in order to present to the examiners. Don't forget to attach your font link in order for people to download. For some people that has not completed the final compilation refer to the example given, it is most important post as it is the first one to look at. Make sure to present it well and clear. 

Specific Feedback: The fonts were only used for logo in products or packaging, which is a waste of so much effort put in, maybe you could do like an advertising poster or social post design in order to make great use of your created font. Make it big, present it large, fully utilize the potential of the fonts.

---

Further Reading

4 Tips to Design a Correct Structure of the Text on Your Website

https://www.silocreativo.com/en/4-tips-design-correct-structure-text-website/

Summarise and trim
The most important thing when you are sending a message, is that the message is as concrete as possible; obviously without missing details that are primary and without which we would not understand the bulk of the message. This may seem easy, but it is one of the most difficult tasks, as always we are afraid that the message can be empty and the communication partner is halfway. However, when we got it, we know that the user will be with us and will not be gone dull. One trick for those places where even concretizing it is interesting that the user can expand the information is to add a button «more information,» «read more…» If you do not click you will have anyway all the information you should know, and if you click to get more information and read more, it will be on your own initiative.

Rank your fonts
This theme is expanded in this article, but to summarize you have to use different weights and sizes of fonts, introducing titles at all locations where possible. If we have a title that anticipates what will be read, we get the users to set their attention on those places that are interested in reading. Not all phrases mean the same, they are not equally important, so we cannot show them in the same way, and titles are the first step to democratize.

Measure your paragraphs and make lists whenever possible
Paragraphs are fine when we read an article or a novel, but we get tired when we surf. We need to know the main ideas and the best tool for this are the lists. Within a paragraph we can extract those ideas and turn them into points that will be the most important. In this way we can read quickly and effectively the most significant things. However, it is understood that we cannot always make lists. So when we talk about paragraphs, as we advanced on the issue of readability, we have to give a proper length to them. They cannot be too long and cannot have more words than due. If you see that there are too many words, pass them to another paragraph. Long paragraphs are more difficult to read.

Prioritize your words
We have already concretized and understood that we have to have titles that help us read. However, and this is very close to the user experience, we have to show the priority message with the most important things facilitating global reading. Inside the message, highlight with different thickness or size adding an image to facilitate the understanding and UX for all types of users, and distribute the message properly.
Discover the best way to convey your message, for users to understand and remain engraved in their visual memory. Use the space as if it was a canvas and draw with the words the exact message you want to convey.

Conclusion
It is not that we are lazier when reading, but we have to prioritize our time reading to invest in what we find exciting, either a mystery novel or an article about web fonts. Therefore, when designing a web, we have to take into account the impact that words have on the user, making it easy the comprehension and reading. Thus, we will all benefit; visitors can easily understand the message, giving the option to deepen. And you will get the visitor stay on the web longer, becoming a user.