Typography // Project 2B

October 24, 2020

Typography // Project 2B

20/10/2020 - 24/11/2020 (Week 10 - Week 14)

Fann Man Ling - 0344623 (BDCM)

Typography // Mr. Vinod & Mr. Shamsul
Project 2B : Typography- Expression, Hierarchy, Composition

LECTURES

Week 9 (Introduction and Briefing)

Mr. Vinod briefed us on the second part of project 2, which was to choose a quote of our liking and design it in an A3 poster. Then, we need to do the type expression to express the quote. Lastly, we were to animate the overall design. Before getting started on the process of designing, we need to show the poster design with the quote we choosed. Once got the approval and advise from Mr. Vinod and Mr, Shamsul, we then only work on it.

Week 10 (Feedback and Consultation)

After received feedback, we were then needed to further processing the static poster if the quote was approved, otherwise we need to decide another quotes again.

Week 11 (Feedback and Consultation)

We were required to show the poster design that was perfected in this week. After got the feedback provided, we were required to animate the work.

Week 12 (Feedback and Consultation)

For this week, most of us have done the animating part and showed the work to lecturers. As usual, we were given feedback on how to improve it based on our progress.

Week 13 (Submission of Project 2B)

This week is our submission date for Project 2B. Mr. Vinod let us to try design our persona with a template given in FB group while he and Mr. Shamsul were marking our e-portfolio.

INSTRUCTIONS

For this project, we have to do a poster which we need to animate it afterward. Mr. Vinod told us that we can choose any quotes and express our own idea for the poster, as long as it is relevant to society.

Project 2B: Typography- Expression, Hierarchy and Composition.

VISUAL RESEARCH

As usual, before I started working on this project, I looked for inspirations on Pinterest to see how other artworks designed in terms of composition, hierarchy and expression.

Fig 1 : Visual research (Source: Pinterest & Google)

IDEATION

Week 10

I wanted to create a poster that carries the social message as I want my poster to be something's meaningful that able to evoke and raise awareness of the audience. Originally, I came out with the quotes like "Go Green", "Save the Earth", and "All You Need Is Less", in a sense to convey a message about preserving our mother Earth. I did the poster design in Illustrator.

Fig 2.1 -2.2 : Draft idea for poster (1) (26/10/2020)

After the feedback session on this week, I changed the quote to "Enough for Your Need, Not Your Greed" as suggested by Mr. Vinod. As he said that the quote showed in Fig 2.1 was not completed, it would be better with the quote "Enough for Your Need, Not Your Greed".

Eventually. I came out with some draft ideas:

Fig 2.3 : Draft idea for poster (2) (1/11/2020)

Week 11

The comments I got from Mr. Vinod were to go for the second one at the bottom (Fig 2.3), which also fits my idea. There is a Chinese proverb saying something like Greed is like a snake trying to consume an elephant, which it's impossible for it to digest, so it died at the end. Hence, my idea was to arrange the layout like a snake moving.

Fig 3.1: Idea 1 (3/11/2020)

Mr Vinod then suggested me to cite any smaller-sized letters between the gaps of words, and also to add a thin tiny letter 'Y' at the 'N' to represent the snake's tongue. Shown below is my attempts to improve the idea:

Fig 3.2 : Draft 1 & 2 (10/11/2020)

With the thought of idea to present my quote as a snake that become immensely greedy to eat its tail (get itself killed because of greedy), I've came out with a revised layout that was more cater to my idea:

Fig 3.3 : Revised layout of Idea 1 (10/11/2020)

Week 12

After showing the revised version Fig 3.3, Mr. Vinod advised me to do a realignment to the quote from left to right for a better readability and make the quotes bigger in order to reduce the awkward gaps between.

However, after hours of attempting, the layout was just not working out for me. It became totally weird when I put the words reading from left to right (Enough at the left corner, Greed at the right corner) and it couldn't express my idea. I got so frustrated, and I deleted all the attempts.

After pondering for a while, a new idea came to me.

Fig 4.1: Idea 2 (15/11/2020)

The new version Fig 4.1 was rather close to my initial idea, in which a snack become greedy then eventually get itself killed. It reflects the quotes as well. For the designing process, I used 'Wrap' effect to bend the words, and used 'pen tool' to create the snake's head and put it at a part of the ellipse shape.

However, my concern was the typography expression become relying on the graphic element. I worried it was off the track. Thus, I tried to remove the graphic to see if it works.

Fig 4.2 : Idea 3. jpg (15/11/2020)

Fig 4.3 : Idea 3. gif (15/11/2020)

Sadly, when I showed Fig 4.3 to my friends, the feedback from them was that snake was so abstract, viewer would hardly recognize it.

After reworking on the poster for hour after hour, I've finally came up with this. Shown below are the fourth version of my poster design.

Fig 5.1 : Idea 4. jpg (15/11/2020)

