Clients often ask me to make their company logo make the logo bigger. And then "Can we make the key message bolder?" And then "Perhaps the banner looks a little mingy - how about a brighter photo?" And then they realise that their logo isn’t getting noticed - "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 can’t emphasize everything. It defeats the point - when every music note is loud, the tune can no longer be heard. Never yell at the reader.
Emphasis is relative. 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.
You create attention through size, shape, contrast, colour, texture, saturation, or even suround it by a lot of white space. To be the focus, an element has to look different.
Sometimes the dominant element is NOT 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.
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.
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.