Typography | Task 3B - Type Design and Communication

October 30, 2021

Typography | Task 3B - Type Design and Communication

3rd November 2021 - 17th November 2021 / Week 11 - Week 13
Name: Isaac Yaw Wai Zac (0343197)
Course: Bachelor of Engineering (Hons) Mechanical Engineering
Module: Typography // Mr. Vinod & Mr. Charles
Task 3B

LECTURES

All the notes which are needed for this task were documented under Task 1 | Exercises and can be found under this Link.

Week 10 (27th October 2021)

Figure 1.1: Week 10's class session & briefing or task 3B

In this week's session, we were briefed about the upcoming task, (Task 3B) and this task is to allow all of us to create a text sticker that is interactive, functional, and can be used in text messages. The sticker to be created must be one of the many greetings as shown in Figure 1.2 below.

Figure 1.2: List of greetings/texts

Week 11 (3rd November 2021)

Figure 1.3: Week 11's class session and consultation

In week 11's class session, we started the class immediately with the consultation session by both Mr. Vinod and Mr. Charles. The session took about 2 hours long and the class ended relatively early. As for the announcements, Mr. Vinod mentioned that this task (Task 3B) is due on week 15 and he also announced that we should complete the evaluation on lecturers (TES) as soon as possible.

Week 12 (10th November 2021)

Figure 1.4: Week 12's class session and consultation

This week's class session was a relatively quick one because both Mr. Vinod and Mr. Charles went through all our designs under the Facebook comment section. My feedback obtained in this week was documented in the feedback from lecturer section down below. An announcement was made and the deadline for this submission was set to week 13.

INSTRUCTIONS

Typography Module Information Booklet (MIB)

https://drive.google.com/file/d/1XBs_JKa9S2trYPF_pTKXAhdb4ESEJFbK/view?usp=sharing

In this task, we were all assigned to create a text sticker that is usable and interactive to be used in chats such as in Telegram. The final outcome must follow these aspects:

- 512px by 512px

- exported in RGB format (used for screens)

- we must include Taylor's logo in the design

- avoid using graphical elements

- create 2 final outcomes (one in black & white and another one coloured)

- using an appropriate typeface (one of the 10 given typefaces)

- submit an animated version in GIF format and demonstrate it working on Telegram (animated sticker)

EXERCISE

Task 3B: Type Design and Communication

1. Design Research

In the starting phase of this task, I went ahead and researched online for text stickers of any theme possible, without any specific direction of festive texts. However, I must also understand what April Fool's Day is about, and therefore, I researched online the explanation and definition of this festive day.

April Fool's Day is a celebration done annually in which all of us would get together and get involved in practical jokes, and hoaxes. When jokes or pranks were done, jokesters would shout "April Fool's Day" at the recipient. It is not a public holiday of some sort, but it is a holiday in Odessa, Ukraine.

Figure 3.1: Design research #1 (as of 29th October 2021)

Source: Link

Figure 3.2: Design research #2 (as of 29th October 2021)

Source: Link

Figure 3.3: Design research #3 (as of 29th October 2021)

Source: Link

Figure 3.4: Design research #4 (as of 29th October 2021)

Source: Link

2. Progress

In the first stage of development of my sticker, I need to conduct 2 main decisions and selections. They are the selection of a valid typeface that fits this greeting, and the use of elements that can further represent this greeting. I started off by typing down all the 10 given typefaces in their standard form (Std) so that it can allow me to have an overview of which family to be used for my sticker. Of course, I need to do some further explorations by selecting my most favourite font type under each of the 10 families provided. They were all documented in Figure 4.2 below.

Figure 4.1: Exploration of the 10 given typefaces (as of 30th October 2021)

Figure 4.2: Exploration and selection of design from each font family (as of 1st November 2021)

Alongside the selection of good typefaces for this sticker, I also did some sketches to see what kind of layout may work for this festive text. The sketches were documented in Figure 4.3 below. Not to forget, the use of elements may work if they fit well and can represent April Fool's day, such as jokes, and pranks:

- banana peel

- clown costume

- scary mask

- confetti

- ice-cream

- mystery box

- balloons

