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.
Color 69 put off by the stark contr
Color 71 Figure 2.27. Cross Cross C
Color 73 Figure 2.30. The Bulls+Arr
Color 75 Figure 2.34. The adventuro
Color 77 Table 2.1. Counting from 1
Color 79 Scheme Designer 3 works. U
Color 81 Figure 2.39. Pictaculous C
Color 83 Figure 2.41. A mood board
3 Chapter Texture There are many we
Texture 87 Figure 3.2. The A-Team b
Texture 89 Figure 3.5. Geometric an
Texture 91 Rounded Corners So we’
Texture 93 Figure 3.10. Ithaca Even
Texture 95 Figure 3.12. Speed Kids
Texture 97 Figure 3.14. Perspective
Texture 99 Figure 3.17. A clear and
Texture 101 Although repetitious ba
Texture 103 declaration background-
Texture 105 Figure 3.25. Three repe
Texture 107 Figure 3.27. Team Fanny
Texture 109 said, just because you
Texture 111 This site certainly fal
Texture 113 Another notable example
Texture 115 Figure 3.36. Minimalism
Texture 117 Figure 3.38. The site d
120 The Principles of Beautiful Web
122 The Principles of Beautiful Web
124 The Principles of Beautiful Web
126 The Principles of Beautiful Web
128 The Principles of Beautiful Web
130 The Principles of Beautiful Web
132 The Principles of Beautiful Web
134 The Principles of Beautiful Web
136 The Principles of Beautiful Web
138 The Principles of Beautiful Web
140 The Principles of Beautiful Web
142 The Principles of Beautiful Web
144 The Principles of Beautiful Web
146 The Principles of Beautiful Web
148 The Principles of Beautiful Web
150 The Principles of Beautiful Web
152 The Principles of Beautiful Web
154 The Principles of Beautiful Web
156 The Principles of Beautiful Web
158 The Principles of Beautiful Web
160 The Principles of Beautiful Web
162 The Principles of Beautiful Web
164 The Principles of Beautiful Web
166 The Principles of Beautiful Web
168 The Principles of Beautiful Web
170 The Principles of Beautiful Web
172 The Principles of Beautiful Web
174 The Principles of Beautiful Web
176 The Principles of Beautiful Web
178 The Principles of Beautiful Web
180 The Principles of Beautiful Web
182 The Principles of Beautiful Web
184 The Principles of Beautiful Web
186 The Principles of Beautiful Web
188 The Principles of Beautiful Web
190 The Principles of Beautiful Web