Views
4 months ago

design3

Preface When my wife and

Preface When my wife and I moved into our house, one of our first major projects was to update the bathroom. The horribly gaudy floral wallpaper pattern, along with the gold sink fixtures, obnoxious mirrors, and tacky lighting, made us feel like we’d stepped into a previous decade every time we entered the master bathroom. Removing wallpaper is a tough job, but it’s even more difficult when there are multiple layers of the stuff. This was the case with our bathroom. Apparently the previous homeowners’ taste in wallpaper changed every few years, and rather than stripping off the wallpaper and starting over, they just covered ugly with more ugly. Ah, the joys of home ownership! If there’s one thing our renovation adventures have taught me, it’s that there are strong parallels between designing a room’s decor and designing a good website. Good design is about the relationships between the elements involved, and creating a balance between them. Whether we’re talking about a website or bathroom makeover, throwing up a new layer of wallpaper or changing the background color isn’t a design solution in itself—it’s just part of a solution. While we removed the wallpaper and rollered some paint onto our bathroom, we also had to change the light fixtures, remove the gold-trimmed shower doors, replace the mirrors, upgrade the lighting, paint the cabinets, change the switches and plugs, and scrape off the popcorn ceilings. If we’d just removed the tacky wallpaper and left all the other stuff, we’d still have an outdated bathroom. Website design is similar: you can only do so many minor updates before the time comes to scrap what you have and start over. Fads come and go, but good design is timeless. Conforming to the latest design trends is a good way to ensure temporary public appeal, but how long will those trends last? As far as I know, there was hardly ever a time when marquee and blink tags were accepted as professional web design markup ... but scrolling JavaScript news tickers, “high readability” hit-counters, and chunky table borders have graced the home pages of many high-profile sites in the past. These are the shag carpets, sparkly acoustic ceilings, and faux wood paneling of the web design world. Take a trip in the Internet Wayback Machine, and look for late-nineties versions of some of the top Fortune 500 and pre-dot-com boom-era websites. Try to find examples of good and bad design. In the midst of some of the most outdated, laughable websites, you’re likely to find some pages that still look surprisingly relevant. Most likely, these designs aren’t dependent on flashy Photoshop filters or trendy image treatments. As you read this book, keep in mind that good design transcends technology. The finishing touches make a big impression. I’ve heard it argued recently that deep down, people really love “anti-marketing design.” The idea is that we trust sites that have an unpolished appearance and feel amateurish. I think this argument misses the point. No matter what type of website you’re developing, the design should be as intentional as the functionality. My wife and I didn’t change the functionality of our

  • 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 15 and 16: xv Chapter 3: Texture An aspect of
  • Page 17 and 18: 1 Chapter Layout and Composition Fo
  • Page 19 and 20: Layout and Composition 3 course. In
  • Page 21 and 22: Layout and Composition 5 I start ou
  • Page 23 and 24: Layout and Composition 7 Users reco
  • Page 25 and 26: Layout and Composition 9 Navigation
  • Page 27 and 28: Layout and Composition 11 Figure 1.
  • Page 29 and 30: Layout and Composition 13 960 Grid
  • Page 31 and 32: Layout and Composition 15 Balance I
  • Page 33 and 34: Layout and Composition 17 ■ bilat
  • Page 35 and 36: Layout and Composition 19 Figure 1.
  • Page 37 and 38: Layout and Composition 21 equidista
  • Page 39 and 40: Layout and Composition 23 from left
  • Page 41 and 42: Layout and Composition 25 Figure 1.
  • Page 43 and 44: Layout and Composition 27 Pablo Pic
  • Page 45 and 46: Layout and Composition 29 Three-col
  • Page 47 and 48: Layout and Composition 31 Trends: P
  • Page 49 and 50: Layout and Composition 33 your desi
  • Page 51 and 52: Layout and Composition 35 It seems
  • Page 53 and 54: Layout and Composition 37 Parallax
  • Page 55 and 56: Layout and Composition 39 screen si
  • Page 57 and 58: Layout and Composition 41 Figure 1.
  • Page 59 and 60: Layout and Composition 43 popups, t
  • Page 61 and 62: Layout and Composition 45 Figure 1.
  • Page 63:

    Layout and Composition 47 Figure 1.

  • Page 66 and 67:

    50 The Principles of Beautiful Web

  • Page 68 and 69:

    52 The Principles of Beautiful Web

  • Page 70 and 71:

    54 The Principles of Beautiful Web

  • Page 72 and 73:

    56 The Principles of Beautiful Web

  • Page 74 and 75:

    58 The Principles of Beautiful Web

  • Page 76 and 77:

    60 The Principles of Beautiful Web

  • Page 78 and 79:

    62 The Principles of Beautiful Web

  • Page 80 and 81:

    64 The Principles of Beautiful Web

  • Page 82 and 83:

    66 The Principles of Beautiful Web

  • Page 84 and 85:

    68 The Principles of Beautiful Web

  • Page 86 and 87:

    70 The Principles of Beautiful Web

  • Page 88 and 89:

    72 The Principles of Beautiful Web

  • Page 90 and 91:

    74 The Principles of Beautiful Web

  • Page 92 and 93:

    76 The Principles of Beautiful Web

  • Page 94 and 95:

    78 The Principles of Beautiful Web

  • Page 96 and 97:

    80 The Principles of Beautiful Web

  • Page 98 and 99:

    82 The Principles of Beautiful Web

  • Page 100 and 101:

    84 The Principles of Beautiful Web

  • Page 102 and 103:

    86 The Principles of Beautiful Web

  • Page 104 and 105:

    88 The Principles of Beautiful Web

  • Page 106 and 107:

    90 The Principles of Beautiful Web

  • Page 108 and 109:

    92 The Principles of Beautiful Web

  • Page 110 and 111:

    94 The Principles of Beautiful Web

  • Page 112 and 113:

    96 The Principles of Beautiful Web

  • Page 114 and 115:

    98 The Principles of Beautiful Web

  • Page 116 and 117:

    100 The Principles of Beautiful Web

  • Page 118 and 119:

    102 The Principles of Beautiful Web

  • Page 120 and 121:

    104 The Principles of Beautiful Web

  • Page 122 and 123:

    106 The Principles of Beautiful Web

  • Page 124 and 125:

    108 The Principles of Beautiful Web

  • Page 126 and 127:

    110 The Principles of Beautiful Web

  • Page 128 and 129:

    112 The Principles of Beautiful Web

  • Page 130 and 131:

    114 The Principles of Beautiful Web

  • Page 132 and 133:

    116 The Principles of Beautiful Web

  • Page 135 and 136:

    4 Chapter Typography Let’s face i

  • Page 137 and 138:

    Typography 121 dynamic headings onl

  • Page 139 and 140:

    Typography 123 Web Fonts with @font

  • Page 141 and 142:

    Typography 125 Typekit, at http://t

  • Page 143 and 144:

    Typography 127 What’s up with Pha

  • Page 145 and 146:

    Typography 129 4. Serif Serif is th

  • Page 147 and 148:

    Typography 131 with type, you’ll

  • Page 149 and 150:

    Typography 133 Figure 4.11. Leading

  • Page 151 and 152:

    Typography 135 The average Windows

  • Page 153 and 154:

    Typography 137 Figure 4.16. Modern

  • Page 155 and 156:

    Typography 139 Figure 4.18. An Exam

  • Page 157 and 158:

    Typography 141 Figure 4.20. Hand le

  • Page 159 and 160:

    Typography 143 <, and any >s wit

  • Page 161 and 162:

    Typography 145 While I do know a th

  • Page 163 and 164:

    Typography 147 Finding Fonts Althou

  • Page 165 and 166:

    Typography 149 Figure 4.29. The cas

  • Page 167 and 168:

    Typography 151 Well, mainly because

  • Page 169 and 170:

    Typography 153 Figure 4.32. KRG typ

  • Page 171 and 172:

    5 Chapter Imagery From layout, to c

  • Page 173 and 174:

    Imagery 157 Is it interesting? Alth

  • Page 175 and 176:

    Imagery 159 Figure 5.5. Twitter's

  • Page 177 and 178:

    Imagery 161 Figure 5.7. Photos of p

  • Page 179 and 180:

    Imagery 163 The size of a stock pho

  • Page 181 and 182:

    Imagery 165 the number of people wh

  • Page 183 and 184:

    Imagery 167 To have an accurate han

  • Page 185 and 186:

    Imagery 169 Flickr requires attribu

  • Page 187 and 188:

    Imagery 171 will force a design dec

  • Page 189 and 190:

    Imagery 173 Figure 5.17. Tight crop

  • Page 191 and 192:

    Imagery 175 One final non-rectangul

  • Page 193 and 194:

    Imagery 177 The resulting image in

  • Page 195 and 196:

    Imagery 179 Finally, the image is j

  • Page 197 and 198:

    Imagery 181 amount of compression y

  • Page 199 and 200:

    Imagery 183 Figure 5.31. Wing Cheng

  • Page 201 and 202:

    Imagery 185 The border-style proper

  • Page 203 and 204:

    Imagery 187 Figure 5.36. Natalie Do

  • Page 205 and 206:

    Imagery 189 Figure 5.38. The in-pro

Layout and Design - In Easy Steps
Responsive Email Design Guide - e-Dialog
Boot Camp
Principles of design
His cuisine challenges you with flavors and textures ... we wanted to ...
PDF Version - Esko Help Center
Paper to PDA - Parc
Starting_Photo_Business_final_V3
Digital Communications Top Tips
What is it? What can you do with it?
Daniel Crane - George Mason Law Review