Typography Task 3B: Type Design and Communication

03 Nov 2021 - 14 Nov 2021 (Week 11 - Week 13)

Zetie Binti Bahaman / 0351297 / BDCM

Typography

Task 3(B): Type Design & Communication

---

LECTURES

All lectures have been completed in Typography Task 1/Exercises.

---

INSTRUCTIONS

For Task 3B, we are to synthesize and apply the learnings in the exercises, tasks 1 and 2.  We have to express a social message, greeting, or the like in typographic form that is useful to the campus community at Taylor's University or the public at large. We were given a list of festivals to choose from and I picked Halloween. 


Task 3B: Type Design & Communication

1. Visual Research

Fig 1.0 Moodboard, Week 10 (27/10/2021)

Since Halloween is the festival I chose, I looked up some inspiration photos from Pinterest. Almost all references had a pumpkin in them. I thought of adding some variation hence, the howling wolf/werewolf is added to the board.

Fig 1.1 Typefaces Test, Week 10 (27/10/2021)

I tested out some typefaces and compiled the ones that I feel can express Halloween or spookiness. I realized the serif fonts mostly display a classic horror feel to it like a vintage horror comic title.



2. Sketching & Digitization

Fig 1.2 Digital Sketches Progression, Week 10 (27/10/2021)

I came up with four sketches and at the same time try to visualize how I will animate them later on.

Design A: It's a combination of a werewolf inspired by Mozilla Firefox (? haha). I thought the effect of the one hand outside the frame was cool.

Design B: I wanted to portray as if the typeface is part of the spider web.

Design C: The text is spread out on the wings of the bat, thinking I could make these letters blink/flicker.

Design D: Of course, I had to pick the pumpkin to my design ideas. I played around with the eyes with the nose. I used Envelope Distort to warp the text Halloween as if its the teeth of the pumpkin.


I think what I find most tricky from this process is trying to find the right position for the Taylor's University mark. 

Fig 1.3 Sticker Design Variations, Week 11 (3/11/2021)

These are the final sketches for my first draft. 

Design A: I changed the typeface on the wolf and put up the TU mark as the background.

Design B: I didn't change much except changing it to a black background. I feel it made it look better and showed more contrast. Also, added the TU mark on the hanging spider!

Design C: No changes.

Design D: The pumpkin took me some time to settle on my final choice. I adjusted the eye shape and changed the typeface for the word 'happy'. Instead of the TU mark on the stump, I used it for the 'nose'. 


Design Refinement

Fig 1.4 Sticker Refinements, Week 11 (3/11/2021)

Based on the feedback, I made amendments to the black and white version. I made the stump smaller and adjust the size for the graphical elements and the typeface. The final output is bigger than the rest as that version looks better and more readable after testing it on Telegram.



3. Colour & Eye Candy Development

Fig 1.5 Color Reference, Week 11 (3/11/2021)

This is the color moldboard that I am going for the final output of the sticker. I realized that it will be displayed on the screen and ultimately, the phone screen so flat colors won't be sufficient. There will be a few layers of orange to give the pumpkin more depth, as well as the shadows and highlights.

Fig 1.6 Color Process, Week 12 (11/10/2021)

Fig 1.7 Color Process of Text, Week 12 (11/10/2021)

Fig 1.8 Colorized Sticker - Draft 01, Week 12 (12/11/2021)

Fig 1.9 Telegram Test for Draft, Week 12 (12/11/2021)

4. Final Refinements

Fig 2.0 Typeface Test for 'happy', Week 12 (12/11/2021)

Mr. Vinod suggested I use a wider typeface for the word happy. It was hard to select a new one because I was already happy with the overall look. I ended up choosing 'Gill Sans MT - Bold Italic' because it made the word happy more readable and legible. I chose italic since the letter p had an extra quirk to it adding in the Halloween element.

Fig 2.1 Halloween word refinements, Week 12 (12/11/2021)

The top is the initial distortion. I extended the stems to maximize the wording into the sticker later on. The tricky part is to ensure that it is still legible.
 

Fig 2.2 Sticker design refinements, Week 12 (12/11/2021)

Following the feedback, I made refinements to my final sticker design. Looking back, even though I thought my initial design was good but the amendments made the sticker more readable and all the required elements (text and TU mark) are much clearer now.

Fig 2.3 Sticker outline process, Week 12 (12/11/2021)

Fig 2.4 Sticker with outline view, Week 12(12/11/2021)

The final step to the design was adding a 7pt white outline. Satisfied with my overall sticker design, I proceeded to the next step, which was to animate it into a Telegram sticker.



5. Animated Sticker Process

Fig 2.5 Animating in After Effects, Week 12 (14/11/2021)

Fig 2.6 Using the glow effect in After Effects, Week 12 (14/11/2021)

Fig 2.7 Position keyframes of eyeball left and right, Week 12 (14/11/2021)

