Building Visual Hierarchy into Your Designs

It’s important to remember that hierarchy has not only to do with content and the words that you have on a page. The imagery you include in your designs, from photos through to icons, buttons and any other visual elements other than text, has a big impact on the hierarchy and perception of your website.

When you’re designing a website the imagery that you use will largely help set the tone of the site, alongside colour, typography and more. If visual image elements don’t sit right within a design, then they can quite often break the impression that you want to set.

Neonmob is all about the visuals on their website - and rightly so as it has everything to do with their product Neonmob display their images in a great way though almost semi-realistically as if youre holding the card decks themselves — Neonmob; all about the visuals on their website - and rightly so, as it has everything to do with their product. Neonmob display their images in a great way though, almost semi-realistically as if you're holding the card decks themselves. This is great, as it helps tell more of a story.

Creating a good visual hierarchy involves understanding how to use these visual elements to enhance the users experience on your website, without breaking the flow of the content.

Imagery is also another form of storytelling that can help us even more in explaining to our users where they should go, what they should do and what they can expect from a website. Even more so than storytelling with content, imagery is a really visual way of helping tell your users your story.

Using visual elements such as imagery and icons also helps in creating more visually exciting and creative ways of attracting the users' attention, thus allowing you to highlight the key areas of a design that you want to emphasise.

Visual Hierarchy Through Imagery

Let's walk through a few tips, which will help you achieve a strong visual hierarchy.

Think of the Tone You Want to Set

Images in your design portray the tone of your website. If the style you want to display is professional, relaxed, casual, practical (or any other style) then you should ensure that your imagery reflects that.

It’s important that you use imagery to enhance your website, rather than have to have images in place to help you explain what the user should do. A website without imagery should still be able to tell the same story as if it had the images in place, as the images are there to enhance that story and make it even better. However, images are not an afterthought; they should still be shown the care and attention that you should be lavishing on other areas of the design so that they work as well with your content as they can.

Hopskoch need to tell their users about their product - and to do that they show it in action This type of strong single visual works well as it helps immediately attract users attention — Hopskoch need to tell their users about their product - and to do that, they show it in action. This type of strong, single visual works well as it helps immediately attract users' attention.

Never Use Images as a Replacement for Text

Never assume that your images are easy to understand. I would always recommend that your images have a caption or sub-heading to help users understand your story and make the connection between the image and the text. This also makes your content accessible under circumstances where images are perhaps turned off.

Stock Photos or Custom Photos?

This all depends on the style of the website and level of the design you want to put out there, but the decision is with you on whether you want to use stock photography or custom photography.

Personally I always think stock photography can look quite generic, particularly if you’re going for a standard office look. That said, custom photography can also end up that way, particularly if it’s purposely shot in a cheesy manner.

Custom photography, particularly when a pro photographer is hired, can have a brilliant effect on your designs, as it often gives you the visual leverage you need to lift a design and to add some visual contrast.

Sometimes it may also be necessary for custom photography, such as with e-commerce websites, and then, it’s important to remember that you need to have photography that also matches the style and look and feel of your design. Otherwise you run the risk of having a beautifully designed website and stunning photography, but which feel disjointed when paired together.

Hopskoch also use custom icons to display their product and how it works - if these had been done in a stock/default style, the brand message and look wouldn't have been half as strong.

Be Careful With Sizing & Contrast

One small thing to think about is the size of the imagery that you use. Where possible, try to keep imagery that works with the vertical rhythm that you have previously created. This will then, in turn, help keep the content flow moving and not feel stuttered or difficult to carry on navigating through.

Also be aware that the actual size of the images and visual elements you use will effect the way that the content is read. You don’t want to create too drastic a contrast between the size of images and the text, or it will become unreadable and completely break the flow. That said, you can of course break that rule and where it is useful to the design to have larger images, feel free to use them and add visual interest to the page.

Fitbit is all about the product - and they use size and contrast to help display their products in action whilst also displaying the other products that they also have — Fitbit is all about the product - and they use size and contrast to help display their products in action, whilst also displaying the other products that they also have.

Use Colour to Your Advantage

When you’re using visual elements in your design, there must be a reason for it. However you choose to use colour, one of those reasons is usually going to be to draw attention to that part of the design or to separate it from the next or previous section.

Using colour in this way 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 cleverly with contrasting elements so that you can help draw attention to what is more important. Play around with colour in this way to see how the colours you use in some icons, for example, could possibly change the perception and message that is portrayed for that particular element in your design.

Fitbit are one of those companies that seem to get their brand and how they should work with it on the web - they use their colours consistently throughout their website - and also their other online services - and in their badge designs, which helps subtly bring the whole design together.

Don’t Forget About the Shape!

Shape is one of those underrated but often forgotten things when it comes to our visual elements. Don’t be afraid of playing with shape to mix things up with your content and images. Although circles are quite popular in today’s designs, feel free to have a look at other shapes and see how you can use these in your designs. Whether it’s the shape of an icon or the way that you visually mask a photo, it can all make a difference to the impact that your website design has.

Typical Visual Hierarchy Patterns

There are a couple of visual composition layouts that can help us when we’re trying to work in a strong visual hierarchy. These are discussed in more detail in the composition articles, but are briefly mentioned here as they can really help with thinking about hierarchy visually.

The Z Layout

The Z layout is a common compositional layout that is seen in many designs. It refers to where the eye is drawn in a pattern over a website, where it looks from the top left, across to the right, diagonally down to the left and again across to the right; in the shape of the letter ‘Z’.

Golden Section

The Golden Section is quite well known in the print and design industries. It refers to a particular (very mathematically-based!) way of discovering what is the most effective part of a design to place an element and how it can lend particular visual weight to those areas. Very similar to the rule of thirds, the main content is usually placed in the larger portion of this section with less important, secondary content placed in the smaller portion.

The golden ratio seen in action on Twitter Screenshot taken by Ryan Schroeder — The golden ratio, seen in action on Twitter. Screenshot taken by Ryan Schroeder.

This can work really well with our visual elements as well - we can choose to show more important imagery in the larger sections alongside our main content, with secondary imagery in the smaller sections. We can also cross both of these, possibly using medium-sized photos aligning with another column in our grid and ending at the end of the smaller section - but it’s totally worth experimenting with to see what works well in the context of your own design.

Assignments

Now you should know all about hierarchy, both with regard to content and visually. You should already have had a play with content hierarchy and now I want you to do the same, but with the visual elements on your page. See that they align with your vertical rhythm, see how you can make them visually more interesting or contrasting and use the techniques above to improve your designs.