Typography - Final Project

  15/10/2021 - 28/10/2021 (Week 8- Week 10) 

Ataka Lukman Hamzah / 0350012 
BDCM /  Typography
Task 3A
 

LECTURE

Lecture Notes can be seen on the Previous Task Blogs

INSTRUCTIONS


We are instructed to create a telegram/whatsapp sticker of a celebration day that we can choose. I chose typography day as my sticker idea. I directly jumped into Illustrator to create the design because I think that the design would have a clearer concept when created digitally rather than hand drawn sketches. In my ideas I wanted to incorporate things that I had learnt from these past semester regarding to typography. So, I added elements such as different typefaces, baseline, x-height, typing cursor, and letterform deconstruction.

Idea 2 Sticker Layout Exploration

Idea 3 Sticker Layout Exploration

I did an exploration on layout design because, when I first created the stickers layout its not on a square layout. One of the feedback given is that, the sticker should occupy majority of spaces in a square. So, with the layout exploration, I wanted to have the same concept but in a square guides. For idea 1, I do not think that is it possible for it to be a sticker since it has a lot of writing and the deconstruction of the letterform would be to small when created into a sticker making it not visible. Which then gives me the option of choosing idea 2 and 3.


Fig 1.3: Chosen Design

After some consideration, I am going to use idea 2 as my final project sticker. I think that it express typography more than idea 3. With it's baseline, different typeface.

After digitization, the next step is to pick a colour palette for the stickers and tried the stickers on the telegram or whatsapp application. I decided to go with the second idea of typography day, because I think it is something unique and interesting.

Fig 1.4: Colour Development

Fig 1.5: Telegram (PC app) test

After the review session during class time, the feedback given to me was that to change the logo color into colours from the colour palette used. Therefore I changed the colour of the logo.

Sticker Animation
For animating the sticker I chose the 3 colour palette because it has a high contrast between the writing and the patch making the writing eligible later on in mobile phones. For the animation, I am thinking of the words to be on a typing effect. However, because the animation is only 3 seconds long, and the words are long, I don't think that it will work. So I used the idea from Mr Vinod, where the words would appear from the lines instead.

For the lines, I animated it using the masking tool. I used to masking to make the lines appear from the left to the right.

Fig : Line Animation

Then for the animation of the 'Happy Typography Day', I use the inverted mask using the shape tool to create the animation.

Fig : Happy Typo Day Animation

Moving on to the next element which is the font names, I used the same technique used for the line animation.

Fig : Font type name Animation

Lastly for the Taylor's Logo, I used the scale to create a bouncing effect. 

Fig : Logo Animation

Final Outcome

Task 3B Final: Sticker (Coloured) - JPEG

Task 3B Final: Sticker (BnW) - JPEG

Task 3B Final: Sticker - PDF

Task 3B Final: Animated Sticker - GIF

Final Submission Screengrab

Sticker Download Link:
https://t.me/addstickers/TypoDay_Task3B

FEEDBACK

Specific Feedback:
- Make the sticker in a square layout (sticker must occupy most of the spaces)
- Change the colour of the logo matching to the colour palette used.
- Think of how can the sticker be animated (the ideas)

REFLECTION

In this final project, I got to learn how to create a sticker properly. This is my first time on creating a stickers. Also, it is a bit of a challenge when we are asked to use minimal graphical elements to express a celebration day. However, I think that I have done well on creating a sticker for Typography day. Other than that, this project helps me to be more familiarized on using After Effects.There are things that should be considered when creating a sticker for applications, especially applications in mobile phones. For example, the line strokes, some may be visible in the laptop or computer with the big screen, while on mobile phones the lines are small and thin, not visible. This goes to other elements in the sticker, font size, graphical elements, etc. 


FURTHER READING











Comments

Popular posts from this blog

Design Principles - Task 3

Illustration & Visual Narrative - Task 2