In our latest post, here at NetConstruct, we discuss the importance of a visual hierarchy, discussing what it is and some top tips on how to achieve it.

Continuing in our 'back to basics' series of posts that don't live in our digital bubble, here's a short piece about the power of design cues.

 

By altering what visitors see first on your website, you can influence how they behave, including their buying decisions. This means that, as a web designer (or UI designer as we call them here), your job is multi-faceted, and you should also see yourself as a salesperson as well as a designer.

One of the best ways to do this is through the creation of a visual hierarchy. In this post, we’ll look at what a visual hierarchy is, as well as some top tips on the best ways to get noticed.

What is a visual hierarchy?

Visual hierarchy entails arranging and organising all your website elements so a visitor will naturally gravitate towards the most important information on the page.

This means that visual hierarchies are about ensuring your designs are communicating as effectively as possible and looking at design concepts strategically, rather than repeating a favourite technique.

Visual hierarchy involves using a number of different design skills, including colour, contrast, typography and spacing. All of these can help to organise all your content on the screen, creating a focal point to help inform a buying decision.

Ideally, you want to lead visitors through a narrative to complete a desired action (such as sign-ups, contacts or sales) in a way that’s natural and enjoyable. This could be done by adjusting the colour, size or even position of some elements, in order to draw a user to those first.

Use colours cleverly

We’re all visually drawn to colour, and each colour has its own attention-grabbing capabilities. For example, a bold colour like red will attract more attention than a muted beige tone.

This means that you can immediately command the visual hierarchy by giving important elements of your site striking colours. For example, a bright splash of a vibrant yellow is hard to miss (which is why they’re used on road signs and warning labels).  However, you’ll need to ensure that you don’t turn your website into a rainbow. Use these bold colours sparingly and with purpose to maximise effect. If everything is bold and shouting and trying to stand out – nothing will!

Also, remember the importance of temperature. Colours like blue and green are associated with the cold, while warmth is associated with colours like red and orange. Neutral colours are white, black and grey. Mixing these temperatures can create a lot of visual attention. However, it’s also worth remembering that sticking to the same temperature can create a cohesive theme, which is something a number of fashion brands utilise for seasonal collections.

Size matters

The biggest element will always get the most attention. Enlarging the size of an object and its scale is one of the simplest ways of providing greater visual importance to an object.

However, if you make a single object too large, it will overshadow the rest of the page, creating an imbalance. Likewise, you don’t want to compromise an experience by making secondary information too small, so it can be a bit of a balancing act.

For a landing page or product page, a single, large and dominating image of the product will always be a key consideration for any designer, as the product is the main focus of the page and should not compete for the customer’s attention.

However, the accompanying text should still be an ample size, or you may compromise usability. The navigation menu should still be visual, but only after seeing the product. The smallest sizes should go to the least significant elements, such as copyrights and legal disclaimers.

The ‘prettiness’ of a design will always be important – but the psychology of presenting information that gets digested in the way you want it goes beyond just styling.

Use white space effectively

White space, ‘negative space’ or ‘empty space’ as it’s sometimes known, can also be used as an element to draw attention. It’s a design principal that’s often neglected, but it’s arguably one of the most important.

This is because the greater amount of white space that surrounds an element, the more likely it is that the element in question will be noticed. It’s also important for creating balance and order, and should not be overlooked in favour of including as much information as possible.

So, ensure to give blocks of text wide enough margins and increase paragraph spacing to encourage users to not only scan them, but read and understand them. Doing this will also give a viewer’s eye somewhere to rest and a path to travel the rest of the design.

You can also use it as an attention-grabbing tool. For example, calls-to-action are normally embedded in generous amounts of white space, setting them apart and making them feel more important. It also allows shoppers who are ready to buy the ability to know where to click at a glance, speeding up a users journey.

In short – white space is not ‘empty space’ to be filled wth more noise.

Visual hierarchy is the science part of design, and it takes time and care to craft this successfully. It’s also something that can be tested and refined ‘in the live’ after launch to continuously approve. We’re good – but we always know that getting real input from users means we can make things better. And (to please our sales team) - if you have any queries or questions, or want to see how we could help you create a visual hierarchy, please contact us today.