Balance
1st edition — by Patrick McNeil — Nov. 29, 2007
The Design Principle
The principle of balance revolves around the idea of how the elements in a design are distributed and how they relate to the overall distribution of visual weight. Balance is all about how elements are distributed on the page and the way this affects the stability of the page. As elements are grouped together in a design they create visual weight, typically this weight must be balanced out by an equal and opposite weight in order to achieve a desired balance in the design. Not doing so results in a design which feels unstable. The idea is that a balanced designed is more appealing and creates a subtle notion of stability. Well balanced designs are often very comfortable and appealing.
Symmetrical Balance
The first method for accomplishing balance is through symmetrical design. This is when the design of a page is mirrored on some axis and the two halves have identical visual weights. Typically in web design this is when the left and right sides are split vertically and each side has an equal weight. As always, I prefer samples, so lets look at some.
Sample 1 - Mobile Web Design
The Mobile Web Design site by Cameron Moll is a perfect example of this. It is fairly obvious that the split is split on a vertical axis and is reflected in equal weight on each side. The site has a very nice balance to it that feels incredibly stable.
The real beauty of this site is that the balance doesn't just feel nice, it is actually really functional. The purpose of the site is to promote an ebook about mobile web development. As such the central image of a mobile device helps to clearly establish the purpose of the site. This image is the central focus of the design. When combined with the high contrast page title the image instantly lets the visitor know what the purpose of the site is. There is no fuzz on it. From there the hierarchy turns to the two side bars which contain all the juicy details the reader will no doubt want.
Sample 2 - Rebuilt World
The Rebuilt World site clearly has a symmetrical balance to it. The simple grid of images is centered on the page as are the other elements in the design. While this layout is not extraordinary, it is extremely clean and comfortable. In this case the central focus combined with high contrast helps the main logo and title to really pop out. It is important to remember that with symmetrical design the center points become the focus of the design and ultimately have the most weight to them. This makes the space prime real estate for a high location in the hierarchy of the design.
Sample 3 - HBC Web
While the Bill Share site has a side to side balance to it, it also has a vertically oriented version of symmetrical design. If one were to split the page along the axis the left and right arrows are on one would find that the top and bottom halves reflect on this axis. The horizontal band across the top containing the logo and tabs is reflected in the band along the bottom containing three large images.
While this sort of balance is not necessarily overly obvious, it does serve one key role in that it effectively frames the content with a top and bottom. By doing so the visitor is encouraged to bounce up and down in the site and focus on the content. Instead of having an overly heavy header or footer, they are just enough to frame the content. Thus the focus is subtly placed on the contents of the site. A very nice balance indeed.
Symmetrical balance is actually relatively common in web design. Especially in home page design. Dozens of examples can easily be found of this type.
Asymmetrical Balance
Asymmetrical balance is achieved when the visual weight of a page is equally distributed on some axes but the individual elements of these halves are not mirror images. That is a really complex way of saying that asymmetrical balance is a result of the use of dissimilar elements to create an overall balance. That still sounds complicated; lets just look at some samples and see how this works.
Sample 1 - Green Renaissance
The Green Renaissance site is a fine example of asymmetrical balance. In this case the very heavy green column on the left is balanced out by the combination of the header and two columns on the right. In this way the entire right side of the page is viewed as a single element. What this does is allow the left bar to easily be the most prominent element and occupy the focus of the page. Users eyes are easily drawn to visually heavy elements which contain less content. The weight of this side bar has been balanced out through the unification of the remaining elements so as to create a visually appealing design that is nice and stable.
With out such a balance the weight created on the left side would feel awkward and unstable. Resulting in a less appealing design. The lack of appeal would be subtle and hard to identify, but the subtle nature of design is not to be underestimated.
So in this sample, asymmetrical balance has been used to not only create a comfortable design, but also to establish hierarchy in a page and control the user experience.
Sample 2 - Further
The Further organization which specializes in online marketing has a web site which demonstrates the idea behind asymmetrical balance very effectively. In this case the axis of symmetry is dead center and runs vertically as most samples of balance do. In this case the left side contains more images which stand alone with a lot of visual weight. Each of these is balanced out as a group by an equally heavy set of content. In this way the right side is richer in terms of depth creating a weight as a whole. While the left sides beefy visuals create an equal weight.
The neat thing about this sample is how the left side is simpler in terms of ease of consumption and thereby creating a hierarchy in the page. And yet the visual balance of the page is maintained. So again balance was used to establish both a unified design and a hierarchy within the page.
Conclusion
Balance is one of the elements of design which tends to come naturally. And yet at times, it can still be overlooked. I find that one way to tell if a design is balanced is to step back and squint at the design. If it feels like it is falling to one side it is probably unbalanced. Another strange thing is that we tend to attach a lot of designs at the top of the page and let everything hang down; I refer to this as a curtain style site. In contrast many sites (and some of the above) consider the entire vertical balance of the site. This is most defiantly more difficult to do, but is still an important thing to consider. This is perhaps most true on home pages where you can more easily control it.
I find this hanging from the top approach interesting considering how unstable it really should feel. In painting a lot of thought often goes into creating triangles with a flat base along the bottom (aka Leonardo da Vinci). These triangles provided a stability to the works. Somehow in web design we have inverted this and it feels ok.
Sample Usage
