Chapter 4. Achieving Balance

Balance. It's the Way of Zen. It's also an important design consideration on the Web. If your layout doesn't have balance, it seems off-kilter. It's visually off-putting, as Figure 4.1 shows. However, when you achieve balance, as in Figure 4.2, all the elements in your design look like they belong together. They seem to fit. Your Web page finds inner peace and harmony, and that puts your visitors at ease.

Figure 4.1. This layout doesn't seem very well balanced.

Figure 4.2. A balanced design feels better.

Balancing your design isn't just about making your visitors comfortable. A balanced layout is more usable than an unbalanced one. It seems more organized, which helps your visitors find the information they want. Look at the unbalanced columns in Figure 4.3. Because the column on the left is so much shorter than the column on the right, your visitors might not think to scroll down for the buttons at the bottom of the page, as Figure 4.4 shows. Using a Web page shouldn't be like a game of hide-and-seek. When you balance the columns, as in Figure 4.5, the layout itself suggests that the content of the page continues below the fold.

Figure 4.3. This unbalanced layout doesn't encourage your visitors to scroll.

Figure 4.4. If they don't scroll, they miss the goodies at the bottom of the page.

Figure 4.5. Balancing the columns helps to reinforce the idea that the page doesn't end at the bottom of the browser window.

The balancing act is a bit subjective, in that you rely on your designer's instinct to tell you what's working and what isn't. One good trick is to sketch your design using solid shapes for design elements, as in Figure 4.6. Looking at your design in a more abstract way helps you to focus on the balance of the layout instead of the design elements themselves. If part of your design feels heavier than another does, just rearrange the shapes until you get a balanced look. Then, plug the corresponding pieces of content back into their placeholders.

Figure 4.6. Working with your layout in the abstract helps you to focus on balance instead of content.

GEEKSPEAK

Content below the fold is the stuff that your visitors have to scroll to see.

Probably the easiest way to balance a design is to keep all the page elements in the same proportion, pretty much as you've seen in the examples so far. You might call this the classical approach. It's a good design choice if you want the overall look and feel of your site to be sober, serious, and informative. Visually, it doesn't exactly grab the attention. Instead, the design recedes into the background, allowing your visitors to focus on the content of the page.

GEEKSPEAK

Visual weight is how heavy a design element appears to be.

The classical approach doesn't play as well if you want your design to create some excitement. For that, you need a more dynamic layout, which makes balancing the layout trickier and more subjective. To help you along, take the visual weight of your design elements into account.

Visual weight is difficult to quantify, but it involves the size and shape of the element in question. It has little to do with the actual weight of the objects if they existed in the real world. As Figure 4.7 shows, larger design elements tend to be heavier than smaller ones, even if the smaller element represents something that weighs more in the physical universe. A square seems heavier than a rectangle, even when they have the same area, as in Figure 4.8. And even washing out or desaturating a larger design element doesn't seem to affect its visual weight.

Figure 4.7. The larger image seems visually heavier than the smaller one, even though the smaller image depicts something that is much heavier in the real world.

Figure 4.8. The square and the rectangle may have the same area, but the more solid-looking square feels heavier.

Once you assess the visual weight of the design elements in play, you can arrange them so that they achieve a kind of harmony or equilibrium. You want the various weights to cancel out based on where you position them on the page. The lighter and heavier elements seem out of whack in Figure 4.10. However, by repositioning them in the design, as shown in Figure 4.11, you distribute their weights better, which gives you a more balanced, harmonious effect while preserving the sense of motion or excitement that you get when you use elements of differing visual weights.

Figure 4.10. These elements seem out of whack.

Figure 4.11. Redistributing their weight creates a greater sense of equilibrium without sacrificing the dynamic feel.

Figure 4.9. You can desaturate a larger design element, but it doesn't seem to lose its visual weight.