Mr. Vinod reminded us to make simple animations. Hence, I decided to just animate the eyeball of the pumpkin. Since there were requirements from Telegram to avoid several functionalities in After Effects, I only used the position keyframes to animate them.

Having to use the extension, I had to change the colors of my design and change the layers into outline shapes. However even after doing that, my animated sticker still had issues of not showing up.

Fig 2.8 Telegram test of animated sticker, Week 12 (14/11/2021)

The sticker managed to get rendered through the bodymovin extension and the eyeball was animated. Unfortunately, it did not display the overall design and text.

Since I had to work on my other modules, I did not have time to further resolve this issue. Mr. Vinod was kind enough to accept non-animated stickers provided that we submit a gif version of our sticker. I am grateful for this when he made the announcement on Facebook.

Fig 2.9 Exporting gif via Photoshop, Week 12 (14/11/2021)

A transparent gif out of After Effects is an AVI file. Hence, I used Photoshop to convert it into a GIF.




Final Task 3B: Type Design & Communication

Fig 3.0 Final Task 3B: Type Design & Communication B&W - PNG, Week 13 (17/11/2021)

Fig 3.1 Final Task 3B: Type Design & Communication Color - PNG, Week 13 (17/11/2021)

Fig 3.2 Final Task 3B: Type Design & Communication - PDF, Week 13 (17/11/2021)

Fig 3.3 Final Task 3B: Type Design & Communication - GIF, Week 13 (17/11/2021)

Fig 3.4 Screenshot of the sticker in Telegram, Week 13 (17/11/2021)

Stickers were made using Telegram's Sticker Bot.
Link for sticker pack: https://t.me/addstickers/Pumpkinoween

Overall, I have spent an average of 48 to 72 hours in total on this assignment.

---

FEEDBACK

Week 11
General Feedback:

Space is an important factor to consider when creating the stickers. The more space the design occupies, the more impactful the sticker is.

Before we begin any task, we should try and review the briefing of the assignment to ensure clear direction and avoid any misunderstandings.

We are expected to introduce color to our designs next week. It's best we lookup for references to give us some understanding of color theory.

Specific Feedback:

Great design and excellent choice of typeface. There is a contrast in the letterforms which gives it the 'halloween' expression. 

Mr. Vinod advised me to make the stump a little smaller and maximize the wording so it doesn't get overwhelmed by the graphical elements. I have to try to maintain the effect of the scariness despite reducing the size.

Explorations in the distortion of the Halloween word can be further executed if I'd like to but otherwise, it is already conveying the message well.

Week 12
General Feedback:

We should continue to do our best and don't drive ourselves too crazy. For the final submission, refer to the suggested blogs for reference. Although, we do have an additional submission of a GIF and to embed our MIB. 

Before we proceed with the gif animation, Mr. Vinod mentioned that we should be happy with our sticker to avoid going back and forth fixing it. We are also allowed to use softwares other than Photoshop as long as it results in a gif and can submit on Telegram.

Specific Feedback:

Excellent work overall. The highlights in the typeface are really good and work well. The only issue is the pumpkin should be 3/4 covered with the typeface expression especially the word 'happy'. Mr. Vinod suggested I use a wider/extended typeface to make it more legible and visible. This applies the same to Taylor's mark, he suggested I drop the gradient and use flat colors to make it stand out more since it will be small. As for 'Halloween', I  should stretch it slightly to the top, without making it overly distorted. He also reminded me to add the white outline around the sticker.

Any issues to upload the sticker, I can try using another bot ->  @stickerator_bot

Week 13
General Feedback:
He mentioned we should indicate how many hours we spent (in total) on each task in the final reflection post. 

Specific Feedback:
Excellent progression and documentation. Good attention to detail. Well crafted.

---

REFLECTIONS

Experience:

This was my first time designing a sticker, for someone who uses stickers a lot on a daily I was excited. Out of all the typography assignments this semester, this didn't overly stress me out. It was a fun process overall (except exporting it into an animated Telegram sticker). My only regret is not being able to resolve this issue and to see the animated version in Telegram.

Observations:
After working with only black and white designs, I was glad that we are allowed to play with colors in this task. Mr. Vinod also gave way to adding some extra features to our stickers. During the color process, I realized how gradients, highlights, and shadows made such a difference to my design of the pumpkin. It gave the design more depth instead of just a flat orange color, cuz then the black & white version would look better.

Findings:
I found that having a holding shape of a sticker made the process easier, in my case, the pumpkin. I didn't have to worry about filling up the space on the artboard. However, I did have to find ways to maximize the typographic message in the shape of a pumpkin. Legibility issues arose but it felt great once I found the right typeface and to see the final outcome.

---

FURTHER READINGS

Fig 3.5  Vignelli Canon on Design

Reference:

Vignelli, M. (2015). The Vignelli Canon.

Part Two: The Tangibles

Chapter: White Space

