Hierarchy

The single most important thing to get your head around — how a design decides, on your behalf, what someone reads first.

Where we are now

Preparation’s done. You’ve got a brief, a target market, assets, specs, copy and a mood-board. Now we get into the principles — the actual mechanics of putting something on a page so it works.

We’re starting with hierarchy, because everything else in this section is really just a tool for building it.

We reckon the single most important design theory to get your head around is Hierarchy.

Hierarchy is all about how a design guides the eye from one element to the next in a clear, logical order. When your design has a harmonious hierarchy, it looks intentional and professional. It’s the mark of a designer who knows what they’re doing.

Naive or amateur designs often lack hierarchy. Without it, elements end up competing with each other, and the viewer doesn’t know where to look first.

Hierarchy isn’t about what’s most important to you. It’s about what someone should read first, second, and third — and making that order so obvious they never have to think about it.

See it for yourself

Rather than explain this one, we’ll let it explain itself. The poster below is doing exactly what we’ve just described — and it’s telling you so as you read it.

Hit Walk my eye and it’ll number the order you almost certainly read it in. Then hit Flatten it to strip every hierarchy cue out and watch the whole thing fall over.

5… and only now, this line right up here.

1READ THIS.

2You'll read this line next.

3Then this bold bit — it's heavier than everything around it, so your eye stops here before it starts on the small stuff.

4And only then do you get to the body copy. It's small, it's grey, it's set in a narrow column, and it's asking for a commitment you haven't decided to make yet. That's fine. Body copy isn't supposed to win the fight for your attention — it's supposed to be waiting there, patiently, for the reader the headline has already convinced.

Nothing here is decorative. The size, the weight, the colour, the amount of empty space around each line — every one of those is a decision about what you'd read first. Make those decisions deliberately and this is what you get.

Five elements. One reading order. See if it matches yours.

The same words, the same order on the page. The only thing that changes is emphasis — and emphasis is the whole job.

Notice what happened when you flattened it. The words didn’t change. Not one of them. But suddenly there’s no way in — you have to read the whole thing from the top to find out whether any of it is for you, and most people won’t.

That’s the difference between a design and a document.

The five levers

Hierarchy is built by making elements readable in sequence. The things higher up in the hierarchy get emphasised using a handful of tools, and you almost always use two or three of them together:

Scale. Size is the bluntest instrument you have, and the most reliable. Big thing first, small thing later.

Colour. A single element in your accent colour will out-rank a much larger element in grey. Use it sparingly or it stops working.

Typography style. Weight, case, italics, letter-spacing. Bold beats regular. Two words in caps beat a sentence in sentence case.

Graphic devices. Blocks of colour, rules, shapes, containers — anything that fences an element off from its neighbours and says this one’s different.

Negative space. The most underrated of the five. Space around an element is what gives it room to be seen. Crowd something and you demote it, no matter how big it is.

We’ll dive into each of these in more detail over the next few lessons, so you can start applying them deliberately rather than by feel.

Assignment 02

The squint test

Open something you’ve designed recently — a flyer, a social post, an EDM, anything. Then do this:

  • Squint at it until it goes blurry, or shrink it on screen until you can’t read the words. What’s still legible? That’s your hierarchy, whether you meant it or not.
  • Write down the order you’d want someone to read it in. First, second, third. No more than five items.
  • Compare the two lists. If the thing you want read first isn’t the thing that survives the squint, you’ve found your problem.
  • Fix one thing. Just one. Make the first item bigger, or bolder, or give it more space around it — then squint again.
What to look for

The most common failure isn’t that nothing stands out. It’s that too much does — three elements all fighting at the same volume. Fixing that usually means making things smaller, not bigger.