100 The Principles of Beautiful Web Design facture a sense of dimension. Take a look at the screenshot from Worry Free Labs in Figure 3.19. The design of the home page for this Austin, Texas-based design agency is simple and fun, but there’s a lot of inventive texture going on here as well. The “We Are Worry Free Labs” banner becomes a focal point because of its contrast, but another area that gets a lot of attention is where the mobile devices are displayed. There are long, dramatic shadows next to these devices, calling a lot of attention to them. Without these elements, these images could be boring and mediocre. As it is, though, the organic shape and realistic shadows make this a convincing representation of a 3D object in space. Figure 3.19. Worry Free Labs using a combination of shape and shadow to strong effect Drawing from real-world inspiration is the key to adding believable depth to graphic elements. Rather than settling for a layout filled with flat blocks of color, lines, and shapes, try to think of ways in which you can incorporate three-dimensional space. Remember that the items that “stick out” the farthest are likely to become focal points, and that perspective and proportion do very little without the reinforcement of light and shadow. Pattern I still remember my first exposure to website design. I was in a tenth-grade typing class and the instructor took it upon herself to teach us HTML. It was optional, but choosing between timed typing tests and learning how to build web pages was an easy choice to make. By the end of that year I’d created quite a few little websites. The common denominator among those admittedly hideous creations was repeating backgrounds. You know the kind I’m talking about: those backgrounds that tile seamlessly to give the appearance of a continuous water, stone, starry skies, metal, or canvas texture.
Texture 101 Although repetitious background images like the ones in Figure 3.20 are the hallmark of early 1990s web design, they’re also classic examples of pattern. Pattern has long been used to add richness and visual interest to all types of design. On the Web, seamless background images were originally favored because they reduced page size and download times. Using a small image that could be tiled to fill a background area, rather than a large non-tiling image, significantly reduced the download time for website visitors with 56K modems. Figure 3.20. Typical 1990s tiling website backgrounds Just because tiling background images with repeated patterns have a tacky past, it doesn’t mean you should avoid them today. In fact, they’re used more often than you probably realize. CSS has greatly improved the degree of control designers have over the way background images work. Before CSS was around, we could only assign background images to body and table elements; now, with CSS, backgrounds can be applied to just about any element you choose. You can use any of five CSS properties (and one additional shorthand property) to set the background of an element: background-color This is the property we use to set a solid background color for any element. For example, if we wanted to set the background color of an element to a nice green-blue (00B2CC), we’d add the following declaration to the element’s style rule: background-color: #00B2CC; When using hexadecimal values in CSS, you need to prefix the color code with #, as shown above. You can also specify transparent here if you don’t want the background of your element to be filled with a color. transparent is actually the default value of the background-color property. You might be tempted to use an HTML color name, like Aquamarine or BlanchedAlmond, but as only 16 color names are officially sanctioned by the W3C in the HTML 4.0 specification (and even those will generate warnings when you try to validate your CSS), it’s recommended that you use the hexadecimal values we talked about in Chapter 2.