Intro to Visual Hierarchy [VIDEO]

On the shelf ahead, there are a number of tins. All the tins are the same size, colour and shape – and any drawers or cupboards are also nondescript.

Without knowing exactly where and how to start your brew, you stomp around, throw things and slump to the floor defeated (perfectly normal reaction).

Now imagine you enter a second kitchen. In this kitchen there is a variety of different containers and drawers.

An empty cup is placed on the left, a kettle next to it and a large box in the middle of the counter that says ‘TEA BAGS’ on it. To the right, in smaller containers, are additional things you might want to add to your tea such as milk, sugar or cream, all labeled up. Then there is a drawer labeled ‘SPOONS’ just below the counter.

In this kitchen you are provided the tools to achieve your goal and they are positioned in a logical order.

Next time you start a new document, keep that second kitchen in mind and how easy it was to follow. Your reader’s going to love it when all the information they need is presented in the same kind of hierarchical order. They’re not going to miss your message.

There are many techniques professional designers use to create this hierarchy. Here are my most reliable four:

Size

It may sound obvious, but making something bigger makes it stand out more.

However, remember that it’s the difference between the sizes that creates the hierarchy.

Space

Adding space around an object will also make it notable because it looks more important.

Colour

Colour can be used in a number of different ways. A bold and bright object that stands out from the rest of the colours on the page will draw the eye. Whereas using similar colours with less contrast gives them less significance.

Typography

It’s best practice to avoid using more than two or three different fonts in a document. However, you can create contrast by using different fonts for headings and body copy.

The size and weight of fonts can also create a visual contrast.

How to Use a Visual Hierarchy in Real Life

The tips above are handy to keep on your desk. But if you’re keen to see exactly how I use them in my day job as a designer, you can use the video below.

As a quick exercise, I took the raw data from the Apple site and then used a combination of techniques to turn it back into a user friendly layout.

A word of warning.

Make sure your document is balanced – you don’t want to try and make everything prominent and throw everything on the page like this (see below) unless you want your reader’s eyes to bleed: