Week 11 - PRINCIPLES OF VISUAL HIERARCHY

Following last weeks lecture which is how to organise your website. Today, we talk about

Visual Hierarchy is about signaling where the reader should read first and what they should read next. This usually follow the F, E and Z pattern. Most common websites that are read very quickly are usually the pattern F and Z. Where as longer text websites such as google search are identified as pattern E. Important information that the designer would like the audience to see are usually stationed at the very top so the readers do not have to scroll all the way down.

- Scale:

Is how the position their wording, how big and how small the text are. It is to allow the audience to know which one they should read first and so on. For example NikeSB, they have made the SB Dunk to be the largest text so people would easily read that one first.

For this, the designer wants the reader to view the image first because of how big the shoe is shown on the website then would be the text on the left side.

- Colour:

Next is colour, if the design are usually monotone, you should use a strong colour or something that is bold so our eyes will follow it. One example is below, where it is mostly white and black but with a small text on the side which is coloured red.

When designing a page with information in the bottom, you should crop a bit of the front page indicating that can be more information seen at the bottom of the page allowing signaling the reader to scroll down.

- Whitespace and Texture:

Usually our eyes tent to look at complex and complicated texture which is why whitespace are required to balanced it out.

The use of white and letters in this, allows the readers to check out the website. Having that whitespace is also very important because it enables the designer to put stuff on the page and when to stop putting to much stuff.

- Break the Grid

This is about contrast, when doing the same thing it would be very boring which is why you need something different to stand out. Then the eyes will travel to something that is unique. Contrast also applies in colour, size, scale. One being thin or thick, one being colourful or not, one being very simple or busy. Contrast is always present in all design.

When you have a text behind and no one would really read it it is very boring however, if you put non regular shapes onto of it, it becomes more interesting and unique. Break the grid, means more finding creative ways to not follow the grid that much. Not organised in typical proper layout but choosing where to put the certain context in certain places.

- Typeface

Contrasting typefaces, bringing something that is very serious and something that is more playful will be more interesting. For example, dinner for five is written in handwritten font compared to the side. This gives out different emotions depending on the fonts placed in certain areas.

- Colour Palette

Less is more. Generally we try not to use too much colours on a website. Not all colours on the palette are used equally, picking only the primary, secondary colour. If you use all the colours equally it might looked to messy and would not be clear which is why the limit to the most dominate colour and colours that would support the dominate one on certain pages.