Embed Size (px)
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.
Citation preview
What makes good web design?
Richard Cornish
A house
A hammer
A home to live in
Project:
Tool:
Goal:
I don’t make a house because I like the hammer.
I make a house because I need to live in it!
Form followed functionFunction followed form
Form followed functionFunction followed form
From chaos ...
... came order
A Web site
Design, technology
To sell stuff,To read about a game,To get a date
... to connect people
Project:
Tool:
Goal:
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
Hello!
Gradients
Drop shadows
Reflections
Rounded corners
Big type
Bright colors
Cute icons
Star shapes
Beta
!
❖ 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
(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
It is purpose that drives us.”“ Agent Smith
The Matrix Reloaded
islostarepeat.com
fsa.usda.gov/haynet (old)
Expand when necessary
Contract when possible
... just like your pants
Good webGood design
Good web design
+
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
<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>
<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>
Smaller files
Faster-loading pages
Less-costly bandwidth
More page views ... ?
Better screen readings
Better search engine rankings
Easier to maintain and redesign
Identity
strength earth halotravelspeed
cars energy carstransitathletics
peugeot bp toyotatubenike
Identity appeals to feelings
and transcends text
Consistent identity creates trust
Just be careful
You’re you — be proud of it
Grid
flickr.com/photos/andwar
Hierarchical Categorical
ypographyT
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 {
}
mikeindustries.com/sifr
scalable Inman Flash Replacement
June 2006
Display your font on their computer while using standards
... but there is always a catch
Colo(u)r
credit: flickr.com/photos/minarets
wellstyled.com/tools/colorscheme2/index-en.html
mezzoblue.com
Let nature decide ...
pantone.com
... or let the pros decide
Imagery
credit: fortymedia.com
The flirty Customer Service GalOperators are standing by to take your call ...
and your heart
Uh, no.
We can do better than that.
That’s OK if you’re not an
award-winning photographer
Just get real with your images
Never underestimate the power of an image
sxc.hu
everystockphoto.com
yotophoto.com
your own digital camera (seriously)
Media
March 2006
So, is design the second coming?
As a designer, I wish.
Crappy sites succeed despite their bad design
(not because of it)
Why?
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
Because visitors will slog through hell
to get to what they want ...
if they want it badly enough
Why take that chance?
