I’ve had a few design conversations with clients can go like this:
- “Make our company logo make the logo bigger – it’s lost.”
- “Can we make the key message bolder?”
- “Perhaps the banner looks a little mingy – how about a brighter photo?”
- “Can you make the logo bigger?”
There will always be one element on a website that attracts the most attention. It could be bigger, or brighter, or bolder, and even have some animation. But that one element will automatically make other parts of the page look smaller, duller and less important.
You create a focal point through size, shape, contrast, colour, texture, saturation – or even surround it by a lot of white space. To be the focus, an element has to look different.
The dominant element is not ALWAYS the most important. Sometimes it is the “beginning of the narrative”.
A larger “featured photo” with a set of smaller ones lets the reader know where to start reading. It opens the conversation and entices the reader further. However, because many readers never to anything more than scan a page, whatever message you want people to take away should be clearly communicated in or near your dominant element.
Why create a focal point
You can’t emphasize everything. It defeats the point – when every music note is loud, the tune can no longer be heard.
For one element to stand out, another has to serve as the background or context. Some elements need to dominate others in order for your design to display any sort of visual hierarchy.
Without an entry point – for example a grid of similar elements, readers have to work a bit harder. They have to stop and think. Don’t make them stop or the next click could be away form your website entirely.
You have selected your focal point, now what?
After the single dominant element, your web page, advertisement or brochure becomes a hierarchy. Where to look next? As a general rule, people can perceive three to five hierarchical levels. The levels of your hierarchy should be based on the importance of information.
Most people notice items in the following order (assuming they can see the entire page – with a website, anything they need to scroll to see isn’t relevant to the hierarchy. The “bottom half” of a website page might have its own hierarchy, with the “call to action” as the most dominant element despite it being at the bottom of the page.
A common hierarchy
- The largest photo – often a banner (many commercial designs use a generic, meaningless photo and waste the opportunity to engage)
- A large headline, slogan or caption
- A featured box or widget (Latest news, upcoming events etc)
- The first subheading
- Bold or indented text
- A secondary photo
- Normal text
The designer can change the order the reader views, by giving that element greater dominance. Begin by prioritising every content item that will go on the page and then design a visual hierarchy to follow that prioritisation. A visual hierarchy doesn’t have to flow in a linear way from the top of the page like a newspaper. The designer can influence where people look.
A clear visual hierarchy allows readers to scan information, and it helps clients communicate their marketing message quickly and effectively. Within three seconds visitors should be able to pick up the key points and main message of the page.
Readers who stay longer should be able to instinctively scan through the hierarchy in order of importance. The longer they stay, the more detail they will get.