For the past few years, web design and app development have been bathed in skeuomorphism.…
Web Design – The Importance of Visual Weight and Direction
We all know that different elements of a website attract our eye and invoke positive or negative responses. Some visual elements of a website encourage us to explore further and others are so distracting that we might leave the website and look elsewhere.
From a visual point of view there are two elements in web design that are vital to encouraging your visitors to remain on your site, investigate further and come back later. These elements are visual weight and direction.
Visual weight: This is the term given to how much an element on your web page attracts the eye of the visitor. The way you manipulate visual weight is by a combination of size, colour and shape and by using these 3 characteristics you can increase or decrease the amount of visual weight of a specific page element, for example an image or call to action button.
We know that larger objects attract the eye more than smaller objects and that cool colours make the background recede and warm colours make it move forward. There are other factors however, which come into play when you want to attract your visitor’s eye. Let’s look at some simple guidelines:
- Darker colours attract the eye more than lighter colours – you can read a short article on this here.
- Elements in the foreground, near the top of the page or out to the sides can carry more visual weight than elements in the background, towards the bottom of the page or even in the centre of the screen
- Diagonal elements attract the eye more than vertical elements, with horizontal elements coming in last.
- Texturing makes an element appear 3 dimensional and causes it to stand out from the page.
- Whatever the element, if t is surround by white space and has the appearance of depth it will attract the eye.
- Any element that contrasts with the background or other page elements will stand out to the viewer. That contrast can be in colour, size, shape, texture or depth.
Direction: This is about directing your visitor’s eyes on your web page. Visual weight attracts the visitor to look at an element, direction then leads them to the next element and the next and so on. The shape of an element, its location, its meaning (i.e. an arrow) and movement will all encourage the visitor’s eye to transverse your web page.
In addition, every web page or design element usually has an overall direction, which can be vertical, horizontal or diagonal. These general axes can be used to influence how the viewer feels about your website. For example a horizontal direction gives a calm feeling, vertical is about balance and diagonal is about action. So you can change how a visitor feels about your web page by altering the axes of the major elements on a page.
All of this means that you can use web design principles to make headlines or footnotes stand out, to reduce the focus on a sidebar, to highlight a call to action button, a logo or a specific image and to emphasise a list of product features.
As you can see, there are many elements in web design, which with a little knowledge and some expert modification can make your website stand out from the competition.
Meg is a Project Manager/Producer at Cornerstone with a special interest in conversion rate optimisation. She has a business analysis background and thinks the web would be a better place if everyone looked at their web statistics daily.