ADVANCED TYPOGRAPHY - FINAL PROJECT

22/10/2018 - 19/10/2018 ( Week 9 - Week 13)

Chong Siong Loong Ron

Advanced Typography

Final Project - Design, Exploration and Application

LECTURE NOTES

22/10/2018 ( Week 9 )

For this week, we got a lecture on the typographic perception and organisation by a group of classmates. We will be learning about form and content, gestalt, law of perceptual organisation, layout as well as hierarchy.

29/10/2018 ( Week 10 )

For this week as usual we got a lecture by our classmate on typography in different medium, through this lecture we learn about print and screen was well as static and motion.

05/11/2018 ( Week 11 )
Public holiday

12/11/2018 ( Week 12 )

For this week everyone has to present about the colour's in typography. where what we did internally is we separated the job scope so we will not repeat the things that we all have to present. which is separated in to 4 topic, typography in sign, poster, web and title.

22/10/2018 ( Week 9 )

For 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 we have to achieve though this final project.

There is two way that we could approach this final project.

1. Design a font that amis to love a larger problem or to be part of a solution in the area of interest.

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.

A few website was given to use as a reference, where I feel its really helpful and interesting to look and read on.

1.1 Examples of website given

1.2 Examples of website given

1.3 Examples of website given

After ;looking at all the beautiful work done, I started to think of what interests me than I continue searching fro more ideas to experiment the final project.

While I was browsing I came cross google a lot so I went and have a look and do some research on google's doodle what kind of design it has and is there anything I can improve on so I was searching for the doodle I notice that all the birthday or u call it anniversary doodles for google was very ordinary, so I when on searching for the meaning for google and I try to find all kinds of birthday doodle google had. I did a simple slides on what I found, where I want to design a doodle for google's 30th anniversary where the design will relate back to its "co" meaning of the name google which is "googlo".

29/10/2018 ( Week 10 )

For this week we have to confirm our idea, so I decided to show my slides to Mr Vinod and Mr Shamsul. After explaining to them they said its was a interesting topic and I can proceed to design my doodle. the 1st thing which came out from my mind is a green colour blackboard with chalk writing on it so I sketch out the idea 1st before putting it in AI.

1.4 1st sketches of my idea

After my sketches is done I transfer it to AI to Create.

1.5 Process of 1st idea

1.6 Final jpeg of my 1st idea

After the 1st idea Is done, I was looking at it for awhile where I feel that I should maintain some of the identity of its original logo so I decided to find what font did google used for its logo, and I found that the font they use is called "product sans" which is very much similar to "Futura". " https://designforhackers.com/blog/googles-new-logo-font/ ". than I use Futura for the title in my poster to keep its original font.

1.7 Final jpeg of 2nd attempt of 1st idea

05/11/2018 ( Week 11 )

After the 2 attempt id done I felt like its too complicated and messy where I wanted a simple and an effective design where it relates back to the co meaning of the google name. so I came out with an idea with an inspiration of pixel image.

1.8 Inspiration

1.9 Inspiration

After looking at the examples I came out with and idea of mine

2.0 2nd sketch of my idea

After my sketches is done I transfer it to AI to Create.

2.1 Process of final idea

2.2 Chalk stroked used

2.3 Normal stoke used

2.4 1st attempt with chalk font

2.5 2nd attempt of 1st idea with Futura

2.6 Final 1st attempt with normal brush stroke

2.7 Final 2nd attempt with chalk brush stroke

2.8 Final 3rd attempt with normal stroke and blackboard background

2.9 Final 4th attempt with chalk stroke and blackboard background

12/11/2018 ( Week 12 )

3.0 Final jpeg approved by lecturer

After the design is approved by the lecturer but Mr Vinod gave me an advice to animated the doodle to make it more interesting and because its for screen used so is a good idea to animate it, so I decided to animate it in a way where I can show its googles 30th anniversary and show some math element to relate back to its "co" meaning of its name, I want to show that from the start of google's existence its was not so widely use and rather not so bright in its future because there was many competitor examples Firefox, yahoo, internet explorer etc... after improving its self, till now is one of the biggest platform where most of the people in this world relying on.

