Typography: Final Compilation & Reflection

30.3.2021 - 29.6.2021  (Week 1 - Week 14)

Wendy Seto / 0348805
GCD60104 Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University
Typography: Final Compilation & Reflection

---

INSTRUCTIONS

Task 1 (Exercises): Type Expressions, Type Formatting

Task 2: Type Formatting & Expression

Task 3A: Type Design & Communication

Task 3B: Type Design & Communication

---

SUBMISSIONS

Exercises / Task 1:

30.3.2021 - 27.4.2021  (Week 1 - Week 5)

1.1 Type Expressions

fig 1.1.1 Type Expressions Sketches.jpg 5/4/21

fig 1.1.2 Final Type Expressions.jpg 13/4/21

 
fig 1.1.3 Final Type Expressions.jpg 13/4/21


fig 1.1.4 Type Expression.gif 19/4/21

1.2 Type Formatting

fig 1.2.1 Type Formatting.jpg 27/4/21

fig 1.2.2 Type Formatting.pdf 27/4/21

---

Task 2:

4.5.2021 - 18.5.2021  (Week 6 - Week 8)

2.1 Type Formatting & Expression

fig 2.1.1 Type Formatting & Expression.jpg

fig 2.1.2 Type Formatting & Expression.pdf

---

Task 3A:

18.5.2021 - 1.6.2021  (Week 7 - Week 10)

3A.1 Type Design & Communication

Click here to install Lily Pad - Regular

fig 3A.1.1 Type Design Sketches.jpg 24/5/21


fig 3A.1.2 Final Type Design.jpg 31/5/21

 
fig 3A.1.3 Final Type Design.pdf 31/5/21


fig 3A.1.4 Type Design Poster.jpg 1/6/21


fig 3A.1.5 Type Design Poster.pdf 1/6/21

---

Task 3B:

1.6.2021 - 22.6.2021  (Week 10 - Week 13)

3B.1 Type Design & Communication

Click here to preview and download on Telegram

fig 3B.1.1 Sticker Design Sketches.jpg 7/6/21

fig 3B.1.2 Sticker Design.jpg 21/6/21


fig 3B.1.3 Sticker Design.pdf 21/6/21

---

REFLECTION

Typography is like the heart of design so it does not matter wether it is or it is not our cup of tea, us as designers have to deal with it. I can say that I am pretty sensitive when it comes to all the daily typographic related things around me, but all I know is just if it does not feel right then the designers behind it are not doing it right. Well, I did not know that the correct typography actually has principles. Not gonna lie, I have learned a lot of things from this module. I noticed that many things that I thought I know what is it is not what it is. One of them is I just realized that all this time I have been understanding the word "font" wrongly.

More into the practical part, I struggled the most on trying to vizualize my ideas. Sometimes, it feels like my capability is being desegregated by my lack of knowledge on using the softwares. Most of the time, I have no options but to stay in my comfort zone. This resulted in a "not the best version" of what I could actually do. I literally experienced this exact same thing in every single task. In this case, I think designers being able to design is not enough, we have to be aware of the evolution of technology as well. 

At the beginning of the semester, I thought the lecturers, Mr. Vinod and Mr. Shamsul were pretty strict and scary. One of my classmate told me that Mr. Vinod has made several seniors cried previously, and that was enough to terrify a first year student. However, being guided by them for the last 13 weeks, I actually feel on the contrary. They were so chill and friendly in my opinion. Sometimes their words can be harsh and very straight forward, but it is how we were forced to grow and learn. I am sad when Mr. Shamsul said that he will not be there with Mr. Vinod in Advanced Typography next semester, they both make an excellent duo and I just cannot imagine the class without one of them. 

Typography: Task 3B - Type Design & Communication

1.6.2021 - 22.6.2021  (Week 10 - Week 13)
Wendy Seto / 0348805
GCD60104 Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 3A: Type Design & Communication

---

LECTURES

Week 10: Mr. Vinod asked us to drop any holidays celebrated in Malaysia in the chat section and each of us have to pick one to design as a Telegram sticker. I wanted to do the "Merry Christmas" one at first but someone took it already so I decided to go with "Happy New Year".

