Visual Hierarchy (VH) is the design principle that outlines the order in which a user of any given website interacts with and processes information on a page. By manipulating elements of a website to have a clearer hierarchy and designing a site effectively around this principle, designers can influence the importance that users perceive information across the website to have. You can guide your user’s eyes around through your website, focusing on CTAs and integral pieces of information.
The 8 elements of Visual Hierarchy are:
- Positioning
- Size
- Colour
- Contrast
- Alignment
- Repetition
- Proximity
- Texture
Positioning
As a standard, the top-down rule applies to most websites. The most important information is listed first, followed by the second most important piece of information, usually followed by body copy. The way in which humans read websites, both in left-to-right reading cultures and in right-to-left reading cultures has been studied relatively intensely in recent history. Typically, text heavy websites are read in an “F” pattern, and lighter, more image based sites are read in an “E” pattern. Adjusting the positioning of the crucial elements of your website to sit in and around the hot spots on your website ensures that essential messaging and information isn’t being scanned over and ignored by users. Planning your website design around functionality as well as aesthetics is fundamental to the success and usability of your site.Size
This might seem like a given, but it’s worth thinking about and considering when designing your website. Larger elements demand more attention – and they get it. Adjusting scale and size of different elements of a website is one of the techniques that can override the top-down rule of positioning. Using the below example, even though the most important piece of information is listed second, the top copy is actually read last. By manipulating the size of elements and information, you change the way that users interact with your website and ultimately make for a more engaging experience for your users whilst still communicating the message you’re looking to get across.Colour
Colour plays a huge part in any website. From branding, to calls to action, the colour that is used throughout a website can make or break the experience that users have with your website. The psychology of colour goes beyond blue encouraging calm and red inciting a sense of urgency. Colour can be used to sign-post to your users where you want them to look and to guide them through your site in the intended order. Bright, bold colours stand out from muted, dull tones. Emphasising primary information in a brighter or contrasting colour than the surrounding information immediately draws in the attention of the user. Additionally, if your website has multiple, equally important themes running throughout your copy, using contrasting colours for contrasting themes, can help visually communicate to a user which elements relate to which theme. For example, writing all copy relating to Topic A in orange, and all copy relating to Topic B in blue helps users to identify which pieces of information are relevant to their query, even when scanning the page.Contrast
Applying brand guidelines to a website is absolutely key when it comes to brand recognition and consistency across your marketing. However, using complementary opposites to your brand norms pushes elements higher up on the visual hierarchy. For example, if your brand guidelines stipulate that a sans serif font is to be used throughout headers and body copy such as helvetica, use a complementary font like FF Tisa for those pop-out pieces of information that you really want to push over and above anything else on the screen at that time. A perfect example of this is magazine covers. Each article title is just as important as the other, each fighting for your attention as much as the other. Now, in a website this is not a desirable response from users, but the premise still stands. The brand is still very clear through the use of colouring, size and positioning. However, the key pieces of information garner equal amounts of your attention. Image source: https://dribbble.com/shots/5779894-Magazinecover1Alignment
A clean, seamless flow of information is key to web design in order to make absorbing and reading your content as comfortable an experience as possible for your users. However, “standing out from the crowd” is not to fall by the wayside. Placing key information in the side lines or even changing the angle at which that information is displayed makes that information “pop”. Use this in conjunction with colour and size as well and there’s no way that element will go unnoticed.
