Design

Visual hierarchy

Visual hierarchy is the arrangement of elements so that the eye meets them in a deliberate order: size, contrast, spacing, colour and position tell the reader what matters most before they have read a word.

A page with no hierarchy makes every element compete. A page with hierarchy answers the question "where do I look" without the visitor noticing they asked it. Headlines larger than body text is the obvious case, but the same logic governs which button is filled and which is outlined, how much space surrounds a claim, and whether proof sits next to the statement it supports or three sections away.

Hierarchy goes wrong in two directions. Flat pages, where everything is the same weight, read as a wall. Over-emphasised pages, where six things are bold and large, read as shouting, and the eye gives up choosing. Both come from the same root: nobody decided what the page was for, so nothing could be made subordinate.

When I audit a site, hierarchy is usually the fastest fix with the largest effect. Nothing needs redesigning; the existing elements need reordering by importance, and the importance has to be decided first.

Website design service