TYPOGRAPHY - FINAL PROJECT
Neoh Kar Yan (0339338)
Typography
Final Project: Expression, Hierarchy, and Composition
LECTURE NOTES
LECTURE 10: Typography in Different Medium
14/6/19 (Week 11)
I learned that good typography and readability were the result of skilled typesetters and designers. Today, typography does not exist only on paper but on multitudes of screens. For instance, operating system, system fonts, the device and screen itself, the viewport and more. However, our experience of typography today changes based on how the page is rendered because typesetting occurs in the browser.
Print type vs Screen type
Type for print
It is the designer's job to ensure that the text is smooth flowing and pleasant to read. Caslon, Garamond, Baskerville are the most common typefaces that are used for print as they appear as elegant and intellectual but also highly readable when they are set at a small font size. They are also versatile, easy to digest.
Type for screen
Typefaces that are used on the web are optimized and frequently modified to enhance readability and performance on screen. For example, a taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs and more. Another major adjustment where the typefaces are intended for smaller sizes will be more open spaced. These factors serve to enhance readability in the non-print environment such as the web, e-books, and mobile devices.
Hyperactive Link/ hyperlink
A hyperlink is a word/ phrase or image which you click on to jump to a new document or a new section within a current document. They are normally blue and underlined. When you move your cursor over to a hyperlink, the cursor would transform into a small hand pointing at the link.
Font size for screen
16-pixel text on a screen is about the same as text printed on a book or magazine in terms or reading distance. We read books pretty close; only a few inches away, which is typically set at 10 points. If we read at arm's length, text is set at 12 points which is about the same as 16-pixels on screen.
System fonts for screen/ web safe fonts
Open sans, Lato, Arial, Helvetica, Times New Roman, Courier New, Verdana, Georgia, Palatino, Garamond are fonts that are suitable for screen. We learned that if the other party doesn't own the specific typeface, we can either export the file as a pdf or send the fonts.
" A great designer knows how to work with text not just as content, he treats text as a user interface." - Oliver Reichenstein
14/6/19 (Week 11)
I learned that good typography and readability were the result of skilled typesetters and designers. Today, typography does not exist only on paper but on multitudes of screens. For instance, operating system, system fonts, the device and screen itself, the viewport and more. However, our experience of typography today changes based on how the page is rendered because typesetting occurs in the browser.
Print type vs Screen type
Type for print
It is the designer's job to ensure that the text is smooth flowing and pleasant to read. Caslon, Garamond, Baskerville are the most common typefaces that are used for print as they appear as elegant and intellectual but also highly readable when they are set at a small font size. They are also versatile, easy to digest.
Type for screen
Typefaces that are used on the web are optimized and frequently modified to enhance readability and performance on screen. For example, a taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs and more. Another major adjustment where the typefaces are intended for smaller sizes will be more open spaced. These factors serve to enhance readability in the non-print environment such as the web, e-books, and mobile devices.
Hyperactive Link/ hyperlink
A hyperlink is a word/ phrase or image which you click on to jump to a new document or a new section within a current document. They are normally blue and underlined. When you move your cursor over to a hyperlink, the cursor would transform into a small hand pointing at the link.
Font size for screen
16-pixel text on a screen is about the same as text printed on a book or magazine in terms or reading distance. We read books pretty close; only a few inches away, which is typically set at 10 points. If we read at arm's length, text is set at 12 points which is about the same as 16-pixels on screen.
System fonts for screen/ web safe fonts
Open sans, Lato, Arial, Helvetica, Times New Roman, Courier New, Verdana, Georgia, Palatino, Garamond are fonts that are suitable for screen. We learned that if the other party doesn't own the specific typeface, we can either export the file as a pdf or send the fonts.
" A great designer knows how to work with text not just as content, he treats text as a user interface." - Oliver Reichenstein
LECTURE 11: -
21/6/19 (Week 12)
INSTRUCTIONS
FINAL PROJECT
For our final project, we were told to design a poster which conveys a social message relevant to the campus community. In order to do so, we were required to express our posters typographically from one of the ten typefaces given. We were not allowed to use any visuals but graphical elements can be considered upon approval to aid in our message. We were only allowed to use one colour other than black and white for the poster.Before starting on this project, I did some research on PSA (Public Service Awareness) posters to get inspiration and ideas on an impactful poster. After researching and brainstorming, I listed out all potential messages and began the process of sketching.
 |
| Fig.2.1: Example of poster |
Here are all my sketches:
 |
| Fig.2.2: Ideas and sketches #1 |
 |
| Fig.2.3: Ideas and sketches #2 |
 |
| Fig.2.4: Ideas and sketches #3 |
I went from ideas and ideas, non-stop sketching in class. After showing Mr. Vinod some of my sketches, he said that my message for the carpool one was wrong, it isn't supposed to share the road. However, he said that I can work on my 'Words kill' idea and told me to explore more on the meaning behind the message. I did some research again on the message and sketched out a few other ideas on my poster.
After showing him the second time, he said that my sketches were too literal and that I should dig deeper on the meaning of words hurt instead of portraying the actual killing. Hence, I followed his advice and began to explore more on non-literal interpretations and ideas. Upon showing him my sketches the last time, he finally said that I'm almost there.
 |
