VISUAL HIERARCHYExplain: Elements are arranged in order of importance in the designs. Such things as size, weight and contrast are used to create a hierarchical structure.

Visual hierarchy naturally creates visual direction and structure in your designs

Aims:

1. To understand how hierarchy is used within a design to promote structure and guide the viewers eye.

2. To develop design skills by using hierarchy and the formal elements to communicate a message to an audience.

3. To embed understanding into design intentions and show this in sketchbook work.

• Outcomes: you will create a number of designs which use the formal elements and are structured using the principle of hierarchy.

Visual Hierarchy – A Key Principle

• How do you structure your content?

• Where do you want your audience to look first?

• What is the call-to-action that you need to draw attention to?

• Hierarchy guides the user from one element to the next, ideally in a flow that corresponds to the content’s message.

• Also keep in mind that if you give visual importance or weight to too many elements, everything becomes flat.

• Elements should not have to compete for our attention.

Visual Hierarchy

Visual Hierarchy – A Key Principle

• Tell me the hierarchy

• What sort of visual characteristics create hierarchy:• Size

• Shape

• Colour

• Saturation

• Local white space

Hierarchy - Dominance

• Tell me the hierarchy

• What sort of visual characteristics create hierarchy:• Size• Shape• Colour• Depth• Texture• Saturation• Local white space

How could we change the elements to produce a better more hierarchical page layout?

What attributes can be changed to create hierarchy?

No hierarchy

Colour

Size

Local white space

Texture

Saturation

Weight

Each of these attributes can be used to create a structured hierarchy by applying them to different elements in a design.

The simplest is probably size and this can be a good place to begin to structure your page layout.

Your Turn: Open the file ‘Cracking’

• Change the hierarchy of this image and save a copy each time, consider how you are using the formal elements also:

1. Swap the levels of ‘cracking’ and ‘performance’ but keep the correct read flow

2. Increase the level of the image so that it is most important

3. Reduce the dominance of the red background

4. Rearrange the design so that ‘Time to act’ is the most dominant feature, and the rest of the elements follow an appropriate hierarchy

Techniques to try:size,color,texture,saturation,local white space,weight

Tasks: Working with Hierarchy, Visual Direction & a Range of Other Principles

Task 1 – Musical Event Ad Poster • The Rez presents

• Hip Hop Nite

• Every Wednesday

• With DJ Ripple

• Droppin’ tha Beatz

• Sponsored by RezAvoir

• Consider: Page layout

• Use line, shape, space, texture, colour

• Create a map of your hierarchy before you start

Task 2 – Food Festival Poster• Stratford Food Festival

• 7th & 8th June 2018

• At the Basin

• 70+ Food & drink stalls

• Chef demonstrations

• Food workshops

• Entertainment for all age groups

• Consider: Page layout

• Use line, shape, space, texture, colour

• Create a map of your hierarchy before you start

Try to embed some of the other principles:

• Alignment

• Repetition

• Rhythm

• Pattern

• Movement

• Emphasis

• Proportion

• Variety

• Unity

• Contrast

• Alignment

Bridge Task: Thursday 2.30pm

• Collect at least three examples of the use of visual hierarchy then:

• Formally analyse using analysis document used earlier in your research. Take into account the designers’ use of hierarchy to structure the design in a way which helps the viewer to read it correctly.

• Discuss what you have learnt and how you might use these findings to support the development of your own ideas.

Plenary:• I feel the most important thing I learnt today was?

• With the information I learnt today, I will now be able to…

• After today’s lesson I can now explain.

• Today I was able to make progress because…

• The part of the lesson I found easiest was…

• If was to set homework to build on today’s lesson I would…

• I am proud of myself today because….

• I think it is important to remember what I learnt today because…

• One thing I think I did really well was…

• Next time I would like to learn…