Website Visual Hierarchy: A Working Guide for Marketing Pages

When a marketing page feels busy, the usual diagnosis is "too much content". More often the content is fine and every piece of it is shouting at the same volume. Website visual hierarchy is the order in which a visitor notices things. If you do not decide that order, the page decides it for you, usually in favour of whatever is largest or brightest.

This is the process I use on marketing pages, including the Datamotive website, where the old homepage and product pages used different type weights on adjacent sections and led with features rather than outcomes.

Rank the content before you design it

Hierarchy is an editorial decision first. For each section, write the content as a list and number it by importance:

1. The one thing the visitor must understand.
2. The evidence that makes it believable.
3. The action to take next.
4. Supporting detail for people who want more.

If two items share the top spot, the section is trying to do two jobs. Split it. A page where every section has a clear first item is already most of the way to good hierarchy, before any visual decision.

Use scale for the big jumps

Size is the strongest signal. Use it for the largest difference: headline versus everything else. The jump should be obvious. A headline at 1.2 times the body size does not read as a headline; it reads as a slightly large paragraph.

A defined type ramp keeps scale consistent across pages. Datamotive used one ramp for all three products, so a product page headline had the same weight in the hierarchy wherever it appeared. On this site the type roles are fixed as display, heading levels, lead, body, small and label, each fluid between a minimum and maximum size. How to build a brand typography system covers how to set those roles up.

Use weight and colour for the smaller steps

Within a level, use weight and colour for finer distinctions:

• Weight separates a subheading from body text at similar sizes.
• Colour value pushes secondary information back. A secondary ink colour for metadata and captions lets the main text lead without making the secondary text hard to read.
• Accent colour should be rare. If the accent appears on the headline, the button, the icons and the links, it stops pointing at anything.

Keep secondary text readable. On this site the secondary ink still meets 4.5:1 against the page. Hierarchy should never be achieved by making things illegible. Accessible colour pairs explains how to document which combinations are allowed.

Use space to group and separate

Space is the most underused hierarchy tool. Items close together read as a group. Items far apart read as separate. A heading should sit closer to the content it introduces than to the content above it, otherwise it floats between sections.

At Datamotive the system called this Architectural Fluidity: sections separated by tone, spacing and hierarchy rather than heavy borders. Fewer borders and boxes leave the remaining contrast with more meaning. Website section rhythm goes deeper into spacing between sections.

Use position deliberately

People scan predictably. The top left of a section, the start of a line, the first item in a list and the area near an image get attention first. Put the ranked first item there. Place the action where the reading path ends, not where there happened to be room.

On long pages, repeat the main action at natural decision points rather than in every section. B2B CTA design covers how to vary the action as the visitor's readiness changes.

Check one primary action per view

For each screen-height of the page, ask what the single most important action is. If there are three equally prominent buttons, the visitor has to choose before they understand. Make one primary and the others clearly secondary: a lower-contrast button, a text link, or a later position.

Test the hierarchy quickly

Three tests catch most problems:

1. The squint test. Blur the page, or step back from the screen. The first three things you see should match your ranked list.
2. The five-second test. Show the page to someone for five seconds and ask what it was about and what they could do next.
3. The grey test. Turn the page greyscale. If the hierarchy collapses, it depended too much on colour.

Run the tests at mobile width as well. Hierarchy often survives on desktop and fails on a phone, where side-by-side emphasis becomes a single stacked column and everything looks equally important. Restack or redesign covers that decision.

Common hierarchy mistakes

• Bold, colour and size all applied to the same phrase.
• Feature grids where six items have identical weight and no lead item.
• Decorative images larger than the content they illustrate.
• Body text set too light or too small to look "clean".
• Logos of partners or customers given more visual weight than the product.

Hierarchy is not a style. It is the page's argument made visible. When the ranking is right, the visual decisions become easier, because each one is just a way of saying "this first".

The before and after homepage and product pages in the Datamotive case study show one type ramp and one hierarchy applied across three products.