94 The Principles of

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.