Typography / Project 3B : Type Design & Communication

on

11.05.2021 - 11.19.2021 (Week 11 - Week 13)
Audrey Gracia Djohari / 0348120
Typography 
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Task 3B: Type Design & Communication


POSTS LINKS


LECTURES

* Click here to see the previous Lectures

WEEK 10:

This week, we were given a new task. We were to make a greeting sticker that will be used in Telegram App. As the final result, there should be a static sticker and an animated sticker. As the first step of doing our Task 3B, Mr. Vinod gave us many festive greeting options in the Google Sheets. 

I chose "Happy Typography Day" because I think it's unique. And now that I've understood many things about Typography, I'm pretty confident in creating the visualization of the word 'typography'.

Fig. 1.0 : Festive Greeting Options

Mr. Vinod also showed the sticker he made so that we had a clearer vision of what we should do. Several senior's stickers were also shown.

Fig. 1.1: Mr. Vinod's Sticker Example

E-portfolio submission must include:
  1. Visual research
  2. Test selected greeting using all 10 typefaces (which works) 
  3. Sketching
  4. Digitisation
  5. Determining colour 
  6. Eye candy / Bling 
Mr. Vinod wanted us to provide the link to sticker download. And we need to maintain a final submission compilation toward the end of the post (before feedback). Lastly, indicate how many hours spent (in total) for this task (just before the feedback section).


WEEK 12:

At the end of today's lecture, Mr. Vinod ensured us to submit these formats on submission day:
  1. BW option (2048px)
  2. Colour option (2048px)
  3. PDF of (BW & Colour)
  4. Gif Sticker Animation (1024/ 800px)
  5. Screen Grab
The submission was due on Thursday, November 18th 2021 at 11.59 PM (MYT)


INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/12VYi4ScPBFSzSMpoNWi98zt0tGEshts3/preview" width="640" height="480" allow="autoplay"></iframe>

With the knowledge and experience gained in the Exercises, Project 1 and Project 2, synthesize and apply the learning in the following tasks: Your task is to express typographically a social message, greeting or the like, that is relevant to the campus community at Taylor's University or society at large.
  1. Set a margin. Create columns and rows.
  2. Choose an appropriate typeface from the 10 given
  3. Format the text while considering the point size, line length, alignment, ragging and tracking.
  4. Save as PNG (without background and with a 7pt whiteoutline), PDF, upload to G-Drive and embed onto e-portfolio.
  5. Screen grab your phone with the sticker sent.
You may use minor graphical elements or visuals to aid in your message and design. You may use the appropriate colour schemes after getting the black and white version approved. Ensure that the expression occupies the space and is legible and readable for its intended use. Upon completion of the designed sticker, selected stickers will be used for social platforms Telegram/WhatsApp. Design an
attractive, functional, and visually impactful sticker. You may use Adobe Illustrator and Photoshop for the task.

Upon completion of the static sticker, you will be required to animate the message. The animated version (512 px width, at 72 dpi) will be used on social platforms like Telegram/WhatsApp. Send your sticker .png file to @stickerator bot on Telegram if you have issues uploading your sticker.


PRACTICAL
 
- Task 3B: Type Design & Communication -


WEEK 10:

- Research

 I found these stickers from Pinterest. I love Reference #1's color palette and the design made me want to use the stickers as often as I can. They radiate positive feelings and the designs are neat and simplified. They look modern and each design represents the meaning. And I could see that all the stickers from both references use bold texts, making them easy to read and eye-catching.

Fig. 2.0: Sticker Reference #1

Fig. 2.1: Sticker Reference #2

I also found this image that shows the anatomy of type characters that gave me an idea for my sticker design. I also did some research on typographic symbols so that I could use them correctly as my design elements.
Fig. 2.2: Typographic Anatomy

Fig. 2.3: Typographic Symbols

Mr. Vinod said that it's better to test my selected festive greeting using all the 10 typefaces to see which type is the most suitable. I found this very helpful as I could compare the type's character and style. I eventually choose ITC Garamond Std (Condensed Bold) because it has a beautiful curves and stroke which represent the beauty of typography.
Fig. : The 10 Typefaces Test



WEEK 11:

- Idea Exploration & Sketches

I managed to make 5 drafts for this task. 

#1 and #2 Draft
The first and the second sketches were inspired by cut-out magazine letters which is a popular design in the 2000s. I personally like these sketches the most because I could use many typefaces. I could imagine the letters's font keep changing  and changing for the animation.

#3 and #4 Draft
These designs show the x-height, baseline and the cap line that are very important in understanding the typographic discipline. I think these lines are very iconic and I thought about it when I heard the word typography.

#5 Draft
The fifth sketch though (the bottom one), I honestly rushed this one a bit because I didn't have enough time to finish it. For this sketch I only added the pilcrow (¶) to replace the 'T' in typography. And I planned to show the parts of the letters using different colors (like the bowl, the ascender, descender, tail etc.). I believed this design could turn out well if I use the right color scheme.


Fig. 3.0: Sketches of The Idea Variations, 11.04.2021

Surprisingly, when Mr. Vinod saw my sketch, he immediately pointed out the pilcrow I used. And he liked my fifth design more compared to the other. He told me to use other typographic symbol in the design. So I decided to go with the fifth design.

- Digitization Process

I proceed the design in Adobe Illustrator. After trying all the 10 typefaces, I decided to use ITC Garamond Std (Ultra Condensed) as it looks balanced and pretty when I combined them with the typography symbols.


Fig. 4.0: Creating the B&W Version in AI, 11.06.2021

Fig. 4.1: Creating the B&W Version in AI, 11.06.2021
Fig. 4.2: Design Process, 11.06.2021

Fig. 4.3: Layers in AI, 11.06.2021

Fig. 4.4: Coloring Process, 11.06.2021

After I was finish with the whole design, I added the 7 pt white outline to every design as instructed in the MIB. Lastly, I added the Taylor's logo at the top.

Fig. 4.5: Adding The White Outline, 11.10.2021
Fig. 4.6: Adding Taylor's Logo, 11.10.2021

WEEK 12:

- Final Design Color Options

The image below is my final B&W design. And here are the design elements breakdown:
  • Typeface: ITC Garamond Std - Ultra Condensed
  • The Arrows: Indicating the x-height and the character height.
  • The Pilcrow: Also called as the paragraph mark (or sign or symbol), paragraph, or blind P, is a typographical character marking the start of a paragraph. In this design, it replaces the letter 'T".
  • The >> symbol: It is the tab symbol.
  • The - symbol: In computing and typesetting, a soft hyphen or syllable hyphen, abbreviated SHY, is a code point reserved in some coded character sets for the purpose of breaking words across lines by inserting visible hyphens.
  • The • symbol: An interpunct, ·, also known as an interpoint, middle dot, middot and centered dot or centred dot, is a punctuation mark consisting of a vertically centered dot used for interword separation in ancient Latin script.
    • Fig. 5.0: B&W Final Design, 11.11.2021

I did not use any gradients because I think the overall design is crowded enough, adding gradients will only make it too complicated. I experimented with different color palettes and here are the variations:

Fig. 5.1: Colour Option #1, 11.11.2021

Fig. 5.2: Colour Option #2, 11.11.2021

Fig. 5.3: Colour Option #3, 11.11.2021

- Making The Stickers in Stickers Bot

To determine which color palette was the best, I uploaded them in Telegram via @stickers which is an official Telegram bot that converts files into Telegram stickers. I had difficulties in uploading the files when  first tried it. Later I found out that one of the sides of my design needs to fit into 512 x 512 px square, if not, the files are invalid. I also tried exporting the files several time until I found out that it should be exported with 72 ppi in order to have the right size.