Week 11: Today we showed our sketches for the Telegram sticker and received some feedback from the lecturers on which one should we digitalized or improve.

Week 12: This week, Mr. Vinod checked on our digitalized sticker design and give some feedback for finalizing them. He also showed us how to create a sticker pack on Telegram.

---

INSTRUCTIONS 

Module Information Booklet

---

TASK 3B

Week 10: 

We were assigned to create a Telegram sticker for Malaysia's holiday celebrations. The lecturers have listed a bunch of celebrations we can pick from in the google sheet and each of us have to pick one. At first, I wanted to do the "Merry Christmas", but someone took it already. So, I decided to go with "Happy New Year".

I did some visual research but not gonna lie that there were not many good "Happy New Year" design expressions. 

fig 1.1 the best one I could find

fig 1.2 more pictures for reference

Inspired from my visual research, here are my sketches for the "Happy New Year" type expression sticker.

fig 1.3 task 3b sketches 07/06/21

Week 11:

I got some feedback from the lecturers, and they suggested me to continue work on the fireworks one. Later, I started to digitilaze the sketch in Adobe Illustrator.

I began with creating the words "Happy New Year" with a combination of typefaces and fonts.

fig 1.4 started digitalizing my sketch in Adobe Illustrator 14/06/21

fig 1.5 adding the fireworks 14/06/21

I was struggling so much on the colouring stage, I cannot seem to find any colour that matches the expressions.

fig 1.6 colouring attempt 14/06/21

Week 12: 

After consulting with the lecturer, I got some useful feedback for the colour selection and design finalization. Mr. Vinod told me that outlines are required, so I immediately add them as well as experimenting on another colour selections.

As far as I know. New Year is identical with the gold colour. So I tried to create this shimmering gold effect with the gradient tool in Illustrator. I think it was not that bad.

fig 1.7 adding outlines and have another colouring attempt 15/06/21

Yeah, "I" think it was not that bad but Mr. Vinod said no. He advised me to use something more colourful, make it happier as we are celebrating a new chapter.

Based on the feecback I received, this is what I came up with. One thing, I also replaced the letter "A" with the Taylor's University logo. Does it look okay though? Hahaha.

fig 1.8 the 102736th colouring attempt 15/06/21

I showed this to Mr. Vinod and he said it is now a lot better but I have to make it bigger, otherwise it will look really small as a Telegram sticker. In the other hand, I have to create another white border in 7pt in order for the file to be eligible as a Telegram sticker.

This is the stage that took most of my time, I am still not that familiar with Adobe Illustrator yet so adding an outline to this entire design is like killing me. I gave up and continue working on it the next week lol.

As you can see, I actually removed the shadow part of the outline because I think it is unnecessary.

fig 1.9 adding a white border to the final design 21/06/21

fig 1.10 final sticker design 21/06/21

final sticker design in pdf

fig 1.11 my telegram sticker

Click here to download and preview on Telegram

---

FEEDBACK

Here is the summarize feedback I received from each week.

Week 10:

Today was the introduction to task 3B so no feedback has been given yet.

Week 11:

General Feedback : 
Students should have digitalizzed their sketches by now.

Specific Feedback : 
Confetti and fireworks are great ideas to express the word "Happy New Year". The lecturers suggests me to continue work on the fireworks one.

Week 12:  

General Feedback : 
The sticker design has to have outlines and a white border to be eligible as a Telegram sticker.

Specific Feedback : 
Try to use colours that express happier vibe as we are celebrating a new year as a new happy chapter. Also make the sticker bigger.

---

REFLECTION

This was a fun task as we gotta use the knowledges we got from doing previous exercises to create an actual Telegram sticker. Even though I have done a lot of other exercises before, I realized that I discover more about Illustrator on this one as well. The most challenging part that I struggled so much at was the colouring stage. Maybe I am still not used to actually use colour on my work for this module as we were not allowed to use any colour other than black, white and grey previously. However, I really like how the final sticker design turned out!

---

FURTHER READING

1. Create a gradient text in Adobe Illustrator

