Squinting at a page

When a page opens, the eye lands somewhere first and then moves on. That order forms whether or not the designer plans it. When nobody plans it, the page decides on its own: the brightest badge, the boldest text or the largest image gets seen first, and the one thing you want people to do gets lost in the crowd.

Visual hierarchy is less about choosing what is seen first than about choosing what steps back. A page that emphasises everything emphasises nothing.

Scanning, not reading

Research into how much of a web page people actually read shows that most of it is passed over:

That is why what a page brings forward in its first few seconds matters as much as the text itself. From the handful of elements they scan, readers decide what the page is about and what they should do.

What sets visual weight?

We call an element’s power to attract attention its visual weight. Five things set it:

• Size: a large element is seen before a small one.
• Value contrast: the light–dark difference from its background. Stronger than hue.
• Saturation: a vivid colour stands out among muted tones.
• Isolation: an element with space around it is noticed more easily than one in a crowd.
• Position: the top and left of a page (in left-to-right languages) are scanned first.

All five work at once. A large bold heading can weigh the same as a small but very vivid badge. The trouble is that this balance is hard to predict on paper.

The squint test

Designers have an old habit: squinting at the screen. With narrowed eyes the text becomes unreadable and details disappear; only size and contrast remain. Whatever is still distinguishable in the blur sits at the top of the page’s hierarchy.

Put two layouts of the same product card through that test in the demo below. Increase the blur and remove the colour; see which element refuses to disappear.

When everything is emphasised

Nothing in the competing layout is wrong on its own; each element looks reasonable. The problem is that all of them want to matter at the same time. The product name is bold, the price is bold, the discount badge is red, the description is large. The eye jumps from place to place, and the one thing that needs doing, adding to the basket, is left as a small button in the noise.

The clear layout does not add elements, it pulls them back. The product name becomes the only large heading, price and description calm down, the red badge turns into a quiet label, and the page’s only saturated colour is given to the button. The result: even in the blur, the order of the top three elements reads clearly.

Colour alone does not build hierarchy

When you remove colour in the demo, the red badge of the competing layout loses most of its weight. That makes a good test question: was the hierarchy built only with colour? Colour-blind users, dim screens or a phone in direct sunlight all erase colour differences. A hierarchy built on value contrast and size survives those conditions.

A short checklist

• Does the page have a single primary action, and is it one of the heaviest elements?
• Is saturated colour used only where emphasis is needed?
• Does the hierarchy still read with colour removed?
• Is there enough space around the primary element to set it apart?
• Are two elements still competing at the same weight? If so, can one step back?