What hierarchy actually is
Every screen has a reading order whether you chose one or not. Visual hierarchy is choosing it deliberately: first this, then this, then that. Design isn't decoration here, it's the mechanism that makes your chosen order the one that actually happens.
Which means hierarchy starts with a decision, not a tool. If you can't say in words what the first, second, and third things on a screen are, no amount of adjusting will produce it.
The five tools, strongest first
| Tool | Effect | Failure mode |
|---|---|---|
| Size | Strongest and most obvious signal | Everything grows; the screen shouts |
| Weight | Strong without changing layout | Bold on bold, so nothing separates |
| Colour & contrast | Fast, registers before reading | Fails in greyscale and for low-contrast vision |
| Space | The most underused; isolation reads as importance | Cramped screens where nothing can breathe |
| Position | Top and left get read first in left-to-right languages | Burying the primary action below the fold |
Space deserves particular attention because it's the tool people reach for last. An element with generous empty space around it reads as important even at a modest size, isolation is itself a signal. It's also the only tool on this list that never adds visual noise.
Combining them without shouting
Hierarchy is relative. To make one thing louder you can either raise it or lower everything else, and lowering is usually better, it keeps the overall screen calm and leaves you room to go louder later if you need to.
The five-second test
- Show someone the screen for five seconds, then hide itA phone timer is enough equipment.
- Ask what it was about and what they could do thereYou're testing what survived a glance, not comprehension.
- Compare to your intended orderIf your primary action isn't in their answer, the hierarchy is wrong, regardless of how it looks to you.
- Fix by quieting, not amplifyingFirst attempt should always be reducing the competition.
Common mistakes
- Designing the screen before deciding the reading order
- Using all five tools at once on the same element
- Making the primary thing bigger instead of making the rest quieter
- Relying on colour alone, which disappears in greyscale and for many readers
- Two competing primary buttons on one screen
Key takeaways
- Hierarchy is a decision about order; the visual tools only enforce it
- Size, weight, colour, space, and position, space is the most underused
- Quieting the competition beats amplifying the winner
- A five-second glance test tells you the truth faster than any critique
Try it yourself
Write the three things a visitor to your main page should notice, in order. Then show the page to someone for five seconds and ask what they remember. If the lists don't match, you've found the work.
CHECK YOUR UNDERSTANDING
Pass the quiz below to unlock this.