As shown on fig 1.6, I tried to create a colour gradient on my letters in Adobe Illustrator. I learnt how to do it from this article. It was pretty simple actually, yay I discovered another tool I have never used before!


2. How to outline text in Adobe Illustrator

I watched the video linked above but still not succeed on creating my outlines. However, this video is very fun to watch, I just simply love the type design the creator has created.

3. How to make cut lines in Adobe Illustrator

I searched for another video tutorial and found this. Creating cut lines are the same thing as creating outlines right? Well, who knows it might help.

In the end, I proceed to create the outlines after a long exploration through the software tools on my own. These videos did not help me directly but they surely helped in some way.

Typography: Task 3A - Type Design & Communication

18.5.2021 - 1.6.2021  (Week 7 - Week 10)
Wendy Seto / 0348805
GCD60104 Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 3A: Type Design & Communication

---

LECTURES

Week 7:  During the practical session, the lecturers started to explain about our next task which I think is a whole different level. We were first introduced to the anatomy of a type, not gonna lie it was pretty interesting. However, I have never thought that letterform could be this complex though. Well, I guess there is a reason why is it called as Typography, fact is the word itself sounds as complicated as Biology. Understanding both subject is hard, but we decide which hard we want to conquer. And here I am.

This is what we learned today:

fig 1.1 the anatomy of a type

We were then told to deconstruct three letters using one typeface from the 10 given in the beginning of the semester and after understanding the concept we are assigned to design our own typeface. Mr. Vinod also gave us a quick demo on how he created his own typeface in Adobe Illustrator.

Week 8: Mid-Semester Independent Learning Week.

Week 9: This week, the class is focusing mainly on the progression of task 3A. I submitted my progress to the Facebook post and received some feedback from both lecturers. Some students were consultating about their typeface ideas and seeking for answers to solve their designing and digitalizing struggles and misunderstandings.

---

INSTRUCTIONS 

Module Information Booklet

---

TASK 3A

Type Deconstructions:
Before working on the actual task, I work on the letter deconstructions first. I have chosen 3 letters to be deconstructed, e, d and y. At first, I got a little confused on how to do it because I cannot seem to find any article or video about it on the internet. The example Mr. Vinod showed during the class is way too complicated that made me hard to digest. Luckily, one of my classmate showed me the simpler references she found earlier and I immediately understand how it works, or at least I think I do hahaha.

I created three artboards, one for each letter. Then started creating the guide from ascender line, median line, baseline to descender line. The typeface I am using here is Serifa Std.

fig 1.1 creating guides 24/5/21

fig 2.2 letter e type deconstruction 24/5/21

For the letter d, I did twice and export both.

fig 2.3 letter d type deconstruction 24/5/21

fig 2.4 letter y type deconstruction 24/5/21

I surprisingly had fun doing this exercise! I wanted to make a simple deconstruction but I cannot help myself to add more lines and circles so here we go.

Type Designing

Week 8:

fig 2.1 my typeface ideas sketch 24/5/21

I selected one to digitalize in Adobe Illustrator.

fig 2.1 importing to Illustrator 24/5/21

fig 2.2 start tracing with pen tool 24/5/21

fig 2.3 try applying a serif 24/5/21

fig 2.4 forming more letters 24/5/21

fig 2.5 my typeface design (1st attempt) 24/5/21

Week 9:

From the week 9 class, I received some useful feedback from the lecturers. Firstly, they saw my typeface sketches as shown on fig 2.1 and pick one they think is interesting. They said all of my typeface designs almost look the same maybe because I was using the same tool to sketch it. 

fig 2.6 my type design that the lecturers like the most 25/5/21

Furthermore, they talked a bit about my finalized typeface design as shown on fig 2.5, it was an interesting typeface that I could continue to work on but some letters are still not following the guide lines correctly. I do realize the issue but I am struggling on fixing it with the pen tool, everytime I tried to move the anchor point it just distorted the whole letter form.

From todays class, I figured out that we have to be inspired from an existing typeface. I asked one of my classmate whose typeface design is approved by the lecturers, she got a pretty nice feedback from them.

