what makes good web design?
DESCRIPTION
A presentation I gave for a job interview defining what I believe makes good web design. Some of it is has dated since spring 2007, but much of it has timeless concepts.TRANSCRIPT
![Page 1: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/1.jpg)
What makes good web design?
Richard Cornish
![Page 2: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/2.jpg)
A house
A hammer
A home to live in
Project:
Tool:
Goal:
![Page 3: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/3.jpg)
![Page 4: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/4.jpg)
![Page 5: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/5.jpg)
![Page 6: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/6.jpg)
I don’t make a house because I like the hammer.
I make a house because I need to live in it!
![Page 7: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/7.jpg)
Form followed functionFunction followed form
![Page 8: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/8.jpg)
Form followed functionFunction followed form
![Page 9: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/9.jpg)
From chaos ...
![Page 10: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/10.jpg)
... came order
![Page 11: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/11.jpg)
A Web site
Design, technology
To sell stuff,To read about a game,To get a date
... to connect people
Project:
Tool:
Goal:
![Page 12: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/12.jpg)
Netscape
Firefox
HTML
Transitional
CSS 1
XML
Javascript
Perl
MySQL
RealAudio
Shockwave
PDFs
vCards
WCAG 1.0
Ruby on Rails
Web 1.0
... no, Internet Explorer!
... no, Safari!
... no, XHTML!
... no, Strict!
... no, 2 ... no, 3!
... no, RSS ... no, ATOM!
... no, AJAX!
... no, PHP!
... no, PostgreSQL!
... no, Podcasts!
... no, Flash!
... no, eBooks!
... no, hCards!
... no, 2.0!
... no, Sapphire on Spaceships!
... no, 2.0 ... no, 3.0!
<img> <img />
xhtml1-strict.dtdxhtml1-transitional.dtd
{ text-indent } { text-shadow }
<?xml?>
type="text/javascript"
!
Web 1.0
![Page 13: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/13.jpg)
Hello!
Gradients
Drop shadows
Reflections
Rounded corners
Big type
Bright colors
Cute icons
Star shapes
Beta
!
![Page 14: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/14.jpg)
❖ Are all the links underlined? I prefer most links that’s aren’t “buttons” underlined.
❖ Is there a specified a visited link state?
❖ Are buttons fully clickable? I see semi-clickible buttons all the time and they bug the heck outta me.
❖ Are fly-outs functioning properly? Easy to click? Spaced far enough apart? I find these hard to use all the time, but when they’re done well they don’t frustrate me though.
❖ Are you using color for any important information? Don’t forget the colorblind may have a problem with that.
❖ Are alt attributes specified for non-ornamental images? Do they describe the image accurately where it’s helpful to do so?
❖ Is there relevant meta information?
❖ Is there a proper doctype?
❖ Are there proper margins, line height and letter spacing?
❖ Does content maintain a good default line length and font size (especially for small serif fonts) for reading?
❖ Are fonts relative and scalable?
❖ Is there decent contrast for text?
❖ Do borders give enough room to text and/or important visual elements?
❖ Is there a good use of whitespace?
❖ Do headlines look like headlines? Do they make sense in relation to the content?
❖ Are navigation labels straightforward and easy to understand?
❖ Do the pages look good cross browser? Cross platform? Check if you can!
❖ Is there a proper page title for each page? Hopefully relevant to the page itself and its content?
❖ Is there an “About” page? Most every site should have something!
❖ For content heavy sites — does it have a well categorized archive and search? Depending on the site, search should be on every page. Either way, it’s good to accommodate both browsers (as in people browsing a site) and searchers on content rich sites.
❖ Do you have dates and authors for anything like an article or post? Something that kills me about many of blogs. I like to know when and by whom when reading something.
❖ Does the content print well?
❖ Is there up-to-date and easy-to-find contact information?
❖ Do you have a custom 404 page? These can be a real help.
❖ Do you have a working link to RSS feeds if available?
❖ Did you check content for passive voice?
❖ Have you checked your spelling “gotchas”? I miss these all the time.
❖ Are links checked and working?
❖ Are there any typos in images? Typos in alt attribute text?
❖ Is there a copyright on every page?
❖ Is there a text equivalent for any important graphical information?
❖ Is there a link to home (or whatever you use for home) from every page?
❖ is there generic about information or link to it from every page for those coming in via search engine?
❖ Are PDFs and other “non-html” files labeled properly?
❖ Are advertisements labeled as such, or obvious as advertisements?
❖ Does the design work well in 800×600?
❖ Are all forms functioning properly? Are they easy to fill out?
❖ Do error messages make sense?
❖ Is feedback easy for visitors to give?
❖ Does the back button always work?
D. Keith Robinson
7nights.com/asterisk/archive/2004/ 07/the-big-web-design-details-list
![Page 15: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/15.jpg)
(The elements that make a successful home page are) anything that accomplishes the site’s objectives and goals.
Really, that’s all it comes down to at the end of the day. I wish it were as simple as ‘The Seven Habits of Highly Effective Homepages,’ but no single list will work for every possible Web site strategy.”
“
Cameron Moll, March 2005
digital-web.com/articles/cameron_moll
![Page 16: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/16.jpg)
It is purpose that drives us.”“ Agent Smith
The Matrix Reloaded
![Page 17: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/17.jpg)
islostarepeat.com
![Page 18: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/18.jpg)
fsa.usda.gov/haynet (old)
![Page 19: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/19.jpg)
Expand when necessary
Contract when possible
... just like your pants
![Page 20: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/20.jpg)
Good webGood design
Good web design
+
![Page 21: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/21.jpg)
The ideas
The Web as a platform
Cooperation, not control
Collective intelligence and experience
Effective communication
The grit
Semantic markup
Separation of content and presentation
Accessibility
Usability
![Page 22: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/22.jpg)
<table summary="a unholy mess" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="9" width="11" /></td> <td width="150" height="10"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="20" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="10"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="20" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr valign="top"> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150">This could really be done much more simply.</td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338">Guess how much markup there is in this little table? 13.7k. There are 17 rows and 9 columns in this thing. And did I mention all of the spacer GIFs?</td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="20"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="20"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="10"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="10"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr valign="top"> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150">There are way too many table cells and spacers in here.</td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338">And all of the dotted borders are done with a <code>background</code> attribute on table cells, which won't validate. <table summary="list" width="338" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">A nested table? What for?</td> </tr> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">To make a bulleted list? You're kidding, right?</td> </tr> </table> </td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="20"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="20"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="10"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="10"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr valign="top"> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150">This could all be done with 8 table cells and 4 CSS rules.</td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338">Seriously. 8 cells and 4 css rules, that's all it takes. <table summary="list" width="338" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">Oh no, another table masquerading as a bulleted list.</td> </tr> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">Just mark up your bulleted lists as bulleted lists and let CSS do the rest.</td> </tr> </table> </td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="20"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="20"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="10"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="10"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr valign="top"> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150">You need a rule for <table>, one for <td>, one for <ul> and one for <li>.</td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338">That's it. Once you have those you're golden. <table summary="list" width="338" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">That's better than using 8 more table cells to make a fake bulleted list, which ends up being much less accessible.</td> </tr> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">Excellent! The last fake bullet.</td> </tr> </table> </td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="20"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="20"> </td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> </table>
![Page 23: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/23.jpg)
<table summary="a unholy mess" width="553" border="0" cellspacing="0" cellpadding="0"><tr valign="top"><td>much better</td><td>Guess how much markup there is in this little table? 2.1k. There are 4 rows and 2 columns in this thing. And no spacer GIFs.</td></tr><tr valign="top"><td>just right</td><td>And all of these dotted borders are done with CSS and are perfectly valid.<ul><li>This is a list item now</li><li>Just the way it's supposed to be</li></ul></td></tr><tr valign="top"><td>This is all done with 8 table cells and 4 css rules.</td><td>Seriously. 8 cells and 4 css rules, that's all it takes.<ul><li>Hooray for bulleted lists</li><li>Why not just mark up your bulleted lists as bulleted lists and let CSS do the rest?</li></ul></td></tr><tr valign="top"><td>You need a rule for <table>, one for <td>, one for <ul> and one for <li>.</td><td>That's it. Once you have those you're golden.<ul><li>I just love bulleted lists</li><li>Excellent! no more fake bullets</li></ul></td></tr></table>
![Page 24: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/24.jpg)
Smaller files
Faster-loading pages
Less-costly bandwidth
More page views ... ?
![Page 25: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/25.jpg)
Better screen readings
Better search engine rankings
Easier to maintain and redesign
![Page 26: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/26.jpg)
Identity
![Page 27: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/27.jpg)
strength earth halotravelspeed
cars energy carstransitathletics
peugeot bp toyotatubenike
![Page 28: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/28.jpg)
Identity appeals to feelings
and transcends text
![Page 29: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/29.jpg)
![Page 30: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/30.jpg)
Consistent identity creates trust
![Page 31: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/31.jpg)
![Page 32: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/32.jpg)
![Page 33: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/33.jpg)
Just be careful
You’re you — be proud of it
![Page 34: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/34.jpg)
Grid
![Page 35: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/35.jpg)
![Page 36: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/36.jpg)
flickr.com/photos/andwar
Hierarchical Categorical
![Page 37: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/37.jpg)
![Page 38: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/38.jpg)
![Page 39: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/39.jpg)
ypographyT
![Page 40: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/40.jpg)
![Page 41: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/41.jpg)
![Page 42: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/42.jpg)
font-family:font-size:font-variant:line-height:text-align:text-indent:text-transform:
w3c.org
arial, sans-serif;150%;small-caps;1.5em;justify;1em;uppercase;
p {
}
![Page 43: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/43.jpg)
mikeindustries.com/sifr
scalable Inman Flash Replacement
June 2006
Display your font on their computer while using standards
... but there is always a catch
![Page 44: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/44.jpg)
Colo(u)r
credit: flickr.com/photos/minarets
![Page 45: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/45.jpg)
wellstyled.com/tools/colorscheme2/index-en.html
![Page 46: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/46.jpg)
mezzoblue.com
Let nature decide ...
![Page 47: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/47.jpg)
pantone.com
... or let the pros decide
![Page 48: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/48.jpg)
![Page 49: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/49.jpg)
![Page 50: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/50.jpg)
Imagery
![Page 51: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/51.jpg)
credit: fortymedia.com
The flirty Customer Service GalOperators are standing by to take your call ...
and your heart
![Page 52: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/52.jpg)
Uh, no.
We can do better than that.
![Page 53: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/53.jpg)
![Page 54: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/54.jpg)
![Page 55: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/55.jpg)
![Page 56: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/56.jpg)
That’s OK if you’re not an
award-winning photographer
Just get real with your images
![Page 57: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/57.jpg)
![Page 58: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/58.jpg)
![Page 59: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/59.jpg)
![Page 60: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/60.jpg)
![Page 61: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/61.jpg)
Never underestimate the power of an image
sxc.hu
everystockphoto.com
yotophoto.com
your own digital camera (seriously)
![Page 62: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/62.jpg)
Media
![Page 63: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/63.jpg)
![Page 64: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/64.jpg)
March 2006
![Page 65: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/65.jpg)
![Page 66: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/66.jpg)
So, is design the second coming?
As a designer, I wish.
![Page 67: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/67.jpg)
![Page 68: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/68.jpg)
Crappy sites succeed despite their bad design
(not because of it)
Why?
![Page 69: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/69.jpg)
Windows
A fatal exception occurred at 0137:BFF9A07C. The currentapplication will be terminated.
* Press any key to terminate the current application* Press CTRL+ALT+DEL again to restart your computer. You will lose and unsaved information.
Press any key to continue
![Page 70: What makes good web design?](https://reader033.vdocuments.mx/reader033/viewer/2022051612/54bede664a7959d6208b45c4/html5/thumbnails/70.jpg)
Because visitors will slog through hell
to get to what they want ...
if they want it badly enough
Why take that chance?