Visual Hierarchy

Visual hierarchy is the order in which a viewer perceives and reads content. It starts with a decision, not a style: what matters most, what comes second, what is only support. Without that ranking, styling only decorates confusion.

A practical way to rank is to write the content as a list in priority order before opening a design tool. Assign each item a level: primary, secondary, tertiary. Most pages work with three or four levels. If you find that everything is level one, the content or the brief needs to be questioned.

Ranking should reflect the viewer's goal, not the organisation's wishes. A hospital page that leads with the building's history may satisfy the board but fails the patient looking for opening hours. Check ranking against what people are actually trying to do.

Once the ranking is clear, design becomes a matter of expressing it with size, weight, colour and position, which the next modules cover. A clear ranking makes those choices quick and defensible.

Size is the most direct tool of hierarchy. Larger elements are read first. But scale works best in a clear ratio, such as each level being about one and a half times the one below, so the steps feel deliberate rather than arbitrary.

Weight, meaning the thickness of the type or the heaviness of a shape, adds a second dimension. A bold line of the same size as its neighbours can still lead. Contrast of tone, meaning the difference between the element and its ground, is the third. High contrast pulls attention and low contrast recedes.

Use fewer and stronger differences. Three sizes and two weights, used consistently, give a clearer hierarchy than eight sizes and four weights. Small variations in size look like mistakes, not decisions, so make steps distinct enough to be intentional.

A useful check is to reduce the page to its distinct levels and count them. If you cannot say in a sentence what distinguishes each level, simplify. Consistency across pages matters too, so that the same level always looks the same.

Colour is a strong signal of importance because the eye is drawn to colour differences quickly. A single accent colour against a restrained background draws attention precisely because it is rare. This is the idea behind a primary call to action in a different colour from everything else.

The effect depends on scarcity. If five different items are all coloured with the accent, the accent loses its power and the page becomes noisy. Reserve the accent for the one or two elements that truly deserve it, and keep the rest neutral.

Colour must be paired with other cues. People with colour vision deficiency may not see the difference, and a greyscale print removes it altogether. Weight, size, position or an icon should still communicate importance without colour.

Also remember that colour has meaning conventions. Red is commonly read as warning or error, and using it for a positive primary action can confuse. Choose accent colours with the meaning they will carry in the context of use.

Viewers do not read all of a page evenly. Eye tracking research on web pages by the Nielsen Norman Group described common patterns such as an F shape, where people read across the top, then a shorter line lower down, then scan down the left edge. Other layouts produce a Z shaped path, with a diagonal from top left to bottom right.

These patterns are tendencies that depend on content and task, not fixed laws. Dense text pages encourage F like scanning. Sparse pages with a clear call to action are more often read in a Z or in a simple top to bottom order. Understanding the likely path helps decide where to place things.

Place the most important items where the path naturally passes, and use alignment and spacing to make the path obvious. Left aligned headings at the start of each section support scanning. Front loading headings and paragraphs with the key word helps in an F pattern.

In languages written right to left, or in vertical scripts, the paths are mirrored or different, so check reading direction for the audience. Always verify assumptions with the actual content and users.

A hierarchy is a hypothesis about what people will notice and in what order. Like any hypothesis it should be tested. Quick tests are cheap and reveal problems early, before they are built.

The squint test is the simplest: blur your eyes or the image and note what stands out. Whatever remains visible is your effective hierarchy. If a decorative element survives while the main message vanishes, the order is wrong.

A five second test shows the layout to a viewer briefly and then asks what they remember and what the page is for. This reveals what was actually perceived. A first click test asks where they would click first to complete a task, and measures whether the hierarchy points toward the right action.

Record results and compare against the ranking from the first module. Differences are the design work still to do. Re test after changes, since fixing one issue can shift attention to another.

The logic of hierarchy is the same across media, but the numbers change. Print is read at arm's length and can hold fine detail. Screens vary from phone to desktop and require flexible scales. Signage is read at a distance and often while moving, so size and contrast have to be much larger.

A useful way to think is by viewing distance. A poster read from several metres needs a headline much larger than a leaflet read in the hand. Minimum sizes grow with distance, and contrast needs to rise with poor light or motion.

Responsive layouts need hierarchy that survives resizing. A level that is a large heading on desktop may need to remain the largest item on mobile even if absolute sizes shrink. Define hierarchy in relative terms, as ratios and levels, and let the absolute values adapt.

Across a system of media, such as a campaign with a poster, a web banner and a flyer, maintain the same ranking while adapting scale and placement. The viewer then recognises the campaign by its order as well as its look.