Typography Task 3B: Type Design and Communication

November 17, 2021

Typography Task 3B: Type Design and Communication

25/10/2021 - 19/11/2021 (Week 10 - Week 13)
Evaleez Voo Lian Yun / 0350275
Typography/ Bachelor of Design (Hons) in Creative Media
Typography Task 3B/ Type Design & Communication

Lectures

All lectures 1-6 completed in Task 1 and Task 2

Week 10

On week 10, we were given a brief on Task 3B. Personal Notes:

Fig 1.0 Notes on Week 10 (28/10/21)

Instructions

Visual Research

Note: Profile/ website links will be added in "References".

Fig 1.1 Sticker Reference 1 (3/11/21)
Source: Behance

When browsing through Behance, I found a series of geofilters for snapchat designed by Christian Robles. Although the designer used a good amount of illustrations in their design, I enjoy looking at how they manipulate text to give it a sens of life. Especially the 'sleep well' geofilter where it looks like its 'snoring'.

Fig 1.2 Sticker Reference 2 (3/11/21)
Source: Pinterest

Since my first reference was more illustrative, I decided to look for stickers with only alphabets. The picture above was one of them. I liked their use of colours and how curvy the typeface. Moreover, the added shading at the back also gives it a sense of 3D even though it's on a 2D plane.

Idea Exploration

Design 1

Fig 1.3 Kadazandusun Traditional Clothing (4/11/21)

With the variety of greetings we were given, I decided on 'Kaamatan Greetings' mainly because this celebration originates from my culture - Kadazandusun. With that in mind, one of the biggest activities we do during the festivel is the "Unduk Ngadau". A celebration for the sacrifice of Huminodun. If you want to hear the legend, here is a video about it:

For Unduk Ngadau, all the participants would be told to wear the traditional clothing of our culture. Even though we all may stem from the same roots, difference provinces within Sabah have different types of clothing, but most of them would have a black base and beads sewed on the fabric.

Sketch 1:

Fig 1.4 Design 1 Sketch (4/11/21)

I wanted to use the elements from Kadazandusun traditional clothes and decided to create a ribbon-like design, with the beads framing the words "Kaamatan Greetings". Fun fact: In kadazan, people would say "Kotobian Tadau Tagazo do Kaamatan" and for dusun it's "Kotobian Tadau Tagayo do Kaamatan". Besides that, with paddy growing being the main agriculture produce we have, I added them to my sketch as well.

Design 2

In Kadazandusun culture, everytime it is the Harvest Festival season, we like to get drunk. Even though most people drink beer and other 'modern' alcohol these days, we will often see the handmade alcohol called 'tapai' or 'lihing' being brought in.

Sketch 2:

Fig 1.5 Design 2 Sketch (4/11/21)

For my second design, I added the 'tapai' element into my design and making the background look like a blob of spilled alcohol (because it happens when you're drunk, btw minors please don't drink yet ;-;).

Process (Week 11)

Design 1

Fig 1.6 Design 1 Process 1 (4/11/21)

I first started off by making the foundation of the ribbon.

Fig 1.7 Design 1 Process 2 (4/11/21)

Then, I added the fonts, I tested out several sans serif ones and chose Futura in the end.

Fig x.x Design 1 Process 3 (4/11/21)

After finalizing the words, I illustrated some paddy with the Pen Tool, using references from Pinterest.

Fig 1.8 Design 1 Process 4 (4/11/21)

I then added the embroidery onto my design. I used one of the art brushes in Adobe Illustrator to create the shape. The above photo is me editing the ends to suit the shape of the ribbon.

Outcome:

Fig 1.9 Design 1 Week 11 Outcome

Design 2

Fig 2.0 Design 2 Process 1 (4/11/21)

For design 2, I started off by designing the tapai, I took some reference off Google to get the shape right. The green tube is a bamboo straw.

Fig 2.2 Design 2 Process 2 (4/11/21)

Next, I added the blob of liquid onto the back of the pot. Since tapai is made of rice, I used a beige-yellow colour on the blob, with a shade of orange at the back acting as its shadow.

Fig 2.3 Design 2 Process 3 (4/11/21)

Afterwards, I added fonts onto the design, the font I used was Gill Sans Std (Bold Extra Condensed). I think the curves on the typeface paired well with the blob at the back.

Outcome:

Fig 2.4 Design 2 Week 11 Outcome (4/11/21)

In the final design, I wasn't really sure where to put the Taylor's logo. Hence, I added an exclamation mark and placed it on top. Besides that, I added more highlights to give a 'juicy' and fluid feel onto the design.

Testing

Fig 2.5 Testing on Whatsapp (5/11/21)

After finalizing them, I decided to try it out on WhatsApp because I was more famliar with the sticker maker there. The last picture was used to compare for the sizes as it is also in a square.

Process (Week 12)

Design 1

Fig 2.6 Design 1 Process 5 (11/11/21)

As advised by Mr Vinod, I first moved all the paddy to the side and enlarged the ribbon and its words.

Fig 2.7 Design 1 Process 6 (11/11/21)

Then, I arranged the paddy to allow it to frame the banner and bring attention onto the greeting.

Outcome:

Fig 2.8 Design 1 Week 12 Outcome 1 (11/11/21)

I adjusted the paddy positions and the beading as well. The Taylor's logo was a challenge because I couldn't find a spot that was not awkward for it 👊 ( ͡👁 ͜ʖ ͡👁) 👊. While thinking of solutions to this problem I came up with another idea:

Fig 2.9 Design 1 Week 12 Outcome 2 (11/11/21)

