To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the user of functional cookies. For more information read this page.

Visual balance techniques

Content can be divided by colour, as shown before. But it can also be useful to separate visual elements using a technique known as balancing.

There are two major types of balancing, symmetrical balancing and asymmetrical balancing. Both of these differ hugely. This article will look at both of these and how they can be used to create an effective design for a website.

Symmetrical balance

Balance through symmetry is considered to be easier than the opposite form of balance for obvious reasons. Balance through symmetry involves developing columns or objects with equal width on either side.

For instance, with two columns, there would be one column on either side of the central point.

Two column symmetry is very easy to achieve

With three column symmetry the central line would go through the second column with two columns on either side:

Three column symmetry is also very easy to achieve

Obviously, this technique is very easy to follow for all sorts of sizes of columns.

Asymmetric balance

Asymmetric balance is a bit harder to achieve. It is often the case that the Golden Ratio is used to define the width or height of some elements with asymmetric balance.

It is often the case that a sidebar is used on a website. If this is the case, it is also often also the case that this sidebar has been designed with asymmetric balance in place.

This website uses asymmetry to define its style and it does so by having a sidebar that takes about 300 pixels of the screen estate. It is very important that the sidebar never becomes larger than the main content with this website. The gray colour used on the sidebar helps to separate the content from the sidebar contents. It also helps asymmetrically balance the page.

Using columns, asymmetry can be very easily achieved by having a much wider (say 9 columns wide) main content and a smaller (say 3 columns wide) sidebar:

This is asymmetrically balanced.

Balance by weight

An alternative to balance by symmetry is to balance by weight. Balance by weight is achieved by using two objects of similar weight.

The term weight often referrences the size of an object or how loud the object is.

Assuming two columns of equal width each with one object within them, to balance it a loud object is put in the left column and a 'quiet' object is put within the right element:

This type of balancing is difficult to achieve and is rare, but it works well.

Balance by colour

Balance by colour is a lot more difficult to achieve and requires some knowledge of colour.

Certain colours go well together, and for that reason they make a good balance. Conversely, some colours do not go well together, however, they can still keep the balance. An example is red and black. One colour being light and the other being dark:

Notice that the black section is smaller, which is using asymmetric balancing. With this example attention is first drawn to the bright colour, i.e. red. The black section is balanced with the red by contrasting with it.

Shades of gray can also be used effectively to detract attention, for instance a white section being very bright will attract the user to this section first, whereas a gray section will possibly be seen a sub-information.