3.1 Process of gif

3.2 Process of gif

3.3 Process of gif

3.4 Process of gif

3.5 Process of gif

3.6 Process of gif

3.7 Process of gif

3.8 1st attempt of gif

After the gif is done I felt it was too slow so I decided to speed it up with the same generator "ezgif"

3.9 Final static doodle

4.0 2nd attempt of gif

After I showed to Mr Vinod and Mr Shamsul, was that my animated things are not enough where I have to add more animation on to my work to get a better marks, where there is some examples showed by mr vinod as reference. so I was asked to add more animation on the gif.

4.1 Process of final doodle gif in AI

4.2 Process of final doodle gif in AI

4.3 Process of final doodle gif in Photoshop

4.4 Final adjustment of doodle gif in Premium pro

Final google doodle gif

The problem which I can't solve is where my gif file is too big so when I upload it to the blog my file is compressed where the final out come of it is blur.

To sum up this project, my project is about creating a new doodle for google's 30th anniversary by putting in mathematics elements into the doodle where it can reflect back to googles core meaning of its name ' GOOGOL ' , where I did my research of the pass birthday or anniversary doodle that google has created and I can't find one doodle where it reflects back to its co meaning of the name.

To give the doodle that I have created an explanation, 1st of all this doodle is for googles 30th anniversary, where google did not started out good in the market where people tent to use more on Firefox, Yahoo and Internet explorer but google took some time to improve it self and where it makes google now one of the biggest platform for people to rely on and its brightened up many many people life.

FEEDBACK

29/10/2018 ( Week 10 )

Specific Feedback:

The choice of colour for my tote bag " White base " was a good because if the coloured font I have in my design that's why I choose the white base bag rather than the yellowish base bag.

General Feedback:

We need to think of the idea of our final project which will be then conducted in the remaining weeks. We were given the freedom to choose on our interest, only if our idea has a good purpose to solve a specific problem.

12/11/2018 ( Week 12 )

Specific Feedback:

The initial idea for this project is to do a static doodle but Mr Vinod say that since the doodle design is for wed used he suggest me to do a animated doodle rather than a static one.

19/11/2018 ( Week 13 )
Specific Feedback :
Mr Vinod and Mr Shamsul said that my animated things for the gif is not enough where is limited only and I have to add more animation on to my work to get a better marks, where there is some examples showed by mr vinod as reference. so I was asked to add more animation on the gif.

General feedback:
We must 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.

REFLECTION

EXPERIENCE

22/10/2018 ( Week 9 )

For this week we was introduced to our final project of this module and there was a few website links given to have a better idea of what could be done for this project.

29/10/2018 ( Week 10 )

I started to get some ideas out from what I browser from the website so I started with some sketches. To show it to Mr Vinod and Mr Shamsul.

05/11/2018 ( Week 11 )

This week is an e-learning week, we have to continue on our project at home.

12/11/2018 ( Week 12 )

We have to show our progress on our work to the lecturer and get some feedback to improve on, and everything must be finish before next week.

19/11/2018 ( Week 13 )
I have learn many different way that we can do just for a GIF where there is some examples showed by mr vinod to me where his other students did gif too but they did it in a different way, they do frame by frame in Ai and they animate item it in photoshop then they make the gif in iMovie where its something new to me where I learned for this week.

OBSERVATION

22/10/2018 ( Week 9 )

I observe that there are a lot of brilliant and beautiful idea out there where I did not come across before.

29/10/2018 ( Week 10 )

I observe that google did not do a doodle to relate back to its "co" meaning of googles name.

05/11/2018 ( Week 11 )

I observe that its important to leave some identity of the original "google" which is the colours and type of font used.

12/11/2018 ( Week 12 )

I observed that its a little hard to make the doodle relate back to the math idea I had from the very start.

