Visual hierarchy and focal points

Visual Hierarchy

the arrangement of elements according to importance and emphasis.

The question “What is the message?” needs to be answered before knowing which text and graphics should be emphasised.

Things to keep in mind when trying to design a good visual hierarchy…

In general, people from Western cultures will:

  • Quickly scan from upper left to bottom right to get an overview of the screen.
  • Tend to look at larger items first and smaller items last.
  • Be attracted to bright colors first, but also look at colors that contrast with or are different from other colors.
  • Interpret item places above other items as more important than items placed below.
  • Look at items that appear “heavier” first.
  • Assume arrows and elements pointing to the right mean forward while arrows pointing to the left mean backward.
  • Look at moving elements before static ones.
  • Tend to look at moving images of another human (such as a video) before moving on to other elements.

(Graham 1999)

Immediately, 2 thoughts come to mind: combining all the above list items into a single design is not going to create a supreme one; What do the other cultures in the world do when looking at designs?

Creating a Visual Hierarchy

  1. Draw 7 shapes of varying sizes (can use Photoshop of Illustrator) – Again I used Fireworks.
  2. Use colour or texture on some of them; leave some in outline.
  3. Decide which shapes should be seen first, second, third and so on.
  4. On an A4 sized page, arrange them in hierarchical order. – I still have no idea why were using A4 instead of, say 800×600.
  5. Produce five versions. – This has been extremely worthwhile.

visual hierarchy 5Since we are making for A4 size, I’ve attached a PDF of my 5 visual hierarchies and posted my favourite here.

Focal point

The following list contains some of the visual techniques you can use to emphasis the focal point in your visual hierarchy.

  • Make it the biggest.
  • Make it the brightest.
  • Enclose the item in a different shape than that of the other content screen.
  • Make the item a different shape that that of the other content screen.
  • Add a border to the shape around it.
  • Change the color of the item to make it contrast with other items onscreen.
  • Isolate it from other items onscreen.
  • Add a special effect to it (like texture).
  • Make it bright if everything else is dull (or visa versa).
  • Make it sharp if everything else is out of focus (or visa versa).
  • Position the item so all the other elements lead to or point toward it.
  • Animate it (make it blink or change colors, apply a rolling texture to it, or create a looping image animation).
  • Use another animated element to call attention to the item.

(Landa 1996)

Creating a Focal Point

  1. On a 20cm square format, draw ten arrows that all lead to one point or area on the page.
  2. The arrows should be visually interesting; they may vary in quality and texture, and they may bend, curve, or intersect.
  3. On an A4 sized page, draw seven arrows that lead to a main focal point and three arrows that lead to a secondary focal point. Make sure the arrows are visually interesting; give them texture, tone, various line qualities, and vary the directions and lengths.

focal point from 10 arrows

2 focal points from 7 and 3 arrows