Fig. 6.0: Making The Stickers using @stcikers bot, 11.12.2021

Fig. 6.1: Uploading the Stickers in Telegram, 11.12.2021


- Final Static Sticker

Based on week 12's feedback, I chose #1 color option as my final submission. The reason behind it is because the colors go together harmoniously. The East Bay blue color makes the letters pop pop up.

Fig. 7.0: Color Palette, 11.12.2021

Fig. 7.1: Final Static Sticker, 11.12.2021

WEEK 13:

- Animation Process

For the animation part, I did it using Adobe After Effects. I used this app for the first time last week, so I've known a few things about using AE. I animated the x-height arrows using 'height scale' that can be found in 'Effects'. I also animated the tab symbol by moving its position and adjusting its opacity. 
Fig. 8.0: Importing AI files to AE, 11.18.2021

Editing the animation did not take too much time, in fact I was quite surprised of how fast I finished it.  However, the exporting part was not easy at all. At first, I tried following Mr. Vinod's instruction to export the animated sticker from this link: https://core.telegram.org/animated_stickers?fbclid=IwAR1-NBL1V12UW4TRctr2daKWAlQsPCVCYhdHM3oiQSM7jOmbipO4579t_qk. But my laptop didn't let me install it, and it said that the developer of this software was not verified. I've tried several other things to download it but everything failed. So I didn't manage to upload my animation in Telegram.


Fig. 8.1: Technical Requirements in Making An Animated Sticker


Fig. 8.2: Problems in Downloading ZXP Installer

Moving on, I proceed to making the animation in the form of GIF. I watched several tutorial videos on Youtube and I learned that to make a GIF, I must export my After Effects file (MOV) into Photoshop. Then, I could export it as GIF.

It took me nearly 2 hours just to figure out how to export the video in MOV format with the transparent background from AE. And when I managed to do it, I found out that the file cannot be imported to Photoshop. Here's the reason why: I use 2020 M1 Chip Macbook Air. And turns out there's no Timeline feature in my Photoshop. Photoshop recently become M1 native but not all features are working yet, and Timeline is one of them.  So I had no choice to use Time Frame which is not as smooth but I hope it's good enough. I couldn't believe there were so many roadblocks in exporting my file. But I'm also relieved that I managed to finished it on time for submission.

Fig. 8.3: The Explanation for My Missing Photoshop Timeline

Eventually, I exported my After Effects animation as a PNG sequence and created 57 frames in Photoshop. The animation outcome can be found in the final outcome compilation.

Fig. 8.4: Creating GIF in PS, 11.18.2021

- Final Outcome Compilation

Fig. 9.0: Final B&W in PNG, 11.18.2021

Fig. 9.1: Final Color Option in PNG, 11.18.2021


Fig. 9.2: Final Outcome in PDF, 11.18.2021

Fig. 9.3: Animated Final Outcome in GIF, 11.18.2021

Fig. 9.4: Screen Grab of The Final Sticker in Telegram, 11.18.2021

Sticker Download Link: https://t.me/addstickers/HTD2021
Hours spent on this task: ±20 hours

FEEDBACK

WEEK 11: 

General Feedback
Don't use too much graphical elements (only around 15%), the typography should be the main focus . Utilize the usage of the space (square) so the sticker will look nice in Telegram.

Specific Feedback
Mr. Vinod said the pilcrow is nicely used. The only problem is for me to think of how to fit the words in the square. It's important to maximize the use of the square frame. He also suggested me to use all the different typographic characters (the dot, flase line break, tab, etc.)

WEEK 12: 

General Feedback
Focus on the type, and don't use to much graphical elements. Make sure to loopthe animation. And check trxxah's blog for the submission format.

Specific Feedback
Mr. Vinod said that my work was good enough for animation and he told me to go with my preferred option.


REFLECTION