19/11/2018 ( Week 13 )
I observed that there is not just two method to do a simple gif which is frame by frame in AI and transfer it to photoshop or after effects. where there is one students work showed to me by mr vinod which they uses a new way or other generator to produce the gif.

FINDING

22/10/2018 ( Week 9 )

I was stuck after browsing through all the good ideas and I was not sure on what should I do at that moment.

29/10/2018 ( Week 10 )

I found out that actually google got its name from a mathematical term "googlo"

05/11/2018 ( Week 11 )

I found out that it's a challenge for me to interplay the google name and the mathematical elements.

12/11/2018 ( Week 12 )

I found out that the 1st few art work I did was too much as in too much things in a doodle, so I decided to come out with a simpler version for the lecturer to choose

19/11/2018 ( Week 13 )
I found out that there is some problem where I faced where my file is too big when I load in photoshop, it took me like 2 hours to finish loading it, its time for me to master aftereffects as soon as possible where we can do great work with aftereffects. because classes for after effects was too little where I need to take some time to learn it during may semester break.

Grid
The grid, a matrix of vertical and horizontal lines that come together to create a two-dimensional structure, is a key element of design that allows for the systematic organization of information on a page. It is a guide to help the designer bring order to both small and large amounts of information while maintaining consistency through a design.

Things to consider when establishing a grid:

The grid should not be so simple that the design becomes monotonous.
Allow the smallest images to define the size of columns, rows, and modules.
Leave room for flexibility, especially for the headline.
Allow for adequate white space, to help the eye flow through the content.
Using the Rule of Halves is acceptable.
The more information that needs to go on a page, the more flexibility is required in the grid.
Make sure the grid reflects the connotation of the content being presented.
A grid should work with the content, not fight it.
A grid is merely the framework for a design. Ultimately it is the designer's abilities and sensibilities that bring the design to life.

Hierarchy
Hierarchy in layout design refers to different types of information of varying degrees of importance. It is determined by size, position, visual weight and colour. Hierarchy is so important when presenting information because wrong hierarchy, or a lack thereof, will confuse or alienate a viewer.

29/10/2018 ( Week 10 ) "BRAND"

Making full use of a good typeface largely depends on what project you are working on. For example, book designers usually choose typefaces that have all the weights and styles needed to create good typographic hierarchy in a particular layout. That means making sure that the selected typeface can cover headlines, subheadings, text (with italics), captions and so on.

In an interview with renowned artist and designer, Jianfeng Pan, he states that as a professional designer, communication must be talked about before the design. Therefore, communication is much more important than design. This is especially true with typeface design. A good typeface should be designed based on a particular communication aim in mind. For example, for what do you communicate? For what do you design? Is it serviced for a brand? Or cultural communication? Or personal likes?

12/11/2018 ( Week 12 )

Typeface: Garamond

Designed by Claude Garamond.
A class of Old Style Serif faces.
Also known as the subclass Garalde.
Based on the Venetian Old Style type.
Much of the lowercase was based on the handwriting of Angelo Vergecio, librarian to Francis I.

Typeface: Futura

Designed by Paul Renner.
Inspired by the typographic experimentation of the Bauhaus school.
Loosely based on simple geometric shapes.
Renner agreed that a "modern" typeface should express a contemporary point of view rather than be based on an existing design.
The most popular Sans of the mid-twentieth century and inspired many Sans types after its release.

Typeface: Gill Sans

Designed by Eric Gill.
Greatly influenced by Edward Johnston, who designed the typeface used for the London Underground signage.
Became popular immediately upon its commercial release.

Typeface: Optima

Designed by Hermann Zapf.
Inspired by the marble letters on the graves of Florentine families displayed in the Basilica of Santa Croce.
Based on classic Roman letterforms in proportion and character, but absent of serifs.
Features tapered stems- a trademark quality not found in other Sans types.
A great success when released.

Search This Blog

RON.C DESIGN JOURNAL