Typography - Final Project

June 13, 2019

Typography - Final Project

14/6/2019 - 28/6/2019 (Week 11-13)
Chan Qian Hui (0334447)
Typography
Final Project - Expression, Hierarchy and Composition

LECTURE NOTES

Lecture 11 : Typography in different medium
14/6/2019 (Week 11)
For this week, Mr Shamsul conducted the lecture covering about typography in different mediums. In the past, typography was only in papers. Thus good typography and readability were the result of skilled typesetters and designers. Today, typography exists not only on paper but on a multitude of
screens. Thus, our experience of typography changed as well.

Type for print :
Primarily, type was designed intended for reading from print. It’s the designer’s job to ensure that the text is smooth, flowing, and pleasant to read. Typeface such as Garamond and Baskerville are good for prints because they are elegant and highly readable in set at small font size.

Type for screen :
Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. 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. Besides that, factors such as pixel differentials between devices also affect the typeface.

Static Type :
Static typography has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties. This

Motion Type :
Modern media and technology offers typographers to animate their typography, creating fluid and motion to their letterforms. Typography were brought to life through animation, motion graphics particularly the brand identities of film and television production companies, increasingly contain animated type. Other medias such as music video, advertisement and title screens also animates the typography to increase the attention of audience and enhance their viewing experience

Lecture 12 : No lecture
21/6/2019 (week 12)
No lecture was conducted.

INSTRUCTION

FINAL PROJECT : EXPRESSION, HIERARCHY AND COMPOSITION

For our final project, we were required to use our knowledge and experience gained in the Exercises, Project 1 and 2 to apply into our final project. We were tasked to express typographically a social message relevant to the campus community at Taylor's University and then print out our final work in A3 sized poster.

Initially I had a few ideas in mind which are :
1. Crowded : Don't squeeze the elevator.
2. "I'm okay" It's okay to not be okay, talk it out.

I couldn't choose one to work with and thus I decided to work with both ideas and choose one final one later.

Idea A : Crowded : Don't squeeze the elevator.

The reason why I chose don't squeeze the elevator as my social message because students often cramp into an elevator and it makes it really suffocating and cramped inside an elevator.

My main idea for this statement is that I wish to cramp the letters "crowded" in an elevator and the statement "Don't squeeze the elevator" will be small and squeezed in between the letters. This is to show the feeling of how crowded an elevator is usually in Taylor's University and hope that it would let people understand and take note of it.

Sketches :

Fig 1.0 Composition Sketch for Idea Crowded

After getting the sketches done, I started working on Adobe Illustrator. I started by placing the letters close together in a random structure to create a crowded situation and using the elevator doors to create a really cramped environment.

Fig 1.1 First attempt of Crowded

The two grey rectangles at the side are supposed to be the elevators door, but they don't really look like it, so I decided to add some changes to it.

Fig 1.2 Second attempt of Crowded

I added a reflective line at the doors of the elevator, and the elevator seems more realistic compared to before. After showing to Mr Vinod, he approved my design but he asked me to changed the statement because it doesn't really make sense.

Thus, I changed it to "Don't crowd the elevator". He also said I could add one more colour into the artwork and I added a yellow chat box which fits in the white space of the artwork.

Fig 1.3 Third attempt of Crowded

Besides that, I also adjusted the letter "E" and "D" at the bottom because it was stuck together making it slightly difficult to be read.

Fig 1.4 Fourth attempt of Crowded

Although Mr Vinod approved my work, I felt that the overall design doesn't feel crowded enough because of the white spaces in the artwork, thus I started shifting the letters and trying to add effects to reduce the white space and enhance the crowded feeling of the artwork.

I started by attempting to shift the letters of my artwork.

Fig 1.5 Fifth attempt of Crowded

The composition looks nice, but the crowded feels like it's falling down instead of cramped together while standing. So I changed it and attempted to add gradient to the background to reduce the white space.

Fig 1.6 Sixth attempt of Crowded

After adding gradient, the background was too dark and it makes the letters to hard to read. Beside's that, the whole artwork becomes too dark and the concept is scary. Thus I changed it and added shadows to the letters.

Fig 1.7 Seventh attempt of Crowded

I was pretty satisfied with the shadow effect as it was clean and reduced the white space, it also gave a 3D effect to it which shows space inside the elevator, thus I showed it to Mr Vinod to see whether if I could improve on anything else.

The feedback which I gotten from Mr Vinod was that instead of a solid grey colour, I should try to change it to lines or dots half tone as shadow as it will be more interesting.

Fig 1.8 Eighth attempt of Crowded

