Search This Blog

Sunday, October 24, 2010

Key Principles of Graphic Design

Visual Hierarchy
This is the principle of how something is formatted, a piece of graphics is usually designed so you notice certain aspects first, each item has an order, a visual hierarchy. For example this web page for UK Vogue 

I noticed today's highlights section first, a video slideshow of the latest fashion news, second to this was the flashing 'Hogan' as campaign which not only features as to graphic videos on the page , but also forms the background. This clearly is of upmost importance to advertise this particular brand. It contrasts black , white, and colour imagery which is emphasised by flashes of light replicating the flash of a camera. Which connotes the glamour of the brand and therefore dominates the web design. Also the bold white typeface stands out against the dark tones of the imagery, again reinforcing its dominance, the emphasis is more on the brand itself than anything displayed in the background. 3rd in the hierarchy would be Vogue title, the familiar trusted typeface, or the 'Latest Features' section. The elements that come in last are the smaller stories 'breaking news' and Vogue's categories for the website (News, Spy, Fashion Shows).
The Vogue web page example shows various devices of making sure our attention is directed in a certain order, although today's highlights was my initial thought, the flash of the Hogan brand quickly diverted my attention elsewhere. The page is not cluttered it allows you to go through each aspect step by step, but does keep trying to re-direct you to the Hogan brand through repetition. (261)


Tone Of Voice
Typography has a tone of voice which can be translated over to what it is being used within or around. 'Chemical Burn' kinetic typography by Sebastian Jaramillo from the film fight club. Notice how the bold typeface that was once whole, has now been splintered and torn away as if the lettering is also getting a chemical burn. The red lettering taken out of context could be laughter, however due to the colour connotations and the shaping of the typeface, the tone set would be more of agony. The large green lettering has the voice of character 'Tyler Durden' he is dominant in control, the character to whom he is speaking to, 'The Narrator' has a smaller typeface as if whats he's saying does not matter it has no relevance, portraying the reality of the situation he is in. No control over the chemical burn. 


 As the motion graphic continues the lettering adjusts according to the tone of voice of the scene from Fight Club. As he tries to think of calm setting to take his mind of the pain, the tone of voice changes, the letters are black and small, simple serif typeface. Smaller than the rest of the imagery, less obvious, less urgent therefore a calmer tone. However the black still allows it to stand out. The graphics are shocking it is aimed to communicate exactly what is going on in the actual film without any imagery, you could watch and understand these graphics without the original context due to the tone of voice.
By changing the size, colour, and shape of typography we change the way it is interpreted, for example, WHISPER does not give the impression someone is whispering. 


Bibliography
http://www.vogue.co.uk/default.aspx?gclid=cowwq9mk0qqcfvhc4wodlvsvkg


http://www.sebastianjt.com/portfolio/project/fightclub

No comments: