visual design
Visual hierarchy
What is visual hierarchy?
The order your eye follows across a layout, shaped by size, weight, colour and space. It tells you what grabs attention first - and what slips by.
Prefer to watch?
Watch the recap 0:27
The demo
Two rounds. Each time, find and click the screen's main action as fast as you can. First the layout is flat, with everything weighted the same. Then it has a clear hierarchy. We time both.
What this demo shows (text version)
You hunt for the primary button on a mock screen twice: once where every control shares the same size, weight and colour, and once where the main action is large and bold and the rest recede. People find the ranked version far faster, often in a glance, because visual hierarchy guides the eye before reading begins. Flatten that hierarchy and you hand the work back to the reader, who now has to inspect every option in turn.
Size, weight, colour and spacing guide the eye to what to read first, second and third. Get it right and the page is scannable at a glance; flatten it and everything fights for attention, so nothing stands out.
You found the same kind of button far faster once the design ranked it for you. That is visual hierarchy: size, weight and colour steering your eye before you have read a single word.
Hierarchy is a budget. Emphasise everything and you have emphasised nothing; a screen with three primary buttons has none. Pick the one action that matters and let the rest recede.
The eye is lazy and obedient: it goes to the biggest, boldest, most colourful thing first, every time. That is a gift if you aimed it at the right thing, and a tax if you did not.