Fig 1.9 Final composition (Crowded : Don't crowd the elevator)

Both of the designs were approved by Mr Vinod, but I personally preferred the dots halftone, so I chose the dots halftone as my final design for Idea A.

Idea B : "I'm okay" It's okay to not be okay, talk it out.

I wanted to create a message for the students who are facing mental issues in Taylor's University. So I did some research and decided to go with the statement "I'm okay" It's okay to not be okay, talk it out. Because students often hide their emotion. The concept for this design is that the top part is what the students say but their inner thoughts just compile, overflood and sink to the bottom.

Sketches :

Fig 2.0 Composition of sketches for Talk it out

Fig 2.1 First attempt of Talk it out

After showing it to Mr Vinod, he said that the composition needs to be improved and the idea isn't very interesting. Besides that, Mr Shamsul said that my main statement which is "Talk it out" should be the largest as it's the main message which I want to convey.

Thus I restarted my whole design and create a brand new design.

Fig 2.2 Second attempt of Talk it Out

The composition for this design is much neater and simpler, which focuses on "Talk it out" and the mouth and teeth at the bottom is speaking out their concerns at the chat box in the center.

Fig 2.3 Third attempt of Talk it Out

I changed the colour to red and added shadows, because I wanted the words to pop out and attract the attention of the students when they pass by, but I felt that it was still quite empty so I added a few words at the side.

Fig 2.4 Fourth attempt of Talk it out

I added "you matter." and "Taylor's Counselling Center" in the artwork to give a message that they could visit the counselling center after reading this message.

Final Chosen Artwork :

I chose Idea A as my final artwork because the overall design and concept is much more interesting and obvious. Besides that, the elements are simple and not too complex to be read thus I decided to choose this as my final artwork.

Fig 3.0 Final chosen artwork (Crowded : Don't crowd the elevator)

Fig 3.1 Framed Final Composition Artwork (Crowded : Don't crowd the elevator)

Animation of artwork:

For my animation, I wanted to enhance the crowded element of the words inside the elevator so I shifted the words to vibrate at it's own position to show the element of tight and crowded.

First attempt :

Fig 4.0 First attempt of GIF Animation

The squeezing effect of the letters is there but the whole animation still feels awkward and the animation for the statement is not clear enough and I want to change it so it slowly appears.

Second attempt :

I added a few extra animation such as the door closings and reopening and the chat box fading in. I realized that the animation is quite fast and still not smooth enough.

Fig 4.1 Second attempt of GIF

The movement of the letters are too random and the light on the elevator shifted. Besides that, the light rays on the elevator doors are not consistent as well.

Third attempt :

For the third attempt, I decided to focus on my animation flow and improve on it. I worked on the motion and direction for each of the letters first.

Fig 4.2 Practicing of animation of each letters

Then after that, I started working on the closing and opening of the elevator doors, to ensure the smoothness and consistency of light rays.

Fig 4.3 Practicing of animation of elevator doors closing and opening

After that, I combined both of the techniques and worked on my animation.

Fig 4.4 Third attempt of animation

After showing to Mr Vinod, he commented that the animation does support the message which I'm trying to convey which is crowded, but there are still room of improvement. I wasn't very satisfied with the animation as well but it feels weird, so I decided to make some changes to it.

Final attempt :

For the final animation, I used the similar techniques from my previous practices but this time I'm going to fully close my elevator doors. So the concept is an elevator opens but it's so crowded that you can't enter the elevator.

Fig 4.5 Process of creating animation in Adobe Illustrator

Fig 4.6 Process of creating animation in Adobe Photoshop

Fig 4.7 Final animation GIF (Crowded : Don't crowd the elevator)

FEEDBACK

Week 11 :
General feedback :

For our final project, Mr Vinod said we could either use our own typeface or we could use back the typeface given by him. The final project is in A3 size, Black, white and only one extra colour can be added.

Specific Feedback :

For the final project, Mr Vinod said he didn't understood my context. Besides that, I wasn't doing as what Mr Vinod wanted for the project.

Week 12 :
General Feedback:
Mr. Vinod told us to buy a frame from IKEA and to print our final design. He said we are not allowed to frame our artwork before showing it to them. Besides that, he told us to ensure that our final project e-portfolio is complete and updated because he would assess it on week 13.

Specific Feedback :
For Idea A : Mr Vinod commented that it's nice but I need to change the statement for "Don't squeeze the elevator". After I added shadows, Mr Vinod commented that instead of using grey solid colour, I could use grey halftone dots or lines. The lines should be 0.5 pt.
For Idea B : Mr Vinod commented that the positioning and composition of the words should be adjusted and it doesn't look very exciting.

Week 13 :
General Feedback :
Mr Vinod told us to start working on our final compilation and reflection, putting only our final work and ensure that we reflect about our learning and eportfolio. We should be honest and if we feel like we are not satisfied with our work, we can redo it by this week and show it to Mr Vinod and Mr Shamsul to get remarked. Mr Vinod also told us to ensure that our blog is all consistent, the spacing, alignment and gaps, make sure that the information is visible.

Specific Feedback :
Mr Vinod commented that my animation does support the message which I want to convey but there is still room for improvement.

REFLECTION

Week 11 :

Experience : I was really confused in the beginning because I didn't knew the limit of the graphical content which I can include in the artwork. Besides that, I was really stressed and lost because I couldn't decide on one final statement and in the end I was working from different concepts and multitasking while focusing on just one work.
Observation : I observed that my classmates didn't quite understand what they should design for the final project. I observed that I was moving from different statements the whole time because I couldn't decide on one thing and I ended up not making any progress
Findings : I found out that it is important

Week 12 :

Experience : I was really stressed and lost because I couldn't decide on one final statement and in the end I was working from different concepts and multitasking while focusing on just one work. I didn't knew how exactly I should design my work thus I ended up changing my artwork.
Observation : I observed that my classmates were focusing too much on graphical content and they didn't make use of the typography as much as they should. The typography element became more of a description instead of the main point of the artwork. I also realized that Mr Vinod emphasised on this point to most of the students in class.
Findings : I found out that composition is really important because elements of the things inside an artwork mainly affected by the way you place it. Besides that, I also realized that if we know what we want to do and be firm about our decision, we can focus more on our work and not stray away from it so easily. I should learn from it and improve myself for further works in the future.

Week 13 :

Experience : I was really stressed and panicked because something went wrong with my animation. I imported the files but the software hanged, and the animation just won't move. I couldn't progress at all because no matter how much I imported the files in again, the same thing happens all over again.
Observation : I observed that I was too worried about the little details in my static artwork and I couldn't focus on my animation. I also found out that when my animation didn't go well I couldn't progress at all and I was just stuck even though the deadline is tomorrow.
Findings : I found out that when I attempted to animate the artwork using After Effects because Photoshop isn't working. The animation was too fluid and the really rough motion which I wanted wasn't able to be shown in After Effects.

Search This Blog

Qian Hui's Design Portfolio