This was actually inspired by one of my classmate's work I saw while they were getting feedback. Their design was for Mid Autumn Festival and they used the Taylor's logo as a lantern. Since our traditional clothes also have trimmings on the ends, I decided to use it in my design ( ͡◭ ͜ʖ ͡◭). Although, I must say, this outcome is less radiant than the first one.

Testing

Fig 3.0 Testing on Telegram (12/11/21)

After some trial and error, I was finally able to properly use the sticker bot on Telegram. The above showcases how the sticker would look in a normal day-to-day conversation in the application. The words are very obvious and eye catching, props to Mr Vinod for his advice on enlarging it.

Process (Week 13)

Fig 3.1 Design 1 Process 7 (15/11/21)

Under Mr Vinod's teaching and some help from YouTube videos, I managed to create a brush for the beading. I also moced the Taylo're logo to the tail.

Fig 3.2 Design 1 Process 8 (17/11/21)

Adding outlines onto the design.

Fig 3.3 Design 1 Process 9 (17/11/21)

Creating a bigger one in 2048 x 2048 size.

Fig 3.4 Design 1 Process 10 (17/11/21)

After finalizing the design, I transferred everything to Adobe After Effects. This was where a lot of things wand it took a whole day to figure everything out. The colours were washed up and I have no idea why. I ended up asking my other lecturer from another course - who does animation as her job - about it, she said it might be due to the RGB/ CMYK changes. She also gave links to some problems and solutions.

Fig 3.5 Design 1 Process 11 (18/11/21)

In the end, I managed to fix the problem and continued to animate my gif.

Fig 3.6 Design 1 Process 12 (18/11/21)

I tried to export it in a tgs file, but the extension doesn't want to be installed (I'm using Adobe After Effects 2021). So, I am stuck with gif file (╥︣﹏᷅╥᷅).

Final Outcome

Coloured:

Fig 3.7 Coloured Final Outcome (18/11/21)

Greyscale:

Fig 3.8 Greyscale Final Outcome (18/11/21)

PDF:

Firstly, having the tail definitely made the Taylor's logo look less awkward. Besides that, I also rearrranged the paddy to look like its being blown to one side, not only will that make the design look more organic, it will also look more natural when animated.

Update 19/11/21 1:15am: I just remembered Mr Vinod's advice to change the shading of the middle part. I'm sorry Mr Vinod I don't think I have enough time till class to edit it ( ͡ಥ ͜ʖ ͡ಥ). Just deduct my marks because it's entirely my fault. I'll update it by next week before the examiner comes.

Animated GIF:

Fig 3.9 Final Animated GIF (18/11/21)

For the animation, I gave it a windy effect, blowing from the left to the right. I intentionally made the speed of each movement a bit varied with one another to make it look more natural. As you can see, the second paddy moves a bit slower than the first one because the force from the wind is being blocked by the bigger one on its left. Hence, the one on the left will be blown first. I have no idea why the background is black, it was transparent in After Effects, and my illustrator file definitely does ot have a black box behind it ಥ_ಥ.

Telegram:

Fig 4.0 Sticker in Black Background (18/11/21)

Fig 4.1 Sticker in White Background (18/11/21)

Note: Please don't mind the conversation we had, we just found really interesting telegram stickers and wanted to try them out ( ͡* ͜ʖ ͡*).

Telegram Sticker Link:

https://t.me/addstickers/Kaamatantu

Feedback

Week 11

General Feedback

Remember that the sticker will need to be in a square format 512 x 512 when used in Telegram.
Do not depend too much on illustrations.
Make sure the text is readable at the sticker size.

Personal Feedback

Fig 4.2 Week 11 Feedback (5/11/21)

Make it bigger, stretch it out

Week 12

General Feedback

Rememeber to add a greyscale and coloured version on your eportfolio
Use the 10 typefaces
If you want the gif to animate in Telegram, you need to use Adobe After Effects

Personal Feedback

Try adding a tail under the bottom ribbon to place the Taylor's logo
Redo the beading, try to create your own brush
The design with paddy is nicer

Reflection

Week 11

This project has allowed me to do research on my culture, much like in Task 3A. I learned how to add emphasis onto my designs with the use of contrast and sizing. Besides that, I felt like I could have done a bit more with the typeface, although it may be too messy with the illustrations I have, ie.e the beading that frames them. After testing the stickers out on Whatsapp, I could see how small it was and understood why Mr Vinod is asking us to enlarge the type.

Week 12

This week, I received commendment for enlarging my design. I observed how observing others can help with creating ideas. For example, the design I did with the Taylor'r logo as the trimmings of the ribbon was inspired by my classmate's design about lanterns. Moreover, I managed to create a brush on Adobe Illustrator for the first time, it was not bad (YouTube and Google helped a lot), 10/10 would make one again because of how convenient it makes our lives.

Week 13

This week was confusing. Mainly because of the animation. My skills in Adobe After Effects is average (or lower), I actually aimed to make a more natural looking paddy movement with bones and the help of Duik, but it might take longer for me to understand how the extension works. Either way, I think the animation turned out good. Also, Media Encoder (for some reason) cannot connect tomy After Effect. This week was A LOT of trial and error (that my migraines kept acting up). Silver lining, I am better at Adobe After Effects now.

References

Behance

https://www.behance.net/gallery/63316669/Snapchat-Geofilters-2

Richard Poulin 2017, Design School: Type : A Practical Guide for Students and Designers, Rockport Publishers, Beverly, MA, viewed 18 November 2021, <https://search-ebscohost-com.ezproxy.taylors.edu.my/login.aspx?direct=true&db=nlebk&AN=1628622&site=eds-live&scope=site>.