TYPOGRAPHY - FINAL PROJECT

14/06/19 - 21/06/19 (Week 11-Week 13)
Piyaphon Inthavong (0337589)
Typography
Final Project

LECTURE NOTES

Lecture 11:
June 14th, 2019

Type in a different medium
Back then people only consider typography finalized once they are published and printed. However, with the existence of the internet and technology, typography is now everywhere on screens counting from the operating system, system fonts, applications, web browsers and much more.

Type has always existed in the form of communication in a smooth and pleasant way for people to read. People do this by using good typefaces such as Garamond, Baskerville, Caslon because they look elegant, classy and easy to read when printed. With a change to how type is displayed nowadays on screens and multiple platforms, designers have altered the settings such as having a taller x-height, reduced stroke contrast, wider letterforms, and increasing open spacing to enhance the reading experience on screens.

16 pixels text on screen = text size on books or magazines.
Variation occurs on devices of different sizes and proportions.

Hyperlink
A hyperlink is a word (sometimes image) usually underlined in blue text which directs us to a new document when clicked on.

Web Safe Fonts
Different devices come in with their own default fonts depending on their operating system. Comparing to the analogy of language, when one font travel into a foreign OS, the new device will not understand it and hence treating it as a default font according to its own OS like Times New Roman (which can cause harm to such unintentional design) unless they’re prepared with the font already installed on its device.

The following are examples of web safe fonts available to all platforms: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Week 12:
June 21st, 2019
Lecture sessions ended.

INSTRUCTIONS

EXERCISES

Week 11:
June 14th, 2019

Figure 11.1. Initial sketches for "Burn calories, not electricity."

Figure 11.2. More draft on Adobe Illustrator

Figure 11.3. Trying out other lines

Week 12:
June 21st, 2019

Figure 12.1. After feeling trapped and lost from not knowing what to do, I suddenly had a feeling that things might turn out better if I keep on exploring and set myself free from stress; The thought of that sparked a beginning to the new idea.

Figure 12.2. Sketching out more ideas on the sketchbook after concentrating too much into one layout that doesn't work.

Figure 12.3. Exploring different variations and styles digitally on Adobe Illustrator. The main idea was to have the "let go" drive off the negative words out of the frame by confronting them with its superior size. Some may interpret this as shouting and letting out words or simply just allowing the negatives to flow out. I added the "roughen" effect on the word let go to give it more visual weight; I also noticed how it plays a part better on this context than having the text plain, which makes it look weak.

Figure 12.4. Coloring the chosen piece. Black and white does not work for the context of "letting go." After trying out wide of range of colors (dark, light, gradient, pale...), I picked light blue and green for the reason that they are most relaxing for people to look at with ease. They're in fact quite a soothing color and can help calm busy minds. The color of all type was also changed to white, this is because black makes the entire piece feel more like being trapped inside rather than letting go.

Figure 12.5. Final digitized version of the project

Week 13:
June 28th, 2019

Final Animation

The animation has a very subtle movement, slow enough to not stress people out, and fast enough to not make it dull.

I created a plotagraph effect where the negative words can flow out of the frame endlessly and peacefully. The main words (let go) floats subtly, slightly upwards and back down in a slower rate than those words flowing out.

FEEDBACK

Week 11: June 14th, 2019
The layout for Project 2 has no problem and is easy to read. Not too much progress was made on the final project. The chosen line is good and catchy, however, the drafts for the layout lacks communication and doesn't not meet the objective yet.

Week 12: June 21st, 2019
General feedback:
After designing a simple layout, Mr.Vinod told me to compare the final outcome to the seniors' work. More is expected from this project.