I did another attempt on designing my typeface on Adobe Illustrator. This time I used Futura as a reference.

fig 2.7 my typeface sketch that I decided to develop 31/5/21

fig 2.8 reference typeface 31/5/21

fig 2.9 forming the letter "a" 31/5/21

Mr. Vinod taught us to use one letter to create another letter, for example use the letter "a" to create the letter "p" instead of re-constructing it from scratch so it is easier to manage the consistency.

fig 2.10 duplicating the letter "a" 31/5/21

fig 2.11 creating the letter "p" from the letter "a" 31/5/21

In the middle of constructing my letter forms, I came up with this idea of "lily pad" out of nowhere. I guess I was inspired by the game Plants Vs Zombies.

fig 2.12 the lily pad plant from the game plants vs zombies 31/5/21

fig 2.13 period inspired by lily pad 31/5/21

fig 2.14 creating the rest of the letters 31/5/21


fig 2.15 my final typeface design 31/5/21

Week 10:

Moving on, we have to bring our design into life using FontLab 7. At first, some of my classmates asked me if I am struggling using the software, and I thought I did not. This is my first try on importing my design to FontLab 7.

fig 2.16 importing to font lab 1/6/21

After a while, I realized that each imported letters were automatically placed above the descender line. Now, I know I am struggling as well.

fig 2.17 uh oh 1/6/21

I asked my friend, Wiceline and she told me that I have to adjust the imported letter position manually. 

fig 2.18 adjusting each letter to follow the guide lines 1/6/21

fig 2.19 final fontlab preview 1/6/21

Click here to install Lily Pad - Regular

After our typeface is successfully exported, we are assigned to make a poster to show it off. These are the three posters I designed during the practical session:

fig 2.20 poster designs 1/6/21

Mr. Vinod told me to not ever design something like the middle one, I am still not sure why because honestly I kinda like it hahahah. Furthermore, he suggested me to work on the third poster design but take that lily pad out because it is unnecessary and probably fix the kerning a bit. He said he liked the unique composition here, I do too!

fig 2.21 final poster design 1/6/21

final poster design in pdf

---

FEEDBACK

Here is the summarize feedback I received from each week.

Week 7:

Today was the introduction to task 3A so no feedback has been given yet.
Week 8: No feedback due to Independent Learning Week.

Week 9:  

General Feedback :

Get inspired by existing typeface and use as a reference, pay attention to the strokes consistency for each letter form.
Specific Feedback :

It was an interesting typeface that I could continue to work on but some letters are still not following the guide lines correctly. 

Week 10:

Unfortunately, I did not receive any feedback regarding my typeface design but I do receive some for my poster design.

General Feedback :

Make the font size as big as possible because our intention is to show the typeface off. Simple designs sometimes caught they eye more.

Specific Feedback :

Do not ever design something like the middle one. Mr. Vinod suggested me to work on the third poster design but take that lily pad out because it is unnecessary and probably fix the kerning a bit. He said he liked the composition here, it is simple yet unique.

Week 11:

Specific Feedback: Glyphs have relative consistency in stroke, crafting, proportions/stroke contrast and is relatively readable and legible.

---

REFLECTION

I have always wanted to create my own typeface design and now I finally got the chance to, turns out it was not easy at all! The most difficult part is probably constructing it, I still struggle a lot using Adobe Illustrator, especially on controlling the pen tool. It was hard to really bring out what we have sketched to digitalizing it, most of the time it does not go as how we expected it would be. Well, reality is often disappointing, isn't it? 

Nevertheless, I am pretty happy with my final typeface design as well as the poster design. I realize that the letter form for each is not that neat yet but that is what makes it mine. I have always loved a handwritten typeface, I love when people wrote me a handwritten letter. It just somehow make me feel special. In fact, everyone has different handwritings, it is like a characteristic which owned by no one else but themselves. 

---

FURTHER READING

I searched about type deconstructioning as well as the demo on how people do it on YouTube but I cannot seem to find any, not even a single one. And that was the only further reading I wanted to do for this exercise since others were pretty clear already. Oh and I did some type anatomy reading as well but only through images like shown on fig 1.1.