Our Blog

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.

You can think of visual weight and direction as the two main ingredients in a photograph, drawing or painting. You have a subject in the picture that takes up more space than the rest of the image, and is bigger than the rest, that’s ‘visual weight’. Also, it might not be obvious at first glance which way an image is facing. For example, it could be turned to look down upon another object. That’s ‘direction’. These two factors give a picture depth and ensure your audience engages with it longer. T

his article looks at how we can use these elements to our advantage when designing web pages, and use them to potentially increase page views on our site!

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.

The use of visual weight is extremely important to a good overall web design and an understanding of how to use it will dramatically improve the quality of your websites.

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.
• 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 it is surrounded 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 to 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.

Learning how to create motion and draw a viewer’s eyes through your web design is a must-have skill. There are numerous techniques to be used to direct the eye, and understanding how to use these skills will improve your conversion rates.

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.

Need help putting some of these web design practices in place, call us on 02 8211 0668, email us at info@cornerstone-digital.com.au or complete our online enquiry form.

• Comments (0)
• Trackbacks (0)
• Permalink

Michael Lam

Co-founder of Cornerstone and web junkie, Michael knows just how to diagnose your online problems and remedy the issue. An online enthusiast who believes in technology as an enabler of growth, Michael worries about all the details so you don't have to.