20 The Principles of Beautiful Web Design Figure 1.18. Unity among the monkeys Although less of an issue these days, unity is one of the many reasons why web designers have always despised HTML frames. It’s important that unity exists not only within each element of a web page, but across the entire web page—the page itself must work as a unit. We can use a couple of approaches to achieve unity in a layout (aside from avoiding frames): proximity and repetition. Proximity Proximity is an obvious, but often overlooked, way to make a group of objects feel like a single unit. Placing objects close together within a layout creates a focal point towards which the eye will gravitate. Take a look at the digital painting in Figure 1.19. While composed of a seemingly random assortment of strokes, the five strokes that are the closest to each other appear to form a unified object. Figure 1.19. Creating a group using proximity We practice the concept of proximity on the Web when we start setting margins and padding for elements. For instance, when I define the CSS style rules for sites, I usually change the default margin that exists between common HTML elements such as headings (h1, h2, h3 …), paragraphs, blockquotes, and even images. By altering these values, I can cause more or less space to appear between elements, thereby creating groups. If you look at the two columns of text in Figure 1.20, you’ll notice that they look similar. The only difference is in the placement of the headings. In the column on the left, the word “Unkgnome” is
Layout and Composition 21 equidistant from the top and bottom paragraphs. The result is that it looks more like a separator than a heading for the next paragraph. In the second column, the “Gnomenclature” heading is placed closer to the paragraph that follows it. In accordance with the rules of proximity, this heading appears to belong to that block of text. Repetition Figure 1.20. Proximity between headers and content A gaggle of geese, a school of fish, a pride of lions. Any time you bring a set of like items together, they form a group. In the same way, repetition of colors, shapes, textures, or similar objects helps to tie a web page design together so that it feels like a cohesive unit. The example in Figure 1.21 illustrates repetition. Even though there exists other similar strokes, the nine red strokes on the lefthand side appear to be a unified group because they repeat a shape, color, and texture. The strokes to the right of this group have no repeated pattern, so they appear isolated even though there are other shapes nearby. Figure 1.21. Creating a group using repetition Whether you notice it or not, repetition is often used in website designs to unify elements of the layout. An example of this concept at work among unmodified HTML elements is the bulleted list.
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