With the brainstorming for this part done, I get to see what elements to include and what not. Other than that, I can see which element can be replaced with Taylor's logo so that it can be integrated into the sticker. In my opinion, I think that I can integrate the logo into the cone part of the ice cream. Other than that, I can use it to represent the mouth of a face mask because a face mask is quite a common prop used to scare people as pranks during April Fools day. Or even using it to represent a question mark for the mystery box. Of course, this decision is not finalised and may be subject to change along the process of developing the sticker.

Figure 4.3: Overview of sketches for Task 3B (as of 1st November 2021)

Figure 4.4: Task 3B Progress #1 in Adobe Illustrator (as of 2nd November 2021)

Figure 4.5: Task 3B Design overview in Adobe Illustrator (as of 2nd November 2021)

As of 2nd November 2021 (Week 11), I had a few of these layouts done. Although they were not very well done in my opinion. I brought this current progress into week 11's consultation session so that I could either work on one of these layouts or get any ideas on other layouts after getting feedback from Mr. Vinod and Mr. Charles. The explanations and descriptions for each of the layouts were documented down below.

Layout #1:

I chose the Bodoni Std (Bold) font for this sticker design and positioned every letter in a random manner so that I can get the 'playful' effect to it. Other than that, I angled both the 'o's 90 degrees away from the original position because I want to get the googly eyes effect. However, upon doing this, I found that this orientation together with Taylor's logo, I get to create a mask. This is a good representation of April Fools day because people would wear masks to scare people as pranks.

Layout #2:

The same font was used for this design, but I included a box to create a 'mystery box' as a surprise or prank in which most people do during April Fools day. However, using a box would mean that I need to create different perspectives for the typefaces to go and therefore, would not be quite suitable in this case. Other than that, the use of the box would introduce a huge percentage of graphical elements to this entire sticker, which was not recommended.

Layout #3:

This was quite a challenging layout because I want to include the element of slime in it. This is because slime is also one of the more common prank items/prop used by prankers to scare people. Therefore, I wanted to create a splattering effect to the slime which would also create a depth of feel to it. The positioning of the letters and Taylor's logo still remained the same as the first layout because I want to create an irregular/random position of the letters.

Layout #4:

This is a relatively interesting layout that I would like to try, just to see how it would turn out. I repurpose the letters 'O' as balloons and to create the floating effect, the use of strings was done and the words 'Happy April' seemed to be hanging off the balloons. Although this layout looks very cute and nice, I did not like it because of the messed-up visual hierarchy. The word 'Fools' comes first and also made bigger, which should not be done in the first place.

Layouts #5 & #6:

These 2 layouts are very similar to layout #3, but I included an extra element which was the banana peel to enhance the joke/prank effect to it. Then, the letter 'S' was positioned to make it feel like it slipped off the banana peel. The position of Taylor's logo was still remained the same to create the mask.

After further comparison, I have chosen design/layout #5 because it looks very fitting with the April Fools theme. It looks very playful and fun at the same time, which was the goal of this celebration. Figure 4.6 below shows the further development of the selected design/layout #5.

Figure 4.6: Task 3B Progress #2 in Adobe Illustrator (as of 3rd November 2021)

Link

Figure 4.7: Video progress #1 for Task 3B (1st - 3rd November 2021)

I was really happy with how this chosen design turned out. Therefore, I played around with different colour combinations to represent 'playfulness' and also to represent the colourful slime.

Figure 4.8: Task 3B Progress #3 in Adobe Illustrator (as of 5th November 2021)

Figure 4.9: Overview of colour comparison in Adobe Illustrator (as of 5th November 2021)

When exporting the design to be used as stickers, I followed the tutorial provided in the module information booklet (MIB) and to test this first draft design just to play around with it and to see whether it would work. I used the 'save for web' option to export this file as PNG and also maintain the pixel size of 512px by 512px because this is the maximum quality that can be accepted by Telegram. Of course, the resolution was set to 300 ppi which was sadly not shown in the figure below.

Figure 4.10: Demonstration of exporting selected design(s) from Adobe Illustrator

(as of 6th November 2021)

Figure 4.11: Task 3B Progress #4 - creating sticker (as of 6th November 2021)

