Advanced Typography - Final Project

21/10/2019 - 18/11/2019 (Week 9 - Week 13)
Vun Wan Min (0334263)
Advanced Typography
Final Project: Design, Exploration and Application

LECTURE NOTES


INSTRUCTION



Final Project: Design, Exploration and Application

Week 9

Ideas: 
1. Improve sign language typography
Fig. 1.1: American sign language (Idea 1)
Making illustrations that improve the typeface for the American sign language to easily identify the gesture.

2. Improve Messenger sticker (Hugs and Kisses)
Fig. 1.2: Messenger stickers "Hugs and Kisses" (Idea 2)
The typefaces on the stickers bothers me because it does not represents the words.
To improve it, my idea is to create animated images that improve Messenger stickers' typeface for it.

3. Improve game title (CookieRun)
Fig. 1.3: Game Title "CookieRun" (Idea 3)
Creating a typeface that is based on the game while also improving the typeface because the typeface on the title, which is "CookieRun" does not fit well to me.

Week 10

Continuing with idea 2.
Fig. 2: Sketches
Fig. 3.1: Adobe Photoshop
At first, I was using Adobe Photoshop to draw the stickers because it would be convenient to make the animated GIFs with it. But the programme was slowing down, so I switch to another drawing programme, which is MediBang Paint Pro.
Fig. 3.2: Drawing the stickers
Fig. 3.3: Animating the stickers
I use Adobe Photoshop to make the animated GIFs. I then repeat the processes that made the it.
These are the frames that made the animated GIFs.
Fig. 3.4: Frames (Hugs!)
Fig. 3.5: Frames (Hearts)

Fig. 3.6: Frames (You are loved) 
Fig. 3.7: Frames (So Sorry)

Week 11
Fig. 4.1: Static sticker (Thinking of you)
Fig. 4.2: Animated GIF (Thinking of you)
Fig. 5.1: Static sticker (Hugs!)
Fig. 5.2: Animated GIF (Hugs!)
Fig. 6.1: Static sticker (Hearts)
Fig. 6.2: Animated GIF (Hearts)


Week 12
Fig. 7.1: Static sticker (You are loved)
Fig. 7.2: Animated GIF (You are loved)
Fig. 8.1: Static sticker (So Sorry)

Fig. 8.2: Animated GIF (So Sorry)
I made more after Mr Vinod's feedback.
Fig. 9.1: Process (Good Vibes)
I used the mesh transform tool to make to make the waves.
Fig. 9.2: Frames (Good Vibes)

Fig. 9.3: Static sticker (Good Vibes)
Fig. 9.4: Animated GIF (Good Vibes)
Fig. 10.1: Frames (Welcome)
Fig. 10.2: Static sticker (Welcome)
Fig. 10.3: Animated GIF (Welcome)


Fig. 11.1: Process 1 (Kisses)
 I searched for references on lips and drew it.
Fig. 11.2: Process 2 (Kisses)
For animating, I play with the opacity to make it faded.
Fig. 11.3: Frames (Kisses)
Outcome:
Fig. 11.4: Static sticker (Kisses)
Fig. 11.5: Animated GIF (Kisses)
Fig. 12.1: Frames (Sorry for your loss)
Fig. 12.1: Static sticker (Sorry for you loss)
Fig. 12.2: Animated GIF (Sorry for your loss)
Fig. 13.1: Frames (Love and Hugs)

Fig. 13.2: Static sticker (Love and Hugs)
Fig. 13.3: Animated GIF (Love and Hugs)
I have refined the first 5 animated GIFs (Fig. 4.2, 5.2, 6.2, 7.2, 8.2), since "So Sorry" looked too happy and the rest was not smooth enough.
These are the refined versions of the animated GIFs:
Fig. 14.1: Frames Refined in Photoshop (Thinking of you)

Fig. 14.1: Animated GIF Before (Thinking of you)
Fig. 14.2: Animated GIF After (Thinking of you)
Fig. 15.1: Frames Refined (Hugs!)

Fig. 15.2: Animated GIF Before (Hugs!)

Fig. 15.3: Animated GIF After (Hugs!)
Fig. 16.1: Frames Refined (Hearts)

Fig. 16.1: Animated GIF Before (Hearts)

Fig. 16.2: Animated GIF After (Hearts)
Fig. 17.1: Refined Frames (You are loved)

Fig. 17.2: Animated GIF Before (You are loved)

Fig. 17.3: Animated GIF After (You are loved)
Fig. 18.1: Frames Refined (So Sorry)
Fig. 18.2: Animated GIF Before (So Sorry)

Fig. 18.3: Animated GIF After (So sorry)

FEEDBACK

Week 9:
Specific Feedback:
For project 2, Mr Vinod told me to put more effort on my illustration.

Week 10:
I showed Mr Vinod my ideas in Messenger.
Messenger Feedback:
This seems doable. Similar to type expression exercise: static idea then animate.

Week 11: 
Specific Feedback:
Mr Shamsul and Mr Vinod told me to make more than 5 animated gifs in an appropriate number of the stickers.

Week 12:
I showed Mr Vinod my 5 animated GIF (Thinkg of you, Hugs!, Hearts, You are loved, So Sorry) in Messenger.
Messenger feedback:
So sorry looks happy. Refine these more.

Week 13:
Specific Feedback:
The work is sufficient and appropriate. Your eporfolio is complete. However you have showed a minimun amout of process and research for the project.

Week 14:
General Feedback:
In the exercise "Type and Play", we have to upload the pictures of the object we extract from to form the letter, so our viwers could compare them. In project 2, we have to include a screen grab of the microsite and link.

REFLECTION

Experience:
Week 9: Making poster is not easy.
Week 10: Some static stickers does not bring out their uniqueness.
Week 11: Making animated gifs are challenging and fun.
Week 12: Struggling with other assignments.

Observation:
Week 9: Black and White is gothic.
Week 10: The title "CookieRun" does not look like the theme of the game.
Week 11: The stickers are about affection.
Week 12: Animations have a lot of frames to make it looked like it have smooth movements.

Finding:
Week 9: A poster needs to have the right point size to read information.
Week 10: Sign language have their own language such as English, Spanish, Mandarin and so on.
Week 11: Colour bring more liveliness.
Week 12: My laptop did not crashing after using another drawing program.

With the heavy workload I have, I should have made a to-do list and not be confused of what to do. I had made poor time management these weeks and I plan to do better.

FURTHER READING

4/11/2019 (Week 11)
Kinetic Typography: 42 Must-See Examples by Aaron Kitney
Fig. 19.1: https://www.creativebloq.com/typography/examples-kinetic-typography-11121304
Fig. 19.2: Screenshot of Example 1

There were a lot of examples of animated typography. It was interesting to look at and I got some inspirations from the videos and have it in my animated GIFs.

16 Clever Typographic Animations That Visualize The Meanings of Various Words by Mindaugas Dudenas
Fig. 20.1: https://digitalsynopsis.com/design/type-in-motion-typography-animation/

Fig. 20.2: Screenshot of Example 2
I found it interesting because of the creative ways the designer did with the type. It also gave me inspirations for my animations.

Comments

Post a Comment

Popular Posts