Typography - Final Project

14.6.2019 - 28.6.2019 (Week 11 - Week 13)

Abigail Bea Chong Ka Yee (0333966)

Typography 

Final Project - Typography: Expression, Hierarchy, and Composition

---

LECTURE NOTES
Lecture 11: Typography in different mediums
14.6.19 (Week 11)

For this week Mr Shamsul gave us our last lecture for this semester. Typography does not only exist on paper but on the multitudes of screens. The skills that typesetters and designers had were good typography and readability. Our experience with typography today changes based on how the page is rendered because typesetting happens in the browser.

Print Type vs Screen Type

Print type
It was designed intended for reading from print long before we read from screens. The designer's job was to ensure that the texts were smooth, flowing, and pleasant to read. The most common typefaces used for print were Caslon, Garamond, and Baskerville. Due to their characteristic which is elegant and intellectual whilst also being highly readable.

Screen Type
The typefaces used on the web are optimised and frequently modified to enhance readability and performance on screen. This can include a taller x-height, wider letterforms, more open counters, heavier thin strokes, and serifs, reduced stroke contrast, as well as modified curves and angles for some designs. Another major difference is that there is more open space where the typefaces are intended for smaller sizes. These factors serve to enhance readability in a non-print environment like the web, mobile devices, and even e-books.

Hyperactive Link/hyperlink
A hyperlink is a word, phrase or image that allows you to jump to a new document or a new section within the current document when the user clicks on the link. Moreover, hyperlinks are found in nearly all Web pages, allowing users to click their way from one page to another. Text hyperlinks are normally blue and underlined by default. Thus when you move the cursor over a hyperlink, the arrow should change to a small hand pointing at the link.

Font size for screen
Usually, 16-pixel text on a screen is about the same as text printed in a book or magazine; this purpose is for reading distance. When we were books closely or often only a few inches away they are typically around 10 points but if you were to read them at arm's length, it should be at least 12 points, which is about the same size as 16 pixels on most screens.

Lecture 12: No lecture
21.6.19 (Week 12)

---

INSTRUCTIONS

---

FINAL PROJECT

Week 11

For our final project, we had to express a social message typographically which is relevant to the campus community at Taylor's University. For example, it could be about littering, flushing the toilet or even be silent. Thus, we had to bring awareness to a certain statement or topic that we chose. It has to be in A3 size since we are designing a poster.

We could choose any statement we wanted but it had to be approved by Mr Vinod and Mr Shamsul. Some of the requires we have to follow are

• 3/4 should be occupied with the message you want to bring awareness to
• it has to be done in A3 portrait mode
• lines and dots are allowed as minor graphical elements
• images can be allowed but are limited

I had a perfect idea for this project which was to bring awareness to wash your hands. These are some of the inspirations/references I found online.

Fig 11.1 Inspiration/Reference #1

Fig 11.2 Inspiration/Reference  #2

Fig 11.3 Inspiration/Reference #3

Fig 11.4 Inspiration/Reference  #4

Fig 11.5 Inspiration /Reference #5

Fig 11.6 Main reference #6

The phrase I chose at first was just 'Wash your hands'. Which were pretty plain and boring because what comes after that? So I decided to have the statement as 'Wash your hands you filthy animal'; you filthy animal came from a quote from home alone the movie. Here are my sketches for the poster.

Fig 11.1 First sketch #1

Fig 11.2 First idea sketch #2

Fig 11.3 Second Idea sketch #3

Week 12

Initially, I went with this idea and digitalised it. But it did not look like how I wanted the hand to look with the letter h. The way I wanted to express the poster was not going well.

Fig 12.1 First idea I digitised

Then I moved on to the second idea which was to make the outline of the hand with words. So I started out with making the outline of the hands. And putting it onto the artboard and enlarging it.

Fig 12.2 Outline of the hands

I wanted to make the fingers using "3 hands" together. But it came out really weird like knots together so I changed that in fig 12.3.

Fig 12.2 The word "hand" written all over the hand

So I changed the words into filthy to follow my message I want to convey with the word hand on the wrist.

Fig 12.3 The word "filthy" on the palms and on the fingers but the word "hand" on the wrist

I added the soap and the background as yellow so it gives a good contrast with the words because it is in black.

Fig 12.4 The hands with soap and the yellow background

After I showed Mr Vinod he said there must be an easy way for me to convey my message instead of making it so complicated. He suggested that I should use the clipping mask tool for the words so it shows a clearer outline of the hands. So I tried this first but the outline of the hand did not show properly so I changed it to the same colour as the background. Thus I also added another layer of soap and made it a darker shade so it would look 3D.

Fig 12.5 With clipping mask for the hands and 3D soap without bubbles

In the process of making the word filthy and hands into jpeg with the yellow background.

Fig 12.6 The word filthy repeated many times

Fig 12.7 The word hand repeated many times

Here is after I masked it together with the outline of the hands. Moreover, I was also making the soap bubbles look 3D.

Fig 12.8 Making the bubbles of the soap look more 3D

I then chose to make the hands look more filthy using the Baskerville font. And the words "WASH YOUR" on top and YOU ANIMAL! as the bottom, so people will read it as WASH YOUR (flithy hands) YOU ANIMAL. But Mr Vinod advice that no one will read it like that so I keep the message at the bottom in the previous poster (fig 12.8).

Fig 12.9 Using a different font for the hands (before feedback)

After getting feedback from Mr Vinod he told me to change the font into what I first used in fig 12.8 and make the font size smaller; along with changing the message and put it at the bottom and enlarge the hands so the composition won't look so weird.

Fig 12.10 After getting feedback 