This week, I don't have the privilege of much time to spend on reading. I decided to try reading something that's not too heavy of a material. This book is written by an Italian designer, Massimo Vignelli. I'm not sure why but this sentence about white space really struck me.

According to him, in typography, white space is more important than typeface black. White space on a printed page corresponds to space in architecture. Space is what qualifies the context in both cases.

Naturally, information organization requires structure to hold together, but one should not overlook the importance of white space in better defining the hierarchy of each component. White space not only separates the various parts of the message, but also helps to position the message within the context of the page. Tight margins create tension between the text, images, and the page's edges.

Wider margins help ease tension and bring a sense of calmness to the page. Tight type settings turn words into lines, while loose type settings turn words into dots. Decreasing or increasing letter spacing (kerning) gives the words a very distinct character and expression.

All of this is space manipulation, and this device is used in layouts to achieve the desired expression. One of the most delicate and valuable elements of a composition is the relationship between the size of the type and the space around it.

Fig 3.6 White space in print, White Space - page 92

I like to apply white space in my designs whenever I can. Although it may look simple, it actually isn't. White space is just as important as occupied space. It helps bring attention to the areas of the design we want users/customers to focus on and keeps the design from just looking like noise on a screen. It also depends on the way it's being presented. Sometimes a layout can call for ample white space and other times (content-rich), it might be better suited with very little.

Fig 3.7 Typographic Design: Form and Communication (2015)

Reference:

Carter, R., Day, B., Meggs, P. B., Maxa, S., & Sanders, M.

(2015). Typographic design: Form and communication.

Hoboken, New Jersey: John Wiley & Sons, Inc.

Chapter: The Typographic Message

This chapter introduces typography as a powerful visual language capable of educating, persuading, informing, and entertaining. When typographic signs are designed with an educated eye and mind, they can achieve clarity, expression, lucidity, aesthetic beauty, and other benefits.

Verbal/Visual Equations

Because typography is both visual and verbal, it can work in a linear fashion, with words following each other in a specific sequence, or in a nonlinear fashion, with elements existing in a variety of syntactic combinations.

Fig 3.8 Visual poem of 'O Christmas Tree', page 115  

The capital letter O is a perfect circle, representing ornaments while the linear strokes of the other letterforms resemble the texture of evergreen needles (Fig.3.8). All these typographic signs resulted in this typographic message.

Denotation and connotation are two key terms in understanding signs.

Denotation:
-> Objective meaning, the factual world of collective awareness and experience
-> For example, a yellow O
-> Denotative interpretation: "This is a yellow letter O" or "This is a yellow circle."

Connotation:
-> Connotative interpretations: "This is the sun, a slice of lemon, or a golden ring,"
-> Conditioned observations based on overtones or prior personal experience.


Some of these verbal/visual equations are depicted in Fig 3.9 and 4.0

Fig 3.9 Illustrations of typographic visual/verbal application, page 117 

Fig 4.0 Illustrations of typographic visual/verbal application, page 117 

This reminded me of the first task of this module. The task was to visualize the meaning of a word using only the graphic elements of the letters that make up the word, with no outside parts. I still remember how challenging it was for me to express the word 'Terror'.

Chapter: Typography on Screen

This chapter examines the relationship of typography to screen environments, focusing on legibility, visual hierarchy, and type structuring on digital pages. With the ever-changing technology, such as screen sizes, screen resolutions, and new types of interactivity, typography can be challenging to apply.


Rendering Type on Screen

Screen fonts are bitmaps, which are digitized images composed of tiny dots. The higher the resolution, the more pixels are used.

Fig 4.1 Rendering Type on Screen, page 134

When type is rendered on screen, some details such as stroke weight, subtle curves, and serifs are lost. On a raster-scan display, curved and diagonal edges rendered as pixels have a jagged stairstep quality known as "the jaggies."

Rendering Type on Screen: Hinting

Resolution is a major factor influencing the legibility of on-screen type. Resolution decreases as fewer pixels are available to describe letters. To compensate for this issue, type designers reshape the outlines of characters, a process is known as hinting, in order to create the best possible image at different point sizes. Hints change the actual outlines of letters by selectively activating pixels, improving letter legibility on the screen, and from low-resolution output devices.

Fig 4.2 Letter 'h' in outline and bitmapped letterform, page 135

Verdana and Georgia were created as pixel bitmaps before being converted into outline fonts. The majority of digital typefaces are created as outline fonts that are then used to create bitmapped screen fonts. As a result, they have higher on-screen fidelity than most typefaces designed specifically for high-resolution output.


Selecting Typefaces: On Screen Type Sizing

Fig 4.3 Serif type comparisons for legibility, page 138

Serif typefaces should be chosen for their legibility on-screen at small sizes when used. Memphis, Rockwell, Serifa, and Museo are examples of typefaces with moderate contrast between strokes and blocky serifs that translate well into pixels. All typefaces under consideration should be assessed by comparing their legibility on screen at different sizes.