18 The Principles of

18 The Principles of Beautiful Web Design Take a look at the photo of the three stones in Figure 1.16. 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. Figure 1.16. Asymmetrical rocks that don’t roll 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, 12 shown in Figure 1.17, 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. 12 http://www.steinway.com/about/

Layout and Composition 19 Figure 1.17. Steinway & Sons—an example of asymmetrical balance 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, 13 which comes from the repeated use of curves, textures, and consistent typefaces. Much of that harmony can be explained via the principles of unity. Unity Design theory describes unity as the way in which the different elements of a composition interact with one another. A unified layout is one that works as a whole rather than being identified as separate pieces. Take the monkeys in Figure 1.18, for example. Their similarity of shape (not to mention their identical color) enables them to be recognized as a group, rather than four disparate elements. 13 No pun intended.