ADVANCED TYPOGRAPHY - FINAL PROJECT

22/10/18 - 26/11/18 (Week 9 - Week 14)

Yeap Phay Min (0331073)

Advanced Typography

Final Project - Design, Exploration and Application

---

LECTURE NOTES

22/10/18 (Week 9)

This week, we got a lecture on the typographic perception and organisation by a group of classmates.
We got to learn about form and content, gestalt, law of perceptual organisation, layout as well as hierarchy.

From the lecture, I got to have a better idea of what form and content is, and how they both work work hand in hand and complement each other in different ways when applied in a typography design. As for the topic of gestalt psychology and layout, I got to learn a little about it in a previous class so it was nice to learn more in-depth about it through this lecture. There were also several laws of perceptual organisation such as similarity, continuity, pragnaz, proximity, closure, symmetry, common fate, common region and past experience. I also got to learn about how to create layouts though spacing, grids, balance, bullet/numbers and figures/tables. Visual hierarchy is also an important thing to consider and it can be achieved through size, colour and contrast, font choice and spacing.

With the lecture notes given, I've complied it into a set of slides of my own.





29/10/18 (Week 10)

In this class, we got a lecture on typography in different mediums and it was presented by a group of our classmates. Through this, we learned about print and screen as well as static and motion.

We were first introduced to a typographer named Craig Ward and we got to look at his works which are in a experimental typography style. Then the lecture carried on with print and screen. Screen typography is said to be more simpler so it is easier to view at a glance. It needs to favour legibility  as there is lesser resolution for an average computer screen to work with as compared with print. We also learned about static typography in both print and screen, and this is the most traditional form of typography. For motion typography, it is an animation technique and refers to screen rather than print.

With the lecture notes given, I've complied it into a set of slides of my own.




12/11/18 (Week 12)

For our last round of lecture, it is about colours in typography. Several groups, including mine, had to come up with a set of slides.

My group got to present regarding colours in typography for web. The first thing to remember is to use a neutral colour palette as it ensures great readability so more users will enjoy reading the content and this can increase the engagement rate. Using just one single colour for highlighting is also important as increasing numbers of colour combinations can complicate a design. The next step after that is choosing variations of things such as buttons, gradients, excerpts and borders.

Here's the slide prepared by my group.




Other groups's presentations were regarding signs, posters and titles. From the lectures, I learned that the effectiveness of a design is often affected by the use of colours so it is important to select a suitable colours for both the text and background. This plays a part in logos as well as it can affect a customer's perception on a brand. This is because different colours have different meanings to represent various kinds of feelings and emotions. Besides that, adding colours to a heading can create typographic hierarchy and set the mood for the design to make the text stand out. I also got to learn about RGB and CMYK. RGB are addictive colours and are often associated with computer monitors while CMYK are subtractive colours and are often used for print instead of screen.

With the lecture notes given from the other groups, I've complied it into a set of slides of my own.

---

INSTRUCTIONS




22/10/18 (Week 9)

In this class, we were introduced to our final project for this module. Mr Vinod went through the project brief with us and explain about what can be done for this project. In the brief, links were also given to help us have a better idea of the things we could do.

We could approach this final project in two ways.
1. Design a font that aims to solve a larger problem or to be part of a solution in the area of interest.
or
2. Explore the use of typeface in the area of interest and identify areas that could be improved to add value to the existing typeface.

I got to gain more inspirations through the links provided as there were many really interesting and creatively executed.

Fig1.1: Example #1

Fig1.2: Example #2

Fig1.3: Example #3

Fig1.4: Example #4

To start of this project, I started thinking of what interests me and also continued to search up on experimental typography to gain more inspirations.

After listing out the things I'm interested in, I decided to narrow down my idea to paper cut, specifically those Chinese paper cut designs as I find them to be really delicate and pretty.

Fig1.5: Example of Chinese Paper Cut #1

Fig1.6: Example of Chinese Paper Cut #2

Fig1.7: Example of Chinese Paper Cut #3

Fig1.8: Example of Chinese Paper Cut #3

Looking at the Chinese paper cut designs, I've always noticed that the design is always paired with a Chinese character, and there's hardly any that incorporates English letters/words. Since the design is really special, I personally think it would be nice if words relating back to the Chinese celebration  are paired with the paper cut designs.

Anyone can celebrate Chinese New Year. However, the minor issue is that not everyone can read and understand Chinese words. So by using the same concept of the paper cut design and apply it to letters, it can more universal for everyone. For the words, I am planning on using the words "Lunar New Year", and the letters of the words will be inspired by the strokes of Chinese calligraphy.


