When someone lands on a page, their eye needs somewhere to go first. A visual anchor is that landing point — the element that catches the eye, orients the reader, and gives everything else a place to fall around it.
Think about the last time you walked into a room and it felt immediately comfortable and easy to navigate. There was probably a focal point — a fireplace, a large window, a piece of art. Your eye went there first, and everything else made sense in relation to it.
Pages and screens work the same way. When there's no dominant element — when everything is the same size, the same weight, the same colour — the eye doesn't know where to start. Users scan aimlessly, absorb less, and leave feeling like the page was “hard to read” without knowing exactly why.
A visual anchor solves this. It's the biggest number on a stats section, the product photo on a landing page, the bold pull quote mid-article, the avatar next to a testimonial, the icon that precedes a feature. It's the first thing the eye hits — and from there, the rest of the page falls into a natural reading order.
“The eye needs somewhere to land. Without a dominant element, a layout has no hierarchy — just noise.”
Below are two versions of a product feature section. Same words, same features, same layout structure. In the bad version, everything has the same visual weight — nothing draws the eye, nothing creates a reading order. In the good version, icons, a large stat, and a bold headline act as anchors. The eye has an obvious path through the content.
Nothing jumps out. The stats look like labels. The features all weigh the same. Where does your eye go first?
The large numbers anchor the stats. The section title anchors the features. Each icon anchors its card. The eye follows a clear path: numbers, headline, features.
The good version doesn't have more information. It just has more structure. The large numbers work as anchors because they're dramatically bigger than the labels below them — the contrast creates hierarchy. The icons work because they're the first distinct visual element in each card, so the eye finds them before it reads the text.
A testimonial without a face is just a quote floating in space. There's nothing for the eye to land on first, so readers don't know where to start. Add an avatar and everything changes — the eye goes to the face, then naturally moves to the name, then to the quote. The avatar acts as a reference point that gives the whole card an obvious reading order.
Three floating quotes. The eye doesn't know where to start on any of the cards.
The avatar is the anchor. The eye lands on the face, reads the name, then reads the quote. Same words — a clear reading order now exists.
This is why avatars matter even when they're not strictly necessary. They're not decoration — they're reference points that make the content easier to process. The same logic applies to any visual element that comes before text: icons before feature titles, numbers before labels, logos before company names.
On a pricing page, users come with one question: how much does it cost? The answer to that question needs to be the visual anchor — the biggest, most prominent element on each card. When the plan name is larger than the price, the hierarchy is working against what users actually need.
The bad version puts the plan names in large type and the prices in smaller text underneath. The good version flips this: the price is the anchor (large, dominant), the plan name is secondary (small label above), and a clear CTA sits below. The user's question is answered before they've consciously started reading.
“Starter”, “Pro”, “Team” are the biggest elements. But the user came here to find out the price — that answer is buried in smaller text below the name.
The price ($9, $29, $79) is the first thing the eye lands on. Plan names become small labels above. The user's question — “how much?” — is answered before they consciously start reading.
The anchor should always match the user's primary question. On a pricing page, that question is “how much?” so the price should be the anchor. On a product page, the question is “what does it look like?” so the image should be the anchor. On a team page, the question is “who are these people?” so the portrait photos should be the anchors. The hierarchy should serve the user's goal, not the page's aesthetic preference.
Anchors show up in different forms depending on what the page needs to communicate.
Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design. Rockport. · Müller-Brockmann, J. (1981). Grid Systems in Graphic Design. Niggli.