Fig 5.2 : Idea 4. gif (15/11/2020)

For Fig 5.2, I animated it in After Effects. I added the specific path for each letters to move like a snake, and customized their motion speed by adjusting their keyframes .

Fig 5.3 : Animating in After Effects (15/11/2020)

Final Work:

Fig 6.1: Project 2B_Final. jpg (15/11/2020)

Fig 6.2: Project 2B_Final. pdf (15/11/2020)

Fig 6.3: Project 2B_Final. gif (15/11/2020)

FEEDBACK

Week 10

General Feedback: Mr.Vinod expected us to have a perfected poster in next week.

Specific Feedback: Mr. Vinod suggested me to use another quote "Enough for your need, not your greed" for my poster.

Week 11

Specific Feedback: Mr. Vinod suggested me to add a thin 'Y' at the 'N' of NEED as the snake's tongue, and put them close to the 'N' of NOT. He also suggested me to fill the gaps with some small grey words.

Week 12

Specific Feedback: Mr. Vinod and Mr. Shamsul told me that:

- The ai file need to be resized to A4 size and its dpi need to be 72dpi when exporting it to Photoshop.

- The maximum pixel height of the poster is 1000 px, we should not exceed it as it increases the size of image.

- The poster design should be arranged from left to right as people read from left to right.

-The size of the quotes could be larger in order to make the gaps between smaller.

REFLECTION

WEEK 10

Experience:

I was stuck to come up with the quote. I trying to find the quotes that I can design it in the poster and that totally limited my creativity.

Observation:

I was struggling with the layout and right typeface when I started doing the project.

Findings:

I realized that I should do more research and study on the Typography art to get a better understanding and learned from them, in order to improve my design. I felt I have no enough knowledge, especially on Typography.

WEEK 11

Experience:

I can say this project was a big headache for me compared to the previous Typography projects and exercises. I just can't make my idea to come true after figuring for hours, the feedback given was not working for me as well, so I need to figure the way out.

Observation:

I observed that it doesn't look like snake anymore when I fill the gaps between with the small grey words.

Findings:

I felt the urge to give up on doing this. It's so daunting to get this project right. Luckily, after I tried to shift my focus to another project of another module that I like, my tension about this project was reduced, eventually I got a new idea for it.

WEEK 12

Experience:

I felt stressful again as I have to figure another layout as the previous one just not working out.

Observation:

I noticed all my classmates can came out with a rather good work, but I just can't figure another new idea out. I felt angry and fed up.

Findings:

I need to stop compare myself with others, I should just focus on myself and my work to remove the unnecessary pressure on myself, which reduce my ability to do excellent work.

FURTHER READING

WEEK 10

I read this online article titled "When Typography Speaks Louder Than Words" on SmashingMagazine, which I think it's important for me to know in choosing the right typefaces to convey my message for different context through Typography.

Basically, this article is telling about the character and significance created by carefully selected typography. With the changes to the font, case, scale, colour, and positioning, the message could be different.

Quick summary of what typography can do:

1. Manipulating Feelings and Reactions

Large bold word, lowercase, closely kerned, positioning in the frame- enthusiastic and confident.
Condensed bold word, uppercase, widely kerned, positioning small at the corner- less friendly.

2. Making the most of Visual Language

Expressive typefaces and type manipulation- visually reinforce the meaning of the provocative text.
Typography can be used to communicate tone of voice, personality, age, gender, and mood.

WEEK 11

I came across this online article titled " Bold or Italic" on PracticalTypography.

There's some guides stated in this article in using Bold or Italic in a writing.

They are mutually exclusive.
Use them as little as possible, they are tools for emphasis.
Underlining bold text/ using lot of bold italic are both terrible ideas.
With a Serif font, use italic for gentle emphasis, bold for heavier emphais.
With Sans Serif, only use bold for emphasis.
Black/ Ultra are for large sizes (eg. headlines), don't work well at Body Text sizes.
Another option for emphasis: consider ALL CAPS or SMALL CAPS.

WEEK 12

This week, I came across this fun and interesting webpage from DesignBoom, regarding IKEA creates typeface out of brilliant twitter responses to its couch-creator tool. I think it's pretty cool and it reminds me of the Font Design project that we did previously.

The article is telling that IKEA has launced a new font, with each letter formed of pieces of sofa, and created using the home furnishing innovator's 'vallentuna' sofa planning tool, called SOFFA SANS. The font is inspired by hundreds of Twitter user who creates extreme examples including replicas of iconic game scenes.

The typeface "SOFFA SANS" has been dubbed 'the world's comfiest font'.

Search This Blog

Fann Man Ling (0344623)

Typography // Project 2B

Project 2B: Typography- Expression, Hierarchy and Composition.

Comments

Post a Comment

Popular Posts

MINOR PROJECT