Hierarchy is the whole job: how good design tells people where to look

When a design doesn't work, people usually describe it in vague terms: it feels busy, it looks cheap, something is off. Nine times out of ten the real problem is the same one. The design has no hierarchy. Everything is shouting at the same volume, so nothing gets heard.

Hierarchy is the order in which someone notices things. It decides what they see first, what they see second, and what they can safely ignore until they need it. Get it right and a page feels calm and obvious even when it carries a lot of information. Get it wrong and even a simple flyer becomes hard work.

Start with one question

Before choosing a font or a colour, answer this: what is the single most important thing this piece needs to communicate, and what should the viewer do next? A poster for an event needs the event name, the date and how to get a ticket. A product page needs the product, the price and the buy button. Everything else supports those few things.

Write the content down in order of importance before you design anything. That list is your hierarchy. The design's job is to make it visible.

The five tools that create hierarchy

• Size. The biggest thing on the page is read first. If two things are the same size, neither one wins.
• Contrast. Dark on light, colour against neutral, bold against regular. Your accent colour is most powerful when it's used sparingly.
• Spacing. Space around an element makes it feel more important. Crowded elements feel like a group; separated elements feel like separate ideas.
• Position. In most layouts people start at the top left and scan down. The first screen of a website matters far more than the fifth.
• Weight and style. A change from regular to bold, or from sans-serif to a mono label, tells the eye that something has a different role.

You rarely need all five at once. A headline that's larger, heavier and surrounded by space is already unmistakable. Adding a bright colour on top of that only gives you less to work with elsewhere.

Fewer levels, used consistently

A common mistake is creating too many levels: six font sizes, four weights and three colours on one page. The eye can't sort that many ranks. Most good layouts work with three or four clear levels: a headline, a subheading, body text and small labels or metadata.

Pick those levels once and reuse them everywhere. Consistency is what turns a set of choices into a system, and it's what makes a brand recognisable across a website, a social post and a brochure.

If everything is important, nothing is. Hierarchy is the discipline of deciding what matters most.

Alignment and the grid

A grid is simply a set of invisible columns that everything lines up to. It sounds restrictive, but it's what lets you break the rules on purpose. When most elements share the same edges, the one element that sits off the grid becomes a deliberate moment instead of an accident.

Strong alignment also reduces visual noise. Every new edge on a page is something the eye has to process. Fewer edges, shared by more elements, make a layout feel calm.

Test it in seconds

• The squint test. Blur your eyes or step back from the screen. Whatever still stands out is what people will notice first. If it isn't the thing that matters most, adjust.
• The five-second test. Show the design to someone for five seconds, then ask what it was about and what they were supposed to do. Their answer tells you whether the hierarchy works.
• The greyscale test. Remove the colour. If the layout falls apart, it was relying on colour to do work that size and spacing should be doing.

What to take away

Good hierarchy feels invisible. People don't notice it; they just find what they need without effort. That is the goal. Decide what matters, make it obvious with a few consistent tools, and give everything else room to breathe.