Typography -Task 3B

01/06/2022 - 22/06/2022 (Week 10-Week 13)

Yong Kai Yi (0352826)

Typography
Task 3(B)

---

INSTRUCTIONS:

Task 3(B): Type Design & Communication

01/05/2022 - 22/06/2022 (Week 10-Week 13)

Sticker sketches:

fig 01: Task 3B 1st attempt sketch (week 10/ 01/05/2022)

These are some of my sketches for the Task 3B sticker, I mostly play around with positioning, distorting the texts, and also add shadows or highlight on it to make it more pop's out. The 1st, 5th and 3rd design are my preference, as the type looks happy and it's cute.

fig 02: Task 3B 2nd attempt sketch 1 (week 11/ 08/05/2022)

After the feedbacks session, I made 2nd attempt adjustments for both designs (from 1st and 5th design). The problems I made in the 1st attempt mostly is the size are not in square ,as the telegram stickers are in square format, thus I the sketches I made may didn't utilize the square/ exceeded the frame which will cause problems. 

For the sketch above, I made a little amendments on the 1st design, by changing the balloon (black frame) to the speech bubble, and also added some lines elements to make it more interesting and utilize the space well.

fig 03: Task 3B 2nd attempt sketch 2 (week 11/ 08/05/2022)

Next, I made a new sketch based on the typeface used in 5th design. In order to maintain it in a square frame, I changed the alignment by placing the 'happy' right above 'holiday. Next, I also added flags and curvy lines to utilize the white space. 

Progressions of digitizing in AI:

fig 04: Task 3B digitizing progression (week 11/ 08/05/2022)

First, I create a oval shape and adding anchor points to make the organic shape. Next, I use pen tool to make the pointy speech arrow at the bottom, and unite the shape. I use round brush tool to draw the text out, and use direct selection tool to adjust the strokes.

fig 05: Task 3B digitizing progression (week 11/ 08/05/2022)

Next, I use smaller point size brush tool to draw out the lines. It's meant to express happiness and friendly joyful look for the sticker. Thus, it's mostly curvy and playful lines.

fig 06: Task 3B digitizing progression (week 11/ 08/05/2022)

Furthermore, I also added some little lines outside of the speech bubble to make it looks more bubbly and joyful.

1st digitized attempt in AI:

fig 07: Task 3B 1st attempt digitized sticker (week 11/ 08/05/2022)

The picture above shows my 1st attempt digitizing the sticker, I mainly use round edged brush tool, as I think rounded edge looks more friendlier and happier which more related to the greetings - "Happy Holiday". Besides, I also added a speech bubble behind it as a frame, and it shows like a lot of people cheering for holiday. Next, I added some curvy lines to fill up the negative space and also to express the happiness. 

2nd digitized attempt in AI (after feedbacks):

fig 08: Task 3B 2nd attempt digitized sticker (week 12/ 15/06/2022)

After the feedbacks, I reversed the speech bubble color to red, and removed the lines outside the bubble. Next, I slightly changed the texts to make them more closer and linked, in order to reduce the negative space. 

3rd digitized attempt progressions (after feedbacks):

fig 09: Task 3B 3rd attempt digitized progressions (week 12/ 15/06/2022)

I duplicate the speech bubble and scale it 105% to create the white outline for the sticker. In the screenshot above shows grey in color as it is visible on the artboard, I use direct selection tool to adjust the arrow of the outline.

fig 10: Task 3B 3rd attempt digitized progressions (week 12/ 15/06/2022)

Next, after using brush tool to draw the lines and strokes, I use direct selection tool to adjust them slightly, as I wanted to let them remain looks like hand drawn and imperfect so every strokes are slightly different. 

fig 11: Task 3B 3rd attempt digitized progressions (week 12/ 15/06/2022)

Furthermore, I tried to make the Taylor's logo more blend in with the letters, so I use direct selection tool to adjust the anchor point to make it match the outline of the letters.

3rd digitized attempt outcome:

fig 12: Task 3B 3rd attempt digitized outcome (week 12/ 15/06/2022)

After the feedbacks, I made some adjustments, including additional lines on the top and right side of "happy". I also added highlights on it, and shadows in darker red color for the word 'holiday' to make it more pops out. Then, I changed the TU logo to same shade as the shadow to match the tone. But it seems not visible enough, so I tried make it as white in color. (PNG file shown below)

fig 13: Task 3B 3rd attempt digitized outcome with white TU logo (week 12/ 15/06/2022)

Due to I can't make decisions between these two, so I proceed export them into stickers in Telegram to compare the outcome.

fig 14: testing stickers in Telegram (week 12/ 15/06/2022)

This is the version with dark red color TU logo, my telegram is in dark mode, and I realized it's quite weird that the logo is not visible enough, looks like missing a part of the letter "A", and looks like having a weird negative space there.

fig 15: testing stickers in Telegram (week 12/ 15/06/2022)

I think this version is better as the logo is more visible and doesn't looks like there's a missing part of the letter 'A'. 

Final outcome:

Black and White:

fig 16: final outcome B&W in PNG (week 12/ 15/06/2022)

fig 17: final outcome B&W in PDF (week 12/ 15/06/2022)

Colored:

fig 18: final outcome colored in PNG (week 12/ 15/06/2022)

fig 19: final outcome colored in PDF (week 12/ 15/06/2022)

Sticker pack download link:

https://t.me/addstickers/hoooliday

---

FEEDBACKS:

Week 13 (22/06/2022):

General feedbacks (final outcome): Good with it.

Week 12 (15/06/2022):

General feedbacks (1st attempt digitized sticker): The lines around it does work to express the happy but need to do it in more spaces as well as it has some unnecessary spaces between the texts.

Specific feedbacks (1st attempt digitized sticker): The speech bubble shape advisable to be symmetrical and the angle of the speech bubble need to be more downwards. The gap between the texts are not beneficial. The lettering is good but the color of the sticker is black, it can be reverse to the bubble will be red and the words can add a white outline on it. Make sure the Taylor's mark is stand better within the bubble. Hence the line outside the bubble should be avoid as in the end the sticker need to add a white outline of the sticker.

Specific feedbacks (2nd attempt digitized sticker): The lines at the right should draw it everywhere, so overall will look more similar. The Taylor's mark can make it as white in color so it does not blends in the same color background, can try to play with it to gel it with the words. Can add some little things on it to make the word pop out, adding shadows and highlights. The word "holiday" is too black can add some highlights on it.

Week 11 (08/06/2022):

General feedbacks (lettering sticker sketch): It does looks happy overall.

Specific feedbacks (lettering sticker sketch): The 3rd and 6th design looks generic, they don't really work for the sticker. The 1st design thinking idea is good but the visual doesn't convey that, can try go for replace it to a speak bubble. The 5th design has a little play in it but lacking of a good idea. The 1st design will be the most workable one to go with.

Specific feedbacks (2nd attempt sketch 1): Not necessary to add the burst at the left corner, and avoid using the existing typeface, try draw the texts out using brush tool. Add more speech bubble make it like so many people is talking. Next, the word "holiday" shape can be more organic in shape.

Specific feedbacks (2nd attempt sketch 2): The flags at the back does help in terms of communication. The overall sticker shape is not square, so there is so many negative spaces. 

---

REFLECTIONS:

Experience 

Before starting to sketch, I scrolled through some greetings sticker from online, and decided to use a rounded, happy-ish typeface. But I also try a few attempts, as lettering is to express the "happy" without using graphical elements. I did some mistakes at first, after receiving feedbacks from the lecturer, I made some new attempts. One of the biggest challenge for me in lettering is how to express the happiness on holiday using lines and strokes. I also found out the mistakes I made in common is too much unnecessary negative space. After a few attempts and opinions from the lecturer, it does helps me to understand the importance of it, and I still need time to improve this part.

Observations

I found out detailing is very important in lettering, and effective negative spaces also will helps sometimes. I realized the little lines, dots, shadows and highlight are really effective in terms of lettering. The detailing part also is very fun in the whole progress, the progress of lettering is quite different with task 3A, so at first my mindset haven't change yet, still stuck at the consistency and tidiness. Lettering is like all about fun, filling the negative space in an effective way, expressing the words with little details and colors.

Findings

I learnt about negative space and how colors effect the whole design. Even the smallest details can make a huge difference. I think designing is all about keep trying different ways, that's what actually make it fun, the progression is the fun part, seeing the design being more pop out/ three dimensional by adding the details on it.

---

FURTHER READING:

Week 10-13 (01/06/2022 - 22/06/2022) : <Thinking with Type by Ellen Lupton>

fig 20: Thinking with Type by Ellen Lupton book cover

The book is divided into three orderly sections called Letter, Text, and Grid.

fig 21: height

In the seventeenth century, attempts were made to standardize the measuring of type. 72 points equals to 1 inch.

fig 22: width

The letter's body and the space around it that separates it from other letters make up the set width. A typeface's fixed width can be altered by adjusting its horizontal or vertical scale. Select a typeface with the necessary proportions, such as condensed, compressed, or extended in order to avoid torturing the letterforms. 

fig 23: different typeface in same point size

The apparent scale of the letters is affected by variations in x-height, line weight, and character width. Hence, different typeface may have different size even they are in the same point size.

fig 24: big families

Many more weights and widths, including thin, light, black, compressed, and condensed, are frequently available in Sans-Serif families. In the 90s, century, many type designers created families that include Serif and San-Serif versions. 

fig 25: Las Vegas: Castaways

The diagram above shows drawing type in 2001 by Andy Cruz, Ken Barber and Rich Roat. It comes from a collection of digital fonts inspired by billboards in Las Vegas. Before the development of photo typesetting in the 1960s and 1970s, the majority of type was cast from lead. For the creation and manufacture of early digital typefaces, specific tools were still needed. Digital "type foundries",  frequently controlled by one or two designers, have begun to arise by the end of the twentieth century. Production of a typeface is an enormous task, it requires many phases of refinement.

fig 26: logotypes

In order to display an organization's name in a distinctive way, logotypes use typography or letters. Either pre-existing fonts or specially-drawn letterforms can be used to create it. A logotype uses letters to create a distinctive visual image, although some trademarks consist of an abstract symbol or a pictorial icon.

fig 27: Bitmap font

Bitmap fonts are built out of the pixels that structure a screen display. A predetermined number of rectilinear units that are either "on" or "off" make up a bitmap character. Scalable outline typefaces can be reproduced in high-resolution media. As the letters expand larger in a bitmap typeface, the pixels do not disappear.

fig 28: example of student work from Maryland Institute College of Art

A bitmap font prototype can be designed using grid of squares. Avoid making detailed "staircases", which are just curves and diagonals in disguise. 

"LETTERS GATHER INTO WORDS, WORDS BUILD INTO SENTENCES."

A continuous string of words is referred to as "text", as opposed to headlines or captions, which are shorter. A body of text is typically treated consistently by designers, making it look as a cohesive entity that is dispersed throughout the areas of a document. Although the goal of typography is sometimes defined as improving readability, one of design's most compassionate tasks is actually to aid readers in avoiding reading.

The typography designers' concerns not only the positive grain of letterforms, but the negative gaps between/ around them (spacing). Spoken language is regarded as a continuous flow with no audible gaps, despite the fact that we take the pauses between words for granted.