In a figurative sense, the concept of visual balance is similar to that of physical balance illustrated by a seesaw. Just as physical objects have weight, so do the elements of a layout. If the elements on either side of a layout are of equal weight, they balance one another. There are two main forms of visual balance: symmetrical and asymmetrical.
Symmetrical Balance
Symmetrical balance, or formal balance, occurs when the elements of a composition are the same on either side of an axis line. The digital painting Contemplation by David Lanham shown below, illustrates this concept well. Notice how the male and female figures are similar in position and proportion. Even the shaded background boxes are mirror images of one another.
Although it may not be practical for all designs and clients, this type of symmetry — called horizontal symmetry—can be applied to website layouts by centering content or balancing it between columns. The home page layout of my personal site design is an example of such symmetry. Notice on the screenshot, below, that the content areas graduate from two columns at the top of the page to three columns at the bottom, yet the layout still maintains its symmetrical balance:
The two other forms of symmetrical balance are less common in website design, due to the nature of the medium. They are, however, commonly exhibited in logo and print design:
- bilateral symmetry, which exists when a composition is balanced on more than one axis
- radial symmetry, which occurs when elements are equally spaced around a central point
Asymmetrical Balance
Asymmetrical balance, or informal balance, is a little more abstract (and more visually interesting in general) than symmetrical balance. Rather than mirror images on either side of the layout, asymmetrical balance involves objects of differing size, shape, tone, or placement. These objects are arranged so that, despite their differences, they equalize the weight of the page; for instance, if you have a large object on one side of a page, and partner it with several smaller items on the other side, the composition can still feel balanced.
The concert poster by my friend Jeremy Darty seen below is a fine example of asymmetrical balance. The visual weight of the large pink flamingo on the left is balanced by the combined weight of the smaller flamingos and text blocks on the right-hand side of the layout. Notice, also, Jeremy’s use of the rule of thirds. The blue cloud behind the Pop Sucks title takes up one-third of the vertical space and spans two-thirds of the horizontal.
Take a look at the photo below of the three stones. It may not be a particularly exciting picture, but as far as balance goes, it rocks! If you were to use a piece of paper to cover any one of the three stones below, the entire photograph would feel unbalanced and unfinished. This is generally the way balance works. It’s as if the entire composition is in a picture frame hanging by a single nail on the wall. It barely takes much weight on one side or the other to shift the entire picture off balance.
Unlike symmetrical balance, asymmetrical balance is versatile and, as such, is used more often on the Web. If you take a look at most two-column website layouts, you’ll notice that the wider column is often lighter in color — a tactic that creates a good contrast for the text and main content. The diminutive navigational column is often darker, has some sort of border, or is made to stand out in another way, in order to create balance within the layout. The About Us page of the Steinway Sons website, shown in the screenshow below, is an excellent example of asymmetrical balance. In this example, there’s no defined right column, just a large stoic image of the company’s founder. That epic moustache carries a lot of weight, but it’s balanced out by the sizeable italic headline atop the main content.
There are many other principles at work in Jesse Bennet Chamberlain’s design of the Steinway Sons site, and it goes beyond asymmetrical balance. The site has great harmony (no pun intended), which comes from the repeated use of curves, textures, and consistent typefaces. Much of that harmony can be explained via the principles of unity.
The Principles of Beautiful Web Design
This article is from Jason Beaird’s The Principles of Beautiful Web Design book (the second edition of which is out now). This is the fifth part of the first chapter.
If instead color is more your thing be sure to check out the existing digitization of the color chapter here on Design Festival.
Related posts:
- Grid Theory
- Design Festival Podcast #5: Universal Appeal with Jason Beaird
- Layout and Composition as Part of the Web Design Process
- Defining Good Design
If you want to read more from Jason, subscribe to our fortnightly web design newsletter, the SitePoint Design View
Jason Beaird
Jason Beaird is a designer and front-end developer with over ten years of experience working on a wide range of award-winning web projects. With a background in graphic design and a passion for web standards, he’s always looking for accessible ways to make the Web a more beautiful place. When he’s not pushing pixels in Photoshop or tinkering with markup, Jason loves sharing his passion for the Web with others.
