design hubs
On this page
Composition
3 min read

Focal Points

A focal point is the element the eye finds first. Every layout needs one — not as decoration, but as a navigational contract with the reader that says "start here."

When a reader lands on a page, they do not see it the way a designer assembled it — element by element, decision by decision. They see the whole frame at once, and before they have made a conscious choice, their eye is already somewhere. The question is whether the designer controlled where that “somewhere” is.

A focal point is the deliberate answer to that question. It is the element that wins the initial competition for attention — and uses that win to orient everything that follows.

How focal points are created

A focal point is not a property of an element in isolation. It is a property of an element in relation to its context. An ordinary headline becomes a focal point when given significantly more size, weight, or surrounding whitespace than neighbouring elements. An image becomes a focal point when it is the only high-contrast element on a page of pale text.

The mechanisms are the same ones that create visual weight: size contrast, value contrast, colour contrast, and isolation. The difference between visual weight and a focal point is degree. Every element has some visual weight. A focal point has so much more weight than its neighbours that the hierarchy is unambiguous.

One focal point per composition

Layouts with multiple competing focal points ask the viewer to make a choice that should not be theirs to make. Two headlines of equal size, two images of equal contrast, two calls to action of equal colour and prominence — these do not divide attention equally and fairly. They produce paralysis, or random scanning, or disengagement.

One focal point per composition does not mean one element per page. It means one element clearly wins the first moment of attention. After the eye finds it, a secondary element draws attention next, then a third. The hierarchy can be deep. But the entry point must be singular.

Focal points and hierarchy

The focal point is the top of the visual hierarchy, not the only element in it. From the focal point, the eye moves according to the secondary hierarchy the layout establishes. A strong headline (focal point) leads to a supporting paragraph (secondary), which leads to a call to action (tertiary). Each level of the hierarchy is visually distinct from the others.

In practice, hierarchy is created through type size, weight, spacing, and colour. The focal point is typically the largest, heaviest, or most isolated element. Secondary elements are moderate. Tertiary elements are quiet. The greater the contrast between levels, the clearer the hierarchy.

Focal points in multi-column layouts

In a grid of cards, every card is structurally equal — same size, same border, same typography. When everything is equal, nothing is a focal point. Card grids typically solve this by elevating one card: a featured card that is larger, differently coloured, or given more columns.

Without that elevation, the card grid has no entry point. The eye starts at the top-left (the default for left-to-right reading systems) and proceeds without guidance. This is acceptable for a catalogueue where the user is browsing. It is less acceptable for a landing page where the designer wants to direct the user toward a specific action.

The discipline of focal points is the discipline of not treating all elements as equal. Rhythm and repetition examines the other side of this — when consistent, equal repetition is the right choice.

Practice

0 / 3

Keyboard shortcuts

Show shortcuts
?
Search
CtrlK
Previous article
Next article
Close
Esc