94 The Principles of Beautiful Web Design Shapes and Layout Figure 3.11. Pointless Corp. and their rotated logo and ribbon Rounding corners and rotating elements in your design are just two techniques to make a layout feel less geometric and more organic. There are plenty of other ways to enhance your designs using shapes creatively. Take a look at the Speed Kids 6 website in Figure 3.12. The designers of this site used a simplified style of illustration consisting of a variety of basic organic shapes to create the layout you see here. When I look at the page, the first item I see is the pink octopus. From there, the arrows created by the splashes under the logo guide my eye down to the playground. Next, the bars of the playground and the slides guide my eyes downward, to all of the links. Just in case I missed it, the ripples in the water guide me back toward the center of the page at the bottom, where all of the links and logos are located. 6 http://www.speedkids.com.br/
Texture 95 Figure 3.12. Speed Kids It may not be apparent at first, but the shapes in this page’s illustration are the key elements that define the layout. One way to determine how much influence shapes have on a design is to isolate them by tracing out the layout’s main elements. You can do this either by printing a screenshot of the design and tracing the shapes by hand using tracing paper, or by opening up the screenshot in your favorite graphics program and removing the image after you’ve traced the key elements onto a new layer. I call this the "economy of line" test. The expression economy of line is used to describe art and design that provides significant graphic meaning with as few lines as possible. If a traced page layout still looks complete when recreated using only lines, it passes the test. As you can see in Figure 3.13, the Speed Kids layout still guides your eye around the page effectively, even without the text or colorful imagery. Notice how the different design elements and how they are arranged leads your eye down the page. You typically start at the top of the page and work your way down, but the shapes of the illustration help your eye to follow a path to the menu system at the bottom. No matter where your eye ends up on the page, every element, such as the slide, the ship masts, and the playground posts lead you to the same place.
Summary of Contents Preface . . . .
iv The Principles of Beautiful Web
Table of Contents Preface . . . . .
ix Color Scheme Designer 3 . . . .
xi Creative Image Treatments . . .
xiv bathroom with the work that we
xvi Tips, Notes, and Warnings Hey,
2 The Principles of Beautiful Web D
4 The Principles of Beautiful Web D
6 The Principles of Beautiful Web D
8 The Principles of Beautiful Web D
10 The Principles of Beautiful Web
12 The Principles of Beautiful Web
14 The Principles of Beautiful Web
16 The Principles of Beautiful Web
18 The Principles of Beautiful Web
20 The Principles of Beautiful Web
22 The Principles of Beautiful Web
24 The Principles of Beautiful Web
26 The Principles of Beautiful Web
28 The Principles of Beautiful Web
30 The Principles of Beautiful Web
32 The Principles of Beautiful Web
34 The Principles of Beautiful Web
36 The Principles of Beautiful Web
38 The Principles of Beautiful Web
40 The Principles of Beautiful Web
42 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