Experience
Overall this was a fun project because I could learn sticker making which is a form of design that I use almost everyday. However, it was not as easy as I expected it to be. Although the design process was pretty fast (Mr. Vinod approved immediately), I still experienced several difficulties in using the software (especially exporting the files in After Effects and  Telegram). It was very challenging when I tried resolving the technical problem. But it felt good when I managed to use all of those Adobe softwares which are super complicated.

Observations
I observed that this task gives more freedom for me to explore the design elements' placement, color, type expression and animation. I also learned how to maximize the use of space and create a small but communicative design. Turns out designing a sticker from scratch is not a simple task at all, and the process really pushed me hard in exploring the Adobe softwares.

Findings
I found that typography is all about communication. And it takes creativity, sensibility and deliberation in utilizing a small design and making sure it's communicating effectively and at the same time looking aesthetically pleasing. And I found that sometimes technical problems cannot be avoided, and the only thing that I can do is to move on and find another way out.


FURTHER READING

- Form and communication (2015)

Fig. 10.0: 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 6: The Typographic Message
  • As a dynamic representation of verbal language, typography must communicate so that the receiver of a typographic message clearly and accurately understands what is in the mind of the transmitter. 
  • Typographic signs can be manipulated by a designer to achieve more lucid and expressive typographic communication.
  • Signs operate in two dimensions: syntactic and semantic. When the mind is concerned with the form of a sign, it is involved with typographic syntax. When it associates a particular meaning with a sign, it is operating in the semantic dimension.
  • All objects in the environment can potentially function as signs, representing any number of concepts: a smog-filled city signifying pollution, a beached whale representing extinction, and confetti implying celebration—each functions as a sign relating a specific concept.
  • Simple syntactic manipulations, such as the repetition of letters or the weight change of certain letters, enable words to visually mimic verbal meaning.
  • Effective typographic messages result from the combination of logic and intuitive judgment. Only the neophyte approaches this process in a strictly intuitive manner; a purely logical or mechanical procedure undermines human expression. Keeping these two extremes in balance requires the use of a functional verbal/visual vocabulary capable of addressing a broad spectrum of typographic communication.
  • Typographic signs are both verbal and visual. The associations formed between the verbal and visual attributes are verbal/visual equivalencies, which are found in a variety of configurations. 

Fig. 10.1: Verbal & Visual Equations, Pg. 117

- Vignelli Canon on Design

Fig. 10.2: The Vignelli Canon (2010) 
Reference:
Massimo, V.
(2010). The Vignelli Canon
Baden, Switzerland: Lars Müller.

Pg. 32: Equity
  • The desire of change merely for the sake of change is a very wrong motivation. Many companies asked designers for a new logo design in hopes to refresh the company's position in the marketplace.
  • A logo gradually becomes part of our collective culture. When a logo has been in the public domain for more than fifty years it becomes a classic, a landmark, a respectable entity and there is no reason to throw it away and substitute it with a new concoction, regardless of how well it has been designed.
  • The notion of a logo equity has been with us from the very beginning of time. When we were asked to design a new logo for the FORD Motor Company, we proposed a light retouch of the old one which could be adjusted for contemporary applications. 
  • There was no reason to dispose of logos that had seventy years of exposure, and were rooted in people’s consciousness with a set of respectable connotations.
  • What is new is NOT a graphic form but a way of thinking, a way of showing respect for history in a context that usually has zero understanding for these values.
Fig. 10.3: A Retouch of Lancia Logo


Pg. 78: Color

Generally speaking we do not use color in a pictorial manner but as a symbol or an identifier to convey a specific message. Therefore, we tend to prefer a primary palette of Red, Blue, and Yellow.
We have limited and articulated our palette to express the message in the clearest and most understandable way.
Appropriateness is one of the rules we use in choosing colors knowing how effective it can be to use the right color at the right time.


Fig. 10.4: The Use of Color in Typography

Comments

Post a Comment