12th February 2016

Take a closer look at visual hierarchy in web design

There are many reasons why we don’t go back to a site; slow load times, terrible navigation, annoying pop-ups and at the end of the day it’s all about preferred content. The content of a site is the single most important element that helps increase visitor numbers.

Have a review of your own website; What is the first thing visitors see when they land on your site? Do they understand your site’s purpose?
Sometimes you visit a site that may be visually appealing, but something is missing. It’s got the well-crafted colour palette, inspiring graphics, perfect alignment and the clever copy, but there is something lacking and it doesn’t stand out, overall it just looks a little dull. This site isn’t working the hardest it could be, and the solution to this problem is visual hierarchy.
Visual hierarchy is the difference between a site that strategically influences its visitors, their journeys and buying decisions, and a site that just looks “nice and pretty.”
By establishing a clear visual hierarchy of content and graphics, visitors almost can’t help but unconsciously follow the path that you’ve set out for them. Technically, no two visitors will read a page the exact same way but you can create strong trends towards the manner you prefer. The most powerful way to do this and draw attention to all the right places is to become an expert at using the basic tools of the trade; size, colour and space.

Defining the right type size

Size, particularly for text, is a designer’s most powerful tool. The use of big type adds a level of order to content, text that is bigger demands more attention. The largest type should be the most important; the smallest type should be the least important.

Use colour to your advantage

Using colour can be really effective and is a quick way of ensuring that your elements can achieve the visual weight that you want them to have. You can also use colour with contrasting elements so that you can help draw attention to what is more important. How good is a call to action button if it’s the same colour as the rest of your site?

White space sells

Another way of drawing attention is to give your content ample room to breathe. If there is substantial white or negative space left around a call to action button, or a headline on a page has breathing space, these elements will be more visible to readers. The right amount of empty space between vital elements will keep them at the centre of attention.
When I started writing this post this morning, Internet Live Stats told me there were 986,250,015 live websites online. As I finish there are 986,259,467 – that’s almost 10,000 more websites! With that many websites being put live in a 7-hour period, how will you keep visitors engaged with your site and keep them coming back for more?
Visual hierarchy in web design isn’t optional, it’s mandatory. Always be conscious of what is drawing attention on your page and make sure that it’s intentional.