Figure 4.12: Testing the sticker through Telegram (as of 6th November 2021)

After obtaining the feedback in week 12's class session, I was glad that both Mr Vinod and Mr Charles liked my design as of week 12. Only a few minor adjustments should be made and my progress for these tweakings was documented down below.

Figure 4.13: Task 3B Progress #5 - further changes/tweakings (as of 10th November 2021)

Figure 4.14: Overview of updated designs in Adobe Illustrator (as of 10th November 2021)

3. Final Progress/Draft and submission

The final stage for this task was extremely challenging because we were all assigned to create an animated sticker that is interactive and can be used for Telegram as well. This was new and not much tutorial/guidance were provided, but we managed to obtain a few sources online (Link) such as the one shown in Figure 5.1 that is provided by Mr. Vinod.

Source: Link

Figure 5.1: Guidelines on creating an animated sticker for Telegram

With that, I proceeded with the final touches for my design and I have selected the 'green tone gradient version because it suits the 'slime' theme perfectly and Mr. Vinod liked it the most among the others as well. Figures 5.2 & 5.3 below show the progress of organising and grouping the layers so that it would ease the process of animating the elements in Adobe After Effects.

Figure 5.2: Task 3B Progress #6 - final touches and organising layers (as of 12th November 2021)

Figure 5.3: Overview of layers organised in Adobe Illustrator (as of 12th November 2021)

With all the layers organised, I brought it into Adobe After Effects and play around with a very fitting animation for this greeting. My goal is to:

Slime - I might make this element expand to create the splattering effect of the slime

Banana Peel - vibrate/shake as the person is scaring us

Texts - appear suddenly to create the 'shocking' effect

Eyes - open out of a sudden to scare us/prank

Exclamation Marks - enhancing the effect of scaring by shaking vigorously or jumping around

'BOO' - enhancing the effect of scaring by appearing out of a sudden

Figure 5.4: Task 3B Progress #7 - animating in Adobe After Effects (as of 13th November 2021)

Link

Figure 5.5: Video progress #2 for Task 3B (as of 13th November 2021)

However, here comes the most challenging part. Most of us were having the problem of exporting the animation in TGS file type because it is specifically made for the Telegram sticker. We needed an extension for the Adobe After Effects software to allow this file type to be exported.

The first problem I faced was the error for the extension to be read by the downloaded application. I managed to solve this with the help of an online tutorial (link) on extracting and placing the downloaded extension into the Adobe After Effects file location.

The second problem faced was the inability of the extension to export properly because it keeps reading the file as stacks of images.

Figure 5.6: Error #1 - incompatible extension (as of 13th November 2021)

Figure 5.7: Error #2 - disruption of images in After Effects (as of 13th November 2021)

Figure 5.8: Error #3 - unreadable layers by the extension (as of 14th November 2021)

After all these problems that I faced, I have to be very honest that I legit thought of giving up at this point and submitting an animated gif version instead. However, with the help from my peers, I found out that this problem was caused because of the layers of letters, and the gradient that I use for my slime background. To solve this problem, I need to convert these layers into shape layers so that Adobe After Effects can read them with the Telegram extension. Then, I also needed to recolourise my slime to maintain a flat colour so that it can be read by the Telegram extension.

Figure 5.9: Errors solved - FINALLY! (as of 15th November 2021)

Figure 5.10: Creating animated sticker pack in Telegram (as of 15th November 2021)

Link

Figure 5.11: Video demonstration of the animated sticker

Download animated sticker pack (here)

Download static sticker pack (here)

Figure 5.12: Task 3B Final submission in JPG (Black and White)

Figure 5.13: Task 3B Final submission in PNG (Black and White)

Link

Figure 5.14: Task 3B Final submission in PDF (Black and White)

Figure 5.15: Task 3B draft in JPG (Coloured with gradient) - not final submission

Link

Figure 5.16: Task 3B draft in PDF (Coloured with gradient) - not final submission

It was quite disappointing that the Telegram extension in Adobe After Effects did not allow us to export any artwork with gradients. Therefore, I only managed to develop my final sticker design in a flat green colour. Although it's a bummer, I think it turned out better than expected. Although the sticker with gradient was not selected as my final submission, I documented it here as my final draft because I like it too! (sorry for the low-quality attachment of the sticker with gradient because the file for it was long gone)