I then decided to make the hands look even more filthy using a darker shade of yellow. 

Fig 12.11 Adding another colour onto the hands

I then asked Mr Vinod if this was okay and he told me that my text in the hand needed to have the leading reduced with smaller point size. Thus I should move the hands and message higher to make a better composition.

Fig 13.1 Receiving feedback from Mr Vinod on messenger 

In these two pictures, I changed the font size into 35 and 25 points and I also enlarged the hand a little and moved it to the top with the words.

Fig 13.2 The font size in the hands are 35 points

Fig 13.3 The font size in the hands are 25 points

Moreover, I asked Mr Vinod which he preferred and he picked the font size 25 points which I agreed too.

Fig 13.4 The final outcome

The PDF format of my final outcome.

Fig 13.5 The final outcome in the frame

Fig 13.6 The final outcome in the frame on the wall

I then proceeded with the animation. I had two ideas in mind the first one was to make both of the hands move while the soap and bubbles change shape or moving only the right hand while making the soap and bubbles change in sizes. I made four attempts in making the animation look smooth.

Fig 13.7 The 18 artboards in total used to create all 4 animations

Here is the first gif where I made only 4 frames making the right hand move with the soap and bubbles changing shape.

Fig 13.8 The first draft 

In the second gif, I made both hands move but it looked kind of messy together so I moved on to the third and final outcome.

Fig 13.9 The second draft

In the third attempt, I actually repeated the original image first and changed the images between making the hand move but keeping the way the hands moved the same whilst making the soap move and the bubbles change shape.

Fig 13.10 The third draft

I then attempted to make the final animation changing the last frame into a different movement.

Fig 13.11 The fourth draft

I noticed that the speed was quite fast when I exported it so I used 0.3 seconds instead of 0.2 seconds. 

Fig 13.12 The fifth draft

Mr Shamsul and Mr Vinod suggested that I should change the animation so that the hands move in a circular motion with the soaps and bubbles changing shape. This is the final outcome of the animation.

Fig 13.13 The final outcome

---

FEEDBACK

Week 11

Specific Feedback: 
Mr Vinod told me to adjust the kerning between my letter v and e in the word survived and he also said that I could make my font size than 72 points. For my final project, when I first showed our lecturers my idea, Mr Shamsul told me that the hands I made using the letter 'H' looks like a poster used for a kindergarten's toilet; have a complete sentence in (wash your hands). After going back two to three times, Mr Vinod said that I have a good base idea I just need a clearer type of expression to convey my social message properly. Thus he also told me to look at Saul Bass's drawn hands to figure out a way to make the letter 'H' and a hand appear cleary.

Week 12

Specific Feedback:
Mr Vinod told me that I had a week to come up with a better design than what I did for my current designs. After a few hours I created a better design and showed it to Mr Vinod he suggested that there should be an easier way to make the outlines for the hands; to use clipping mask for a more effective way to create the outline; he also said that if I have enough time look at the details of the hands try to use lines to create the knuckle/bumpy effect to make it look more realistic; to use a condensed and solid typeface to make a bumpy effect on the hands. 

Specific Feedback on the 25th of June
Mr Vinod told me to make the font size of the hand smaller; get rid of the awkward words on the top and bottom and put the whole phrase "Wash your hands you filthy animal!" at the bottom of the hands; enlarge the hands and the soap so the composition looks better.

Specific Feedback on the 27th of June
Mr Vinod told me to move the hands and the message a little bit higher to give an overall better composition. The leading and font size should be smaller in the text of the hands.

---

REFLECTION

Experiences

Week 11: I am excited about how my poster design will turn up to be once I will finish it. Moreover, I had a hard time figuring out how I wanted to design the poster even with a statement. I chose washing hands because even though it is shown in kindergartners sometimes even adults forget/don't wash their hands.

Week 12: I had a hard time figuring out how to create another design because my other idea wasn't working as I digitalised it. When I had the idea in my mind it came out looking really weird because I could not get the outline of the hands to show properly but Mr Vinod suggested that I use the clipping mask to make the words stand out more and also visually pleasing. I was glad for the feedback that helped me make the poster look better.

Observations

Week 11: I noticed that I had many ideas on how I wanted to design my poster but I could not find a way to put them visually pleasing together.

Week 12: I was struggling with how I wanted to express washing your hands with a limited amount of graphic elements. Furthermore, I noticed that some people's ideas got approved while others had to try quite a few times before getting it right.

Findings

Week 11: I found myself looking at other people's approved sketches to get a clearer idea of how I wanted to express my statement. Thus sketching out my ideas have helped me a lot in creating the poster that I wanted.

Week 12: I learned that I can get stressed easily if I want to create a last minute idea and that it would be easier for me to sketch it out before digitalising them. But once I got that down, the digitisation was slightly easier, even though it took more time.

---

FURTHER READING

1. HOW TO MAKE AN EYE-CATCHING AND EFFECTIVE POSTER by Kimberly Mak
14.6.19 - 21.6.19 (Week 11 - Week 12)

The first thing you see when clicking on the article

Reading this website helped me learn how to gather important tips to design a poster. Information is key, knowing that if we want to present our information in any way it must be clear, clean and concise. Headlines are the first piece of information to capture the audience's attention; headlines should be short and concise. Next, make sure to only add the essential details to your poster; supporting the poster's main objective without making the central message blurred. Moreover, typography hierarchy is as important because it helps the audience to understand and retain the flow of information easily. Lastly, it is essential to make the poster stand out because there is a chance it will be chosen to be displayed on a bulletin board or published online. Besides that, there are limits to a person's attention span.