You may not realise it, but even the simplest designs have well-thought-out strategies behind them. Central to these strategies is “Visual Hierarchy” – the ranking of design elements through their visual characteristics.
What is Visual Hierarchy?
When working on a project for print or digital, a designer uses visual features to guide the reader around the interface or design. This makes for a better user experience (UX) and directs attention towards the important elements. Visual Hierarchy is when these elements of the design are organised in order of importance by utilising different techniques such as size, colour, texture, contrast (figure and ground) to establish this Visual Hierarchy.
Why is Visual Hierarchy important?
Every design is composed of several components. These could be different sections of text, images, logos, shapes, and so on. To make a design as effective as possible, the designer needs to arrange them in a hierarchy. Some elements will be more important than others. For example, you’ll want to highlight any essential information, as well as logos and headings. Less important information, reiterations, and minor details should are usually softened.
Without the organisation that comes from the use of Visual Hierarchy, a design can quickly become confusing and unappealing. If a reader has to spend time and effort deciphering your website or advert, they’re likely to lose interest. In fact, websites only have 50 milliseconds to convince a visitor to stay, and a disorganised web design will result in a higher bounce rate (rate of visitors leaving). Even if your content is engaging and impeccably well written, you’ll need good design to ensure it’s not left ignored.
So how does a Visual Hierarchy work? Which design elements do you need to consider? We’ve outlined the key principles to consider in order to create Visual Hierarchy.
1. Z or F pattern reading?
Because English speakers read from left-to-right, and top-to-bottom, we tend to fall into one of two reading patterns.
Reading in an F-pattern means the reader is scanning the page in horizontal lines, working their way down the left side of the page. This pattern usually applies when there’s a lot of text. Because the reader scans the left side of the page, this is where you should place the most eye-catching elements (e.g. images). It’s the most effective way to catch the reader’s attention and keep them reading.
Reading in a Z-pattern is more applicable to less wordy, minimalist pages with more space. The reader scans from the top left to top right, and then skips diagonally to the bottom left, and so on. This is why most companies put their logo in the top left corner. It’s the first place a reader looks, so it instantly provides them with context and increases brand recognition.
2. Size
The bigger something is, the more attention it attracts. Our minds automatically focus on the largest items on a page, so increased size is a great way of drawing the reader’s attention to something important.
When it comes to headings, size is essential for structuring your text, chopping it up and making it easier to read. If your design incorporates a lot of text, you can structure it using three (or more) discernable font sizes. Likewise, anything you want to reflect as less important can be reduced in size. Be sure not to include too many ‘big’ elements, as this reduces the emphatic effect and creates too many focal points.
3. Texture
In Visual Hierarchy, texture refers to the arrangement of design elements and space. For example, a heading that appears in a bright yellow box has a more eye-catching texture than one which doesn’t. Even if the plain heading is larger than the textured one, the ‘textured’ heading may attract the same amount of attention.
The texture of a design element can give it personality and depth but is easily overdone. As with size, it’s wisest to add texture to just one or two elements. Too much texture can make the text confusing for the reader.
4. Contrast (Figure and Ground)
A balanced contrast enables a designer to create a flow through their design and establish importance for certain elements creating a Visual Hierarchy between figure and ground, or foreground and background. Distinguishable objects through the use of contrasting colours establish stability within the design and allow the user to focus their attention toward the objective. Brightness and tint are one way of manipulating contrast and generating a relationship between the perception of the important elements, avoiding ambiguity and confusion.
5. Typography
Typography concerns the appearance of the text. The style, category, and thickness (or weight) of the typeface all contribute to the look and feel of your content.
A font’s appearance can tell your reader a lot about the visual importance of elements. Utilising Headings (H1, H2) along with your paragraph (or body) text increases the visual perception of importance between the elements of a design or interface. The heavy weight of a heading may establish the initial focal point of a design and then transition down to a thinner type to describe the key information.
6. Spacing
Sometimes less is more. Utilising space in a design enhances the Visual Hierarchy, forcing the consumer to recognise the importance of the isolated elements. A consumer is very selective in the way they recognise information. We are all influenced by our own internal biases, so using spacing can force the audience to acknowledge your intended design objectives. For example, much like contrast, utilising white space in design can generate differentiation between the key elements and the surrounding environment. Spacing can serve to increase the selective perception within your design and increase the probability that the purpose of your design will be achieved.
The organisation of Visual Hierarchy is actually built on common design principles. Whilst these are other Visual Hierarchy principles such as; closure, motives, direction, expectations and grouping to name a few, these are the primary principles of Visual Hierarchy you can now use to improve your UI/UX, attract new customers, and keep visitors coming back to your website.
If you’re looking for more tips on how to boost your design skills and help your business achieve its targets, check out the rest of our blog for even more design tips.