I wrote down my thoughts and ideas in a set of slides, including the problem and the solution, along with further research on my inspirations.




29/10/18 (Week 10)

In class, I got to share my idea with Mr Vinod, and he mentioned that the idea I'm leaning towards is good and it is true that not everyone can understand the Chinese characters so if English words are included with the concept of paper cut, it'll be nice.

I also started by searching up more pictures of informal script style of Chinese calligraphy to have a better idea on how the strokes of the letters look like.

Fig1.9: Example of Chinese Calligraphy #1

Fig1.10: Example of Chinese Calligraphy #2

Fig1.11: Example of Chinese Calligraphy #3

Back home, I decided to add on more further research on the slides for me to have a better idea of the style of the letters.




05/11/18 (Week 11)

This week is an e-learning week, so we got to work from home. I proceeded with doing some really rough sketches.

Firstly, I started sketching out the strokes of Chinese calligraphy, followed by some sketches of the letters.

Fig1.12: Rough Sketches of Chinese Calligraphy Strokes

Fig1.13: Rough Sketches of the Words "Lunar New Year"

Once I did the rough sketches, I tried selecting a style of each word that I thought was more decent and further sketched it out on a graph paper.

Here is attempt #1

Fig1.14: First set of rough sketches #1

Fig1.15: First set of rough sketches #2

Fig1.16: First set of rough sketches #3

At this point, I feel like I haven't incorporated the strokes of the Chinese calligraphy well-enough, therefore I plan to do more variations of sketches for the letters. In the meantime, I'll be sending a message to Mr Vinod over on Facebook to receive feedback on what I've done so far.

After receiving feedback, I proceeded with improving on the sketches.

Fig1.17: Modern day hand lettering version

Fig1.18: Outline of lettering combined with Chinese calligraphy

Fig1.19: Sketch of final letters

I also tried to sketch out some floral designs for the paper cut.

Fig1.20: Rough sketches of florals for paper cut design

12/11/18 (Week 12)

Mr Vinod got to see my final sketch and he told me to start digitalising it. I imported the scanned image into Adobe Illustrator to trace over it.

Fig1.21: Tracing #1

Fig1.22: Tracing #2

Fig1.23: Using grids as guides to adjust the letters

Here are the final digitised letters.

Fig1.24: Final Letters - Outline

Fig1.25: Final Letters - Fill

Fig1.26: Arrangement of final letters - Outline

Fig1.27: Arrangement of final letters - Fill

PDF of Final Letter Design

Once I had the final lettering piece, I proceeded with the paper cut design. I started by doing some research so I knew which elements I'd like to include in the design.

PDF of Research on Lanterns & Flowers

Then I proceeded with designing the elements.

Fig1.28: Floral elements - Outline

Fig1.29: Floral elements - Fill

Fig 1.30: Other Elements - Outline 

Fig 1.31: Other Elements - Fill

Fig 1.32: What some the elements are

After creating those elements to put in the paper cut design, I started to assemble the elements together with the lettering.

Here are the processes of the design. I started by placing the words in a circle with a scalloped edge for the circle, then added in the elements and arranged them.

Fig 1.33: The words and scalloped edged circle

Fig 1.34: Assembling the elements #1

Fig 1.35: Assembling the elements #2

Fig 1.36: Assembling the elements #3

After some time of designing how the paper cut will look like, I finally finished it!

Fig 1.37: Outcome of the paper cut design

Then, I proceeded to unite the outlines so the lines will only be the ones to be cut on.

Fig 1.38: Outcome of the paper cut design - without uniting outlines

Fig 1.39: Uniting the outlines #1

Fig 1.40: Uniting the outlines #2

Fig 1.41: Uniting the outlines #3

Here's the final outcome of my design.

Fig 1.42: Final Design - Outline

Fig 1.43: Final Design - Fill

Chinese paper cut designs are often in red, hence I will be using red colour paper to cut on as well. Therefore I tried to put a red fill to the design to see how it'll look it once it is cut.

Fig 1.44: Final Design - Static

PDF of final design

After I had the final design, it was time to laser cut it. Mr Shamsul allowed my friend and I to do the laser cutting with the machines we have in campus.

Firstly, Mr Shamsul exported my files from Illustrator into a dxf format.

Fig 1.45: dxf file for laser cutting

Here are some of the process of laser cutting.

Fig 1.46: Testing it out on an extra paper 

Fig 1.47: Process of laser cutting 

Fig 1.48: Process of laser cutting 

Fig 1.49: Process of laser cutting

Fig 1.50: Process of laser cutting

