design3

Recommendations

Info

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.
Page 1:
Summary of Contents Preface . . . .
Page 4 and 5:
iv The Principles of Beautiful Web
Page 7 and 8:
Table of Contents Preface . . . . .
Page 9 and 10:
ix Color Scheme Designer 3 . . . .
Page 11:
xi Creative Image Treatments . . .
Page 14 and 15:
xiv bathroom with the work that we
Page 16 and 17:
xvi Tips, Notes, and Warnings Hey,
Page 18 and 19:
2 The Principles of Beautiful Web D
Page 20 and 21:
Page 22 and 23:
Page 24 and 25:
Page 26 and 27:
10 The Principles of Beautiful Web
Page 28 and 29:
Page 30 and 31:
Page 32 and 33:
Page 34 and 35:
Page 36 and 37:
Page 38 and 39:
Page 40 and 41:
Page 42 and 43:
Page 44 and 45:
Page 46 and 47:
Page 48 and 49:
Page 50 and 51:
Page 52 and 53:
Page 54 and 55:
Page 56 and 57:
Page 58 and 59:
Page 60 and 61:
Page 62 and 63:
Page 65 and 66: 2 Chapter Color Whether you’re de
Page 67 and 68: Color 51 reason, it’s often used
Page 69 and 70: Color 53 Figure 2.5. Calming stones
Page 71 and 72: Color 55 Figure 2.7. These wind tur
Page 73 and 74: Color 57 Chromatic Value The measur
Page 75 and 76: Color 59 Figure 2.12. The tradition
Page 77 and 78: Color 61 thick that you’re unable
Page 79 and 80: Color 63 Another example of saturat
Page 81 and 82: Color 65 An Analogous Color Scheme
Page 83 and 84: Color 67 Figure 2.22. Blinksale’s
Page 85 and 86: Color 69 put off by the stark contr
Page 87 and 88: Color 71 Figure 2.27. Cross Cross C
Page 89 and 90: Color 73 Figure 2.30. The Bulls+Arr
Page 91 and 92: Color 75 Figure 2.34. The adventuro
Page 93 and 94: Color 77 Table 2.1. Counting from 1
Page 95 and 96: Color 79 Scheme Designer 3 works. U
Page 97 and 98: Color 81 Figure 2.39. Pictaculous C
Page 99 and 100: Color 83 Figure 2.41. A mood board
Page 101 and 102: 3 Chapter Texture There are many we
Page 103 and 104: Texture 87 Figure 3.2. The A-Team b
Page 105 and 106: Texture 89 Figure 3.5. Geometric an
Page 107 and 108: Texture 91 Rounded Corners So we’
Page 109 and 110: Texture 93 Figure 3.10. Ithaca Even
Page 111 and 112: Texture 95 Figure 3.12. Speed Kids
Page 113 and 114: Texture 97 Figure 3.14. Perspective
Page 115: Texture 99 Figure 3.17. A clear and
Page 119 and 120: Texture 103 declaration background-
Page 121 and 122: Texture 105 Figure 3.25. Three repe
Page 123 and 124: Texture 107 Figure 3.27. Team Fanny
Page 125 and 126: Texture 109 said, just because you
Page 127 and 128: Texture 111 This site certainly fal
Page 129 and 130: Texture 113 Another notable example
Page 131 and 132: Texture 115 Figure 3.36. Minimalism
Page 133: Texture 117 Figure 3.38. The site d
Page 136 and 137: 120 The Principles of Beautiful Web
Page 166 and 167:
Page 168 and 169:
Page 170 and 171:
Page 172 and 173:
Page 174 and 175:
Page 176 and 177:
Page 178 and 179:
Page 180 and 181:
Page 182 and 183:
Page 184 and 185:
Page 186 and 187:
Page 188 and 189:
Page 190 and 191:
Page 192 and 193:
Page 194 and 195:
Page 196 and 197:
Page 198 and 199:
Page 200 and 201:
Page 202 and 203:
Page 204 and 205:
Page 206:
show all

design3

Create successful ePaper yourself

Delete template?

Save as template?