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 (complimentary colours), and for that reason they make a good balance. Conversely, some colours oppose each other, however, they can still keep the balance (contrasting colours). 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.
