visual design
Visual hierarchy
The order your eye travels a layout, set by size, weight, colour and space. It decides what gets noticed first - and what gets missed.
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.
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.