Views
3 months ago

design3

viii Bread-and-butter

viii Bread-and-butter Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Left-column Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Right-column Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Three-column Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Finding Inspiration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Using a Morgue File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Trends: Popular Favorites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Fresh Trends . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Resizing: Fixed, Fluid, or Responsive Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Fixed Width Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Fluid Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Responsive Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Screen Resolution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Application: Knoxville Reflexology Group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Chapter 2 Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 The Psychology of Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Color Associations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Color Temperature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Chromatic Value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Saturation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Color Theory 101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Red, Yellow, and Blue, or CMYK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 The Scheme of Things . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 A Monochromatic Color Scheme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 An Analogous Color Scheme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 A Complementary Color Scheme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Split-complementary, Triadic, and Tetradic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Other Variants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Creating a Palette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Hexadecimal Notation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Color Tools and Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

ix Color Scheme Designer 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Adobe Kuler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 COLOURlovers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Pictaculous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Colour Contrast Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Application: Choosing a Color Scheme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Chapter 3 Texture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Point . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Shape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Rounded Corners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Rotation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Shapes and Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Volume and Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Perspective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Proportion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Light and Shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Building Texture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Aged, Weathered, Worn, and Nostalgic Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Clean and Grainy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Handcrafted Scrapbook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Whimsical Cartoon Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Minimal Texture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Starting Your Own Textural Trends . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Application: Logo and Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Chapter 4 Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Taking Type to the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Web Fonts with @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Self-hosted Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Web Font Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Text Image Replacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

  • Page 1: Summary of Contents Preface . . . .
  • Page 4 and 5: iv The Principles of Beautiful Web
  • Page 7: Table of Contents Preface . . . . .
  • 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: 4 The Principles of Beautiful Web D
  • Page 22 and 23: 6 The Principles of Beautiful Web D
  • Page 24 and 25: 8 The Principles of Beautiful Web D
  • Page 26 and 27: 10 The Principles of Beautiful Web
  • Page 28 and 29: 12 The Principles of Beautiful Web
  • Page 30 and 31: 14 The Principles of Beautiful Web
  • Page 32 and 33: 16 The Principles of Beautiful Web
  • Page 34 and 35: 18 The Principles of Beautiful Web
  • Page 36 and 37: 20 The Principles of Beautiful Web
  • Page 38 and 39: 22 The Principles of Beautiful Web
  • Page 40 and 41: 24 The Principles of Beautiful Web
  • Page 42 and 43: 26 The Principles of Beautiful Web
  • Page 44 and 45: 28 The Principles of Beautiful Web
  • Page 46 and 47: 30 The Principles of Beautiful Web
  • Page 48 and 49: 32 The Principles of Beautiful Web
  • Page 50 and 51: 34 The Principles of Beautiful Web
  • Page 52 and 53: 36 The Principles of Beautiful Web
  • Page 54 and 55: 38 The Principles of Beautiful Web
  • Page 56 and 57: 40 The Principles of Beautiful Web
  • Page 58 and 59:

    42 The Principles of Beautiful Web

  • Page 60 and 61:

    44 The Principles of Beautiful Web

  • Page 62 and 63:

    46 The Principles of Beautiful Web

  • 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 and 116:

    Texture 99 Figure 3.17. A clear and

  • Page 117 and 118:

    Texture 101 Although repetitious ba

  • 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 138 and 139:

    122 The Principles of Beautiful Web

  • Page 140 and 141:

    124 The Principles of Beautiful Web

  • Page 142 and 143:

    126 The Principles of Beautiful Web

  • Page 144 and 145:

    128 The Principles of Beautiful Web

  • Page 146 and 147:

    130 The Principles of Beautiful Web

  • Page 148 and 149:

    132 The Principles of Beautiful Web

  • Page 150 and 151:

    134 The Principles of Beautiful Web

  • Page 152 and 153:

    136 The Principles of Beautiful Web

  • Page 154 and 155:

    138 The Principles of Beautiful Web

  • Page 156 and 157:

    140 The Principles of Beautiful Web

  • Page 158 and 159:

    142 The Principles of Beautiful Web

  • Page 160 and 161:

    144 The Principles of Beautiful Web

  • Page 162 and 163:

    146 The Principles of Beautiful Web

  • Page 164 and 165:

    148 The Principles of Beautiful Web

  • Page 166 and 167:

    150 The Principles of Beautiful Web

  • Page 168 and 169:

    152 The Principles of Beautiful Web

  • Page 170 and 171:

    154 The Principles of Beautiful Web

  • Page 172 and 173:

    156 The Principles of Beautiful Web

  • Page 174 and 175:

    158 The Principles of Beautiful Web

  • Page 176 and 177:

    160 The Principles of Beautiful Web

  • Page 178 and 179:

    162 The Principles of Beautiful Web

  • Page 180 and 181:

    164 The Principles of Beautiful Web

  • Page 182 and 183:

    166 The Principles of Beautiful Web

  • Page 184 and 185:

    168 The Principles of Beautiful Web

  • Page 186 and 187:

    170 The Principles of Beautiful Web

  • Page 188 and 189:

    172 The Principles of Beautiful Web

  • Page 190 and 191:

    174 The Principles of Beautiful Web

  • Page 192 and 193:

    176 The Principles of Beautiful Web

  • Page 194 and 195:

    178 The Principles of Beautiful Web

  • Page 196 and 197:

    180 The Principles of Beautiful Web

  • Page 198 and 199:

    182 The Principles of Beautiful Web

  • Page 200 and 201:

    184 The Principles of Beautiful Web

  • Page 202 and 203:

    186 The Principles of Beautiful Web

  • Page 204 and 205:

    188 The Principles of Beautiful Web

  • Page 206:

    190 The Principles of Beautiful Web

Layout and Design - In Easy Steps
Boot Camp
QUICK START GUIDE FOR CLUB WEBSITES
Download PDF - Shop.org
30 ways to create amazing web experiences on tablets
Visual Design for Library Websites - WebJunction
How to build a department web site (starter pack) - University of ...
PDF Specimen Booklet - Fontworks UK Ltd
Responsive Email Design Guide - e-Dialog
to download our handy prepress guide - Peel Graphics Inc.
Mobile First