Visual hierarchy controls the order in which users process information on a screen. Size, color, contrast, spacing, and position all signal importance — the eye goes to the dominant element first, then cascades down through secondary and tertiary levels.
If you hand someone a newspaper, they know immediately what to read first. The biggest headline. Then the photo. Then the subheading. Then the body text. Nobody taught them this — the size and weight of each element made the order obvious.
That's visual hierarchy in a nutshell. It's the system that tells people, without words, “start here.” When it works well, users move through a page naturally, picking up the most important information first. When it doesn't work, everything fights for equal attention — and users read less, understand less, and leave faster.
Visual hierarchy isn't just about making things look nice. It's a communication tool. Every decision — how big a headline is, how much whitespace surrounds it, whether a button is filled or outlined — is a claim about relative importance. The question is whether those claims are intentional and true.
“Where the eye goes first determines what gets understood. Everything else is decoration.”
This is one of the most common places hierarchy breaks down: article pages where every element — headline, author, date, body text, subheadings — all sit at roughly the same visual weight. The page looks organised, but the eye has no path.
Compare the two versions below. Same article, same words. One has a clear hierarchy — the headline dominates, the meta info is visually secondary, the subheadings mark a clear level below the title. The other treats everything as equal.
Title, byline, tags, subheadings, body — all at similar sizes. The eye has no natural entry point and no clear path through the content.
Three clear levels: the title dominates (22px bold), subheadings sit clearly below it (16px), and body text recedes (13px, lighter colour). The eye follows the order automatically.
Dashboards are hierarchy's hardest test. There's a lot of information, and the temptation is to show it all at the same size so nothing gets missed. But when everything is equally visible, users have to scan every element to figure out what matters — which defeats the whole purpose of having a dashboard.
The fix is to establish a clear top level: the one or two numbers that answer the user's most important question. Everything else serves those numbers — it explains them, provides context, or offers detail on request.
8 cards, all identical in size and weight. The user has to scan every single one to find what they actually care about.
Revenue and new users sit at the top level — large numbers, generous space. The four supporting metrics below are clearly secondary: smaller, tighter, lower. The eye knows the order before the brain reads a word.
The good dashboard also does something subtle: the open tickets card uses red for its number. Red is an attention signal — 17 open tickets including 3 high-priority ones is information that genuinely needs to stand out from the supporting metrics. Even within a secondary group, hierarchy can exist.
The simplest way to audit your own hierarchy: squint at your design until it blurs. Whatever you still see is at the top of your hierarchy. Whatever disappears is at the bottom. If the wrong things survive the squint test, your hierarchy is working against your users.
Most hierarchy problems come from one of two mistakes: either everything is the same size (no hierarchy at all), or there are too many competing “most important” elements (false hierarchy — everything shouts). The fix is always the same: pick one thing per section that gets to be dominant. Everything else serves it.
Lupton, E. (2010). Thinking with Type. Princeton Architectural Press. · Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design. Rockport.