Specific feedback:
Too much was going on for the first layout, it was hard to focus. I was strongly advised to choose a keyword and work around it. The contrast of “negativity” and “free” is way too strong, they're creating the opposite effect.
For the final layout, I'm told to make “negativity” fade with gradient, shake it so that the font style is constant with “let go.”Double the size of "let go" to create a stronger emphasis by taking up more space. The point size of the quotation in the balloon is impossible to read, increase it up to 8pts +. Try considering showing the shape of the balloon (white). There’s no point of having text if people can’t read.
"The Ray should not be straight along the edges
Also the text constitutions the Ray ought to be smaller in point size."
"The edges are to clear, they need to fade or become less precise; Point size is still too big; Black won’t be suitable ... so eventually you will need to introduce color.; Let go should float, instead of being rooted to the baseline."
"Fade the edges some more."

Week 13: June 28th, 2019

General feedback:

The blog is very close to completion, Mr. Shamsul told me to fill in the missing details such as the animation progress and final.

Specific feedback:

For the animation, move the "let go" slightly, almost floating upwards.

REFLECTION

Experiences

Week 11: It was a real stressful week, a lot were happening with different final projects on all other subjects causing distraction.

Week 12: No lectures from today onwards, we all continued on our work progress right in the beginning of the class. We have more time on the practical sessions, class felt longer than usual.

Week 13: GIF animations are not only limited to Adobe Illustrator frame by frame techniques. Complex techniques like conversion of rendered video files into frames are very useful.

Observation

Week 11: My work became a mess, there were no clear emphasis as the words both fight over each other for attention because I was putting effects on multiple words.

Week 12: When there is no one to tell me when to have a break, I would sit down at the same spot for hours trying to figure things out and most of the times not getting anywhere. It was like being stuck in a loop of recycled ideas flowing in and out.

Week 13: My GIF animation file is way too big, I even tried using at least 3 different laptops and eventually used a desktop to generate the GIF animation. It was the most time-consuming process I've ever gone through the entire semester.

Findings

Week 11: Overthinking kills creativity. Choose a keyword and work around it, this was one of the first advice Mr. Vinod had given us on the first few weeks. At the time, I was too worried that I create self-doubt to myself; This strongly weakened my thought process.

Week 12: I always have to remind myself to take a small break sometimes, perhaps time it every twenty-five minutes and make it a habit. This is to allow the brain to digest, rest, and refuel up. We, humans, were never meant to sit down and work in front of screens like robots, we are not artificial intelligence. This totally helped me a great deal, not to mention I feel less stress and more efficient just by using time right.

Week 13: I was a little too late by the time I realize about it, having to reduce the quality of the file to the point of necessity is very important. I always think about the full hd details I can display to people, and knowing the limit for it.

“Getting your typography correct is not an easy thing to do.” By now some people might not realize but there is plenty of fail typography out there on the internet especially created by those uneducated individuals. The type has to be designed in a way that is aesthetically pleasing and functional.

The first tip is to start with the right font, as simple as it sounds, most people still get it wrong. There are thousands of typefaces out there, but few are appropriate for general use of design. Designers may have to choose fonts that are popularly liked to do a favor to most readers. The next tip is to never mix several typefaces in the same piece; This creates chaos and defeats the purpose of having type for people to read easily. There are typefaces out there designed for titles, and some specifically for the body. The title is often written in bold with sans-serif, while serif fonts are for the body since they're originally created to look elegant and easy to read in large bodies of text.

Pay attention to the hierarchy. It is important to think about how different text and bodies relate to each other, this is achieved by scaling to the right size, font selection, font styles (bold, italics, underline, etc).

NEVER stretch typeface. Think about the hours typographer had to spend on to make typeface perfect the way it is. Change the font family style to condensed if the text needs to shrink.

Choose the right color, don't just mix dark colored text with a dark blue background, we're not talking about how nice the color is but if it is even readable. Nextly, the smart and dumb quotes; Smart quotes are used for quoting, ' is used for expressing heights.

Avoid unnecessary justification of body text as it may create rivers, they are unstable to readers. Lastly, beware of orphans and widows as they are emphasized several times by all designers, they're the worst when it comes to typography.

https://medium.com/@inkbotdesign/10-typography-rules-every-designer-should-know-b5d2df992d1e

10 Typography rules every designer should know

by Inkbot Design

Joe's Design Blog

Search This Blog