Figure 5.17: Task 3B Final submission in JPG (Coloured without gradient)

Figure 5.18: Task 3B Final submission in PNG (Coloured without gradient)

Link

Figure 5.19: Task 3B Final submission in PDF (Coloured without gradient)

Figure 5.20: Task 3B animated sticker in GIF (with gradient) - not final submission

Since all of us faced the same problem with exporting Telegram sticker animation with gradient elements, I went with an overall flat green colour to maintain the slime colour and I think that it turned out very good. With that and all the final changes to the animation, I then managed to export the final GIF animation with the flat colour (no gradient) and it will be my final submission for the animated sticker for Task 3B. As seen in Figure 5.21 below, I am not sure why the animated GIF that was exported through Adobe After Effects will have a black background when I have selected export with transparent background. Apparently, most of us also faced this issue and it cannot be solved unless if we export it in a different format and then convert it into an animated GIF once again.

Figure 5.21: Task 3B animated sticker in GIF (without gradient) - final submission

Description:

Selected font type - Bodoni Std (Bold)

Artboard size - 512px by 512px (animated Telegram sticker)

- 2048px by 2048px (static sticker)

Outline thickness - 10px

Elements used - scary mask, slime, banana peel

Placement of Taylor's logo - it is used as a part of the mask together with 2 letters 'O' as eyes

Download sticker packs here:

Download static sticker pack (here)

Figure 5.22: Overview of static sticker pack in Telegram

Download animated sticker pack (here)

Figure 5.23: Overview of animated sticker pack in Telegram

Duration Overview:

Research - 2 hours

Sketches - 1 hour

Typeface selection - 1 hour

Digitising - 6 hours

Troubleshooting for Ae extension - 4 hours (bruh)

Animating - 5 hours

Documenting in Blogspot - 9 hours

Total - 28 hours

FEEDBACK

Week 11

General Feedback: - In this week's class session, we only went through the consultation session to get some feedback on our progress. For my progress this week, Mr. Vinod likes the idea of my layout #5, which is the one with the green slime.

Specific Feedback: - He mentioned that I should maintain the position of Taylor's logo as it is creative. Other than that, He mentioned that I should reduce the use of graphical elements because the typography should be the main focus of this sticker.

Week 12

General Feedback: - In this week's class session, Mr Vinod mentioned that my design is good to go. I can still make some slight changes such as adding a white coloured border surrounding the design.

Specific Feedback: - He mentioned that adding the white borders can allow us to avoid distractions or interference with the background image in Telegram. Other than that, the outline can be made more irregular and rounded so that it would look more like the splattering effect from the slime.

REFLECTION

Experience

Week 11 - In the progress of developing this task progress in week 11, I was quite sceptical about my progress because I chose a festive that is very hard to visualise with the use of typography. However, the challenging process made it quite fun for me to learn and play around with different compositions/layouts.

Week 12 - This was a very fun week as I get to play around with the visuals of the sticker design and play around with different colours. I was relatively happy with the outcome because I get to play around with many different designs.

Observation

Week 11 - Alongside my progress, I looked at my peers' progress and I can see that most of them did very well in terms of creativity and the use of typographic elements. This gave me the motivation to work harder on my progress in week 11.

Week 12 - With further progress this week, I get to see how much impact colours and even minor changes can do on typographic designs. This is because we were assigned to create a black and white version and another one that is coloured.

Findings

Week 11 - The research process was very challenging and interesting because there are very limited elements that can be used to represent 'Happy April Fools day'. However, I managed to find a few examples as references and they were documented in the research section above.

Week 12 - I did explore and compare some of the work with my peers/classmates to see how my sticker would look when it is sent through Telegram. After sending and exchanging stickers with my friends, I get to understand features that I could add or make my current progress even better.

Search This Blog

Isaac Yaw Wai Zac (0343197)

Typography | Task 3B - Type Design and Communication

Comments

Post a Comment

Popular Posts

Final Project

Lectures and Exercises (Video and Sound Production)