Fig 1.50: GIF of laser cutting process

And it's done! Here are pictures of the final outcome of the laser cut.

Fig 1.51: Final Outcome of Laser Cut

Fig 1.52: Final Outcome of Laser Cut - Angled View

Fig 1.53: Final Outcome of Laser Cut - Close-up

I've also decided to get a frame to display it since it I didn't want any chances of the paper tearing or getting crumpled.

Fig 1.54: Framed Artwork

Fig 1.55: Framed Artwork

19/11/18 (Week 13)

This week, I got to show the lecturers what I've done, which includes the framed artwork. Both lecturers mentioned they like what I've done, and Mr Vinod suggested that I could create an animation of the design as a way of presenting it digitally.

Mr Vinod gave me the idea to create an animation where the elements of the paper cut are "removed" and all that'll be left is the words "Lunar New Year". I started with this idea and proceeded to create the animation.

Here's the first attempt of the animation.

Fig 1.56: Animation - First Attempt

Back home, I had another two ideas of the animation so I decided to give it a try and see if I like it.

Here's the second attempt of the animation.

Fig 1.57: Process of creating the artboards

Fig 1.58: Process of creating the gif

Fig 1.59: Animation - Second Attempt

I liked the outcome of the second attempt more than the first one, but since I still had another idea in mind I decided to give it another try.

While finalising my idea for the third attempt at the animation, I decided that I should incorporate some meanings into my animation, rather than just showcasing the letters. I want to showcase the meaning of "new growth" through the blossoming of the flowers in my animation. In the paper cut design, I’ve added some plum blossoms around the design. To show the representation of “new growth”,  I decided to animate the flowers in a way that makes it look like it is blooming.


Here's the the third attempt of the animation, which I chose as my final animation.

Fig 1.60: Process of creating the artboards

Fig 1.61: Process of creating the gif

Fig 1.62: Animation - Final Outcome

Here is a compilation of the result of the final outcome.

26/11/18 (Week 14)

Final submission day. 

In class, we were told to include the explanation behind our ideas such as the problem and solution as well as the results in our final compilation.

---

FEEDBACK

29/10/18 (Week 10)

General feedback: The content in our e-portfolio should include all the necessary processes, labels with clear captions, explanation and overall properly documented. 
Specific feedback: For the second medium of collateral which was my tote bag, I managed to get my design printed and got to show it to Mr Vinod and Mr Shamsul. They mentioned that the outcome of the bag looks nice and the quality of the printing looks good as well. As for the poster, I can proceed with printing it in A2. For the final project, I got to share my idea with Mr Vinod and he mentioned that it is good, and the reason behind why I want to do it is reasonable, therefore I can proceed with it and start designing. 

08/11/18 (Week 11)

Specific feedback (received through Facebook message): I think your progress is going well. Research looks good. The process at getting it out shows progress and evolution. However you need to ensure you maintain the characteristics of those Chinese strokes to a certain degree. Right now it looks like you have lost a little of the characteristics as you have refined the font.

12/11/18 (Week 12)

Specific feedback: I can proceed with digitalising the letters I’ve sketched out. While doing this, I will need to make sure the strokes to connect each letters are of the same height, making them look consistent. 

19/11/18 (Week 13)

General feedback: We need to make sure our blog is well updated with the process and final works documented. Reflections as well as further readings are also an important part of our blog.
Specific feedback: The final outcome of my framed artwork is good and they like how it turned out. Mr Vinod also suggested that I could create a gif of the artwork. 

26/11/18 (Week 14)

General feedback: For the final project, we should include the explanation of our idea, the problem, solution and results of it in our blog post, including the blog post for the compilation. 
Specific feedback: No specific feedback given.

---

REFLECTION

EXPERIENCE

22/10/18 (Week 9)
This week, we were introduced to our final project of this module and I get to browse through the links given in the brief to have a better idea of what could be done.

29/10/18 (Week 10)
I started to do some further research of what I wanted to do and started on some sketches.

05/11/18 (Week 11)
It is an e-learning week, so we got to work from home and I continued with the sketches for this final project.

12/11/18 (Week 12)
For this week I got to digitalise my sketch and start on the paper cut design.

19/11/18 (Week 13)
This week I got to submit the framed artwork and I'm glad both lecturers liked how it turned out. Besides the hardcopy submission, I was told that I could create an animation to display and present my paper cut design digitally. Hence, I had the experience to create a few animations.

26/11/18 (Week 14)
It's the final class today. Throughout the weeks of doing this final project, I got to have an experience in creating a design that's intended to solve a problem which was interesting.

OBSERVATION

22/10/18 (Week 9)
I observed that there are many creative experimental typography that's been done and they're all different and unique from one another.

29/10/18 (Week 10)
I observed that the initial sketches I've done did not reflect back on the Chinese calligraphy well so I decided to further look at the strokes of the original form.

05/11/18 (Week 11)
I observed that it is important to maintain the characteristics of the strokes of Chinese calligraphy to make the letters fit better into the theme I'm going for.

12/11/18 (Week 12)
From the process of doing the sketches of the paper cut designs, I observed that I had to make sure I draw the elements in a way that will hold everything together and not be flimsy when it's cut.

19/11/18 (Week 13)
From this final project, I liked how we could do whatever we want, and through this I got to observe the interesting and different ideas from others. It was nice to be able to look at the variations of work produced, since we've been doing similar things in the past designs.

26/11/18 (Week 14)
At the end of it all, I observed that this was a final project that I found to be interesting as there were many different ideas from everyone in class.

FINDINGS

22/10/18 (Week 9)
While trying to come up with ideas, I found that I was a little stuck as I didn't know what I should do.

29/10/18 (Week 10)
I found that the different variation of the strokes of the Chinese calligraphy have some sort of consistency throughout the letters.

05/11/18 (Week 11)
I found that I need to speed up the process a little otherwise I would not have enough time to complete the entire project.

12/11/18 (Week 12)
Through this, I found that since the paper cut design is pretty detailed, it would be better to have it laser cut instead of cutting it by myself.

19/11/18 (Week 13)
I realised that I enjoyed this final project as I got to work with elements that I like such as lettering, paper cut and florals. Hence, I found that it is good to select an idea that you're happy with and you are interested in it.

26/11/18 (Week 14)
I found that I was pretty proud and satisfied to see the progress of it all, from the beginning with the sketches of the lettering and paper cut design, to digital forms to the hardcopy of the paper cut, and the simple animation.

---

FURTHER READING

22/10/18 (Week 9)

Typography can make or break your design: a process for choosing type 
https://medium.freecodecamp.org/typography-can-make-your-design-or-break-it-7be710aadcfe

Fig2.1: Article Header

Selecting type is said to be an essential skills a designer can and should learn, because text is the fundamental way of how communication can occur between designers and users. This article contains informative content, guiding us to start learning how to choose a typeface that is best suited for our particular designs. 

1. Identify your purpose

It is important to know what is the aim of the design you are creating and what sort of information are you trying to convey. It is said that “a good design aligns its typography with its purpose”, and it is true as type can be a mood setter that has effects on the tone and style of a design. The type should be harmonised with the rest of our design. Another important thing to note is if if our design is heavy with image, a simple type should be used so it doesn’t cause any distraction. 

2. Identify your audience

Once we’ve got our purpose, knowing our audience is the next important step because age and interest are factors that will affect our type options. When we choose a type, consider our target audience and what are their needs. Basically, empathise with your users.

3. Look for inspiration

This can be done by looking at works of other designers and attempt to understand how they decided on the particular type used.

4. Select your fonts

After research and inspirations, it is time to select a type. Principles to keep in mind includes readability, legibility and purpose.

29/10/18 (Week 10)

Understanding the Difference Between Type and Lettering by Joseph Alessio
https://www.smashingmagazine.com/2013/01/understanding-difference-between-type-and-lettering/

Fig2.2: Example of Lettering #1

Fig2.2: Example of Lettering #2

From this article, it is said that designers and artists make their careers through designing type or even custom lettering which has become common to state that typography is among our skills and disciplines. I got to read up about both lettering as well as typography and understand what each of them meant. 

Lettering and typography share a handful of similar concepts but they have different disciplines.
Typography is the study of how letterforms interact, and can be defined as the style, arrangement or appearance of typeset matter. In addition to that, typography is actually a subset of lettering due to the fact that it is the study of letters applied to typefaces. As for lettering, it can be defined as the art of drawing letters. Lettering is commonly done through drawings with pens or brushes. Lettering and calligraphy are also similarly related, but with differences between them as week. Calligraphy is based on writing letters while lettering is based on drawing letters. 


05/11/18 (Week 11)

The Two Functions of Type: Readability and Legibility
https://vanseodesign.com/web-design/display-text-type/

Fig2.3: Legibility 

Fig2.4: Readability

Readability and legibility are two important factors to consider about when it comes to communicating with type. In order to effectively communicate with type, it needs to have different levels of hierarchy to get the readers attention and also be easy to read.  

Readability revolves around the function of how a typeface is being used. This could be about how welcoming the type and attracting the viewers to want to read it. Readability is applied to the overall reading experience, and it is about making the type aesthetically pleasing to the eye to make it more inviting. It is said that a more noticeable and more interesting type enhances the readability. Besides making it aesthetically pleasing, it is also to understand the reader’s interest, providing a purpose to the type design and keeping the small display type short and brief.

On the other hand, legibility mostly refers to the function of a typeface design, measuring how easy it is to recognise a letter or word and also how the blocks of text are to be read. It is about the type’s ability to be read easily under normal reading conditions. Legibility refers to how the letters and words are clear, and reading it is effortless. It is the job of text type to make it more legible by choosing a medium weight font and also giving the text a suitable size and column width.

In summary, readability is about attracting attention to the type while legibility is about making text easy to read.

12/11/18 (Week 12)

Fonts & Feelings: Does Typography Connote Emotions? By Sophia Bernazzani
https://blog.hubspot.com/marketing/typography-emotions

Fig2.5: Article Cover

In the introduction of this article, it states that visual elements are just as important as words on a web page or blog post. Fonts also serve as a visual marketing tool, and the choice of font plays a part in conveying the intended message you want to send out to your readers. Hence it is important to understand the different categories of font and the characteristics of them.

Serif

• The identifiable small lines on the edges of the letters known as serifs make the font easier to read in print
• Examples: Times New Roman, Georgia, Book Antiqua

Sans Serif

• These type of letters don’t have a serif attached to them so they display more clearly on websites.
• Examples: Arial, Verdana, Helvetica 

Script

• Mean to imitate fluidity of human handwriting
• Examples: Lucida, Kristen

Modern or Display

• Thin and thick bold lines in lettering
• Examples: Impact, Rockwell, Agency

Monospaced

• Larger spaces between each letter and were designed to look like the text was written with a typewriter
• Examples: Courier, Consolas, Monaco

3 Takeaways for selecting fonts

• Choose fonts strategically by focusing on readability and legibility
• Use typography that communicates to target audience
• Things seem easier to do when they’re easier to read

19/11/18 (Week 13)

The Explosive Hand Lettering Rebellion by Denise Bosier

https://www.printmag.com/featured/hand-lettering-flexible-adaptable-typographic-art/

In the article, it states that hand lettering is known for it’s beauty of being flexible and adaptable. It can be in various styles, such as being whimsical, elegant, old school and new school. Hand lettering allows a different approach for design by moving itself away from skills of traditional typography. For a more simpler explanation, the article wrote that typography is a from of graphic design, whereas lettering can be considered as illustration.

Many creative lettering art pieces are showcased in this article. These includes the works of six designers. Through this, I got to look at the different styles and approach of hand lettering and gained inspiration from it. Every lettering piece is creative and unique, and I love that. 

Here are some of the lettering works showcased. 

1. Mary Kate McDevitt: Whimsical Charm

Fig2.6: Hand lettering 

 Louise Fili: The Epitome of Elegance

Fig2.7: Hand lettering 

Hi’s: Cheeky Playfulness

Fig2.8: Hand lettering 

Matthew Tapia: Sketch Perfection

Fig2.9: Hand lettering 

Eric Marinovich: Jack of all Letter Trades

Fig2.10: Hand lettering 

Dana Tanamachi: Chalk Princess

Fig2.11: Hand lettering 

26/11/18 (Week 14)

Typography trends in 2019 to look out for by Dom Carter
https://www.creativebloq.com/features/typography-trends

Fig2.12: Article Cover

The article starts out by saying that trends don't come from nowhere as it evolves and grows when moved towards the mainstream. This article will showcase some of the biggest type movements this year (2018), in order to predict the typography trends in the upcoming year of 2019.

From the article, I learned that the trends of 2018 include:

1. Hand-made Typefaces
A handwriting fonts specialist mentioned that this style of type have been seen everywhere in the market for some time and it will still be in demand.

Fig2.13: Hand-made typefaces

2. Variable Fonts
A monotype font engineer mentioned that they are happy to view the transformation of variable fonts to a technology. Variable fonts are said to be single fonts that act as all the variations such as the width and weight and others.

Fig2.14: Variable fonts

3. Phototype Brutalism
Typography Sara Soskolne said that this typographic trend stood out the most to her in the past year. The trend includes a sense of toughness with sans serif types from the 1960s.

Fig2.15: Phototype Brutalism

4. Less and Less Design
Craid Ward, a designer and creative director, mentioned that in the year of 2019 there will be less and less designs as he isn't connived at the theory that the days of "undesign" are over as of now.