| Fig.2.5: Inspiration #1 |
 |
| Fig.2.6: Inspiration #2 |
I chose to convey the message "Words hurt. It takes nothing to be kind." because I felt like students nowadays find it harder to show kindness towards others. Instead, speaking mean and hurtful comments behind someone's back or even directly felt easier for them. Hence, I wanted to convey that words can hurt someone, to the point where it can potentially 'kill' someone yet it takes zero effort to show the slightest bit of kindness towards the people around you. What you speak does matter. Stop the negativity and start being kind.
To start off, I began the process of digitizing by arranging a list of negative words in an artboard, so it makes it easier for me to organize everything together.
 |
| Fig.2.7: Adding negative words to artboard |
 |
| Fig.2.8: First mock-up |
I did a tryout of one of the ideas I sketched using the words I listed out earlier. I wanted the negative words to imitate the cracking part of the egg but the outcome didn't turn out as great, thus, I moved on from this idea.
My first official attempt involves me arranging the negative words in a way that it looks like it is coming from a source. However, after receiving feedback from Mr. Vinod and Mr. Shamsul, they said that the composition wasn't there and the words didn't look exciting.
 |
| Fig.2.9: First Attempt |
 |
| Fig.2.10: Exploration of designs and concepts |
After trying out a few different styles and designs, I finally landed on one concept that in my opinion, has the potential to elevate my chosen message.
 |
| Fig.2.11: First attempt on this concept |
Regarding my feedback on this concept, Mr. Vinod stated that the headline is the main artwork and that both words go well together. However, I was asked to work on the background and to construct it based on the headline. I shouldn't add colours first to my composition because it can be a distraction in the process. He also suggested that the background words can continue the shape of the headline.
Following his suggestion and my understanding, I decided to build my words based on the shape of the headline which is curved upwards and downwards. I roughen the words and rotated it based on the direction of the headline then align them accordingly.
Here are my attempts:
 |
| Fig.2.12: Attempts on this concept |
 |
| Fig.2.11: Second attempt on this concept |
For my second attempt, I made the background white and highlighted the word 'HURT' and the negative words in red to emphasize the meaning of being emotionally and mentally hurt from the negative words. Red is the colour of blood thus it elevates the emotion of being hurt. Meanwhile, I moved the sub-headline from the bottom to align with the word 'HURT' as I wanted the negative words to continue seamlessly downwards to the corner of the artboard.
As for my second feedback, Mr. Vinod understood my idea and concept and approved of my design. Initially, when he looked at my design, he thought my background was in light blue but it was pure white in colour. As a 'happy accident', he said that the background would look great with light blue. Hence, my background was changed to light blue. After that, he said my work is done and I can proceed to animate it.
 |
| Fig.2.12: The Final Outcome of poster |
Next, I proceeded to animate my artwork. My initial idea was to make the headline 'WORDS' spit out all the negative words then, 'HURT' will push the bottom negative words downwards. Unfortunately, my idea wasn't feasible and was impractical because the words would overlap with one another.
Hence, I came up with another idea, which is similar to my initial idea. This time, the negative words would appear from both corners, 'HURT' would fade in and wiggle, the sub-headline would appear in three separate frames.
To start off, I removed all the negative words and made my first artboard with only the blue background and headline. Next, I added the negative words on alternate artboards in an increasing manner.
 |
| Fig.2.13: Adding negative words |
 |
| Fig.2.14: First Outcome |
Upon my second attempt, I played around with the opacity of both 'HURT' and the subheadline but I wasn't happy with the outcome. It looked something like this:
 |
| Fig.2.15: Second Outcome |
I thought the word 'HURT' looked too static with just the fade in effect. Therefore, I adjusted the roughen effect to make it look more dramatic.
 |
| Fig.2.16: Third Outcome |
 |
| Fig.2.17: Total artboards used |
It took me six attempts to get to the final outcome of the animation. For my final outcome, I decreased my roughen effect, deleted some frames and increased the delay time for the last few frames.
 |
| Fig.2.18: Total attempts made |
 |
| Fig.2.19: The Final Outcome of Animation 'Words Hurt' |
 |
| Fig.2.20: Framed Poster |
FEEDBACK
Week 11
General Feedback: Mr. Vinod asked us to add the name of our font, our name and the year. He also informed us that our final project submission is on week 13 while week 14 is the submission of our final compilation and reflection.
Specific Feedback: Mr. Vinod said that my arrangement of fonts looked nice but he said that my kerning can be adjusted to make the spacing between 'Mr.' and 'Vinod' closer. Upon my idea of my final project, he said that my idea is strong but I still can make it look more expressive. I am getting there, I just had to explore the meaning behind my idea and to not make it so literal.
Online Feedback: After showing my sketches to Mr. Vinod, he told me to keep at it for another day or two, and see what else you come up with. After few days, I showed him my new sketches and he said that both sketches can work but both need abundant exploratory sketches or digital explorations. You can start trying to digitize it... there’s a lot more exploration in that phase as well.
Week 12
General Feedback: Mr. Vinod stated that our final project is similar to our project 1 in a way, and that composition is crucial in the execution of our design. As our final project submission is due next week, he informed us to buy a frame from IKEA and to print our final design. We were also not allowed to frame our artwork before showing it to them. Lastly, we were to ensure that our final project e-portfolio is complete and updated.
Online Feedback: After showing my sketches to Mr. Vinod, he told me to keep at it for another day or two, and see what else you come up with. After few days, I showed him my new sketches and he said that both sketches can work but both need abundant exploratory sketches or digital explorations. You can start trying to digitize it... there’s a lot more exploration in that phase as well.
Week 12
General Feedback: Mr. Vinod stated that our final project is similar to our project 1 in a way, and that composition is crucial in the execution of our design. As our final project submission is due next week, he informed us to buy a frame from IKEA and to print our final design. We were also not allowed to frame our artwork before showing it to them. Lastly, we were to ensure that our final project e-portfolio is complete and updated.
Specific Feedback: For my initial design, Mr. Vinod said that the overall composition isn't there and my arrangement of fonts isn't exciting. After showing him my second attempt, he pointed that the headline of my design is the main artwork and it works well together. Therefore, I should build my background based on it and should not add colours first as it is a distraction. He also suggested that the background words can continue the shape of the headline. Finally for my last attempt, he understood my idea and approved of my work and said that it is done.
Week 11: I felt excited about this project because it is the final one and our work can finally get to be put up. I personally find this project interesting because it is something that gives off impact and meaning to people, which I've always wanted to do.
Week 12: I was lost in the process of finding the right design, yet I continued to explore different possibilities and different outcomes to see what else I can come up with. After a few try-outs, something sparked and I managed to come up with something. It feels great to be able to do so in a short time.
Observations
Week 11: I noticed that I tend to jump from ideas to ideas and get very indecisive about my own choices. With too many ideas and sketches built up, I would often get stuck in the process.
Week 12: I observed that some of my classmates were really frustrated with getting their posters approved as it is the final project and it can take them really long to get it right. Meanwhile, some only took a few attempts to get there.
Findings
Week 11: I started to appreciate the process of sketching as sketching out my ideas really helped me to explore further on the context and meaning behind a message.
Week 12: I learned that I should never give up whenever I feel lost in the process of making things right. Instead, I should always keep trying and explore new possibilities, I may never know but things may spark and turn into something great like this project.
REFLECTION
ExperiencesWeek 11: I felt excited about this project because it is the final one and our work can finally get to be put up. I personally find this project interesting because it is something that gives off impact and meaning to people, which I've always wanted to do.
Week 12: I was lost in the process of finding the right design, yet I continued to explore different possibilities and different outcomes to see what else I can come up with. After a few try-outs, something sparked and I managed to come up with something. It feels great to be able to do so in a short time.
Observations
Week 11: I noticed that I tend to jump from ideas to ideas and get very indecisive about my own choices. With too many ideas and sketches built up, I would often get stuck in the process.
Week 12: I observed that some of my classmates were really frustrated with getting their posters approved as it is the final project and it can take them really long to get it right. Meanwhile, some only took a few attempts to get there.
Findings
Week 11: I started to appreciate the process of sketching as sketching out my ideas really helped me to explore further on the context and meaning behind a message.
Week 12: I learned that I should never give up whenever I feel lost in the process of making things right. Instead, I should always keep trying and explore new possibilities, I may never know but things may spark and turn into something great like this project.
FURTHER READING
1. Typography in Magazines by Laura Meseguer14/6/19 - 21/6/19 (Week 11 - Week 12)
 |
| Fig.3.1: Typography in Magazines |
 |
| Fig.3.2: Typography in Magazines |
 |
| Fig.3.3: First Things First |
This book taught me a lot of typography that is used in contemporary magazines in the past few years. Coincidentally, there was an article made about the manifesto 'first things first' that we did in project 1. I was surprised to see it in this book. This book teaches the use of typography which is analyzed through almost thirty magazines from different aspects, both functional and aesthetic.
2. Lettering & Type by Bruce Willen & Nolen Strals
28/6/19 - 5/7/19 (Week 13 - Week 14)
This book has shown me a lot of how-tos, histories of type, clear diagrams and exercises. This book features a foreword written by the author of a book that I read for the past further reading. It's nice to see that typographers and authors are all connected with each other.
From this book, I learned that writing, lettering, and type represent three distinct methods of creating letters. Writing emphasizes quick communication and execution above appearance. Lettered characters are constructed through multiple actions and may involve several tools or processes. Lettering or written characters that can be reproduced and rearranged become type. Type unites the detail and formality of lettering with the speed and ease of handwriting. The ability to create and reproduce pre-existing characters through a single action differentiates type from writing and lettering.
Comments
Post a Comment