Visual hierarchy

The most important thing on a screen should look like the most important thing.

The most important text should look the most important.

Visual hierarchy, side by side

When everything is the same weight, nothing leads. Size, weight, and colour tell the eye where to start.

How to apply it

Give titles a clear size + weight jump over body so the eye knows where to land.

Visual hierarchy in practice: a concrete example

A dashboard that answers at a glance

When every number on a dashboard is the same size and weight, the user has to hunt for the one that matters. Make the single most important metric large and bold, demote the rest to muted supporting text, and the screen answers “how are we doing?” in one look. Size, weight, colour, and spacing guide the eye. More labels don't.

Common Visual hierarchy mistakes

Everything shouting. When five elements are all bold, large, and coloured, none stands out and the hierarchy collapses.
Leaning on colour alone to signal importance. It fails in greyscale and for colour-blind users, so pair it with size, weight, and position.
A single primary action competing with three equally-loud secondary buttons, so the main path isn't obvious.

When Visual hierarchy doesn't apply

Visual hierarchy assumes there is a single most-important thing. On a neutral index, a settings list, or a glossary where items are genuine peers, forcing emphasis onto one is misleading, and even weighting is the correct choice. Scannable reference content wants consistency over drama.

Practise it on a real challenge

Article — the headline that reads like body text

An article renders its headline at the same size and weight as the paragraph below it. Readers arrive mid-page with no idea where the story actually begins.

Put Visual hierarchy into practice

Graphic Designer Creative Studio — A studio hub for client branding, assets, and deliverables.