Web Design and Usability Techniques

"Strictly speaking, there are no enlightened people;
there is only enlightened activity."
Suzuki Roshi

Lesson 1: Overview of Design Issues

  1. David's Web Design Page
  2. Steps to web Site Creation
  3. The Hierarchy of Internet Metaphors
  4. Differences Between Print Design and Web Design
  5. Style Guides
  6. Create A Web Site Style Guide
  7. Research-Based Web Design & Usability Guidelines
  8. Homepage Usability: 50 Websites Deconstructed    [homepage or home page?]
  9. Great Homepages Really “Suck”
  10. UIWEB.COM - Web and interaction design
  11. Writing for the web
  12. Pithy Design Quotes

Lesson 2: Planning a Site

  1. Planning Your Site - A Worksheet
  2. Metaphors & Schemas in Design
  3. WebSideStory
  4. Wanna web site?    Arachnophilia ?     Careware ?
  5. monster.com
  6. Welcome to Mama's House    Ragu
    1. Present Day
    2. 2002
    3. 2000
    4. 1998
    5. 1996

 

Lesson 3: Design Guidelines

  1. http://www.devx.com/webdev/default1.asp?Area=Web+Development+%28Other%29
  2. CreativePro
  3. Education:
    1. College and University Home Pages
    2. American Universities
  4. Entertainment:
    1. comedycentral
    2. MTV
  5. Corporate:
    1. Ford Motor Company
    2. JH Campbell Online
    3. AT&T
    4. Kraft Foods
    5. Tyson    [Have you had your protein today?]
  6. Transactional:
    1. Amazon.com--Earth's Biggest Selection
    2. eBay - the world's online marketplace
  7. General Consumer:
    1. Snickers   
    2. Guinness   [test for Java and JavaScript]
  8. Specific Consumer
    1. Tonik Health Insurance - Blue Cross of California
  9. Content-Driven:
    1. edmunds
    2. CNN
    3. c|net
    4. Salon
    5. International Business Machine
  10. Government
    1. Find a County   NACO
    2. The Official City of Miramar Web Site
    3. Christchurch City Council, Christchurch, New Zealand
  11. Yahoo!   Google
  12. Kenneth Cole Online Store   [try this w/o JavaScript]
  13. ICQ.com
  14. TrustedCasions.com 
  15. Washingtonpost.com
  16. BrowserSizer
  17. WebTV Viewer

Lesson 4: Effective Use of Images

  1. Graphic Design for the Web
  2. Graphic file formats
  3. Digital Photography
  4. Scalable Vector Graphics
  5. Adobe SVG Zone
  6. SVG: The New Flash
  7. Browse Middle Eastern newspapers   [SVG]
  8. Scalable Vector Graphics  An introduction

Lesson 5: Effective Use of Color

  1. Color on Buildit
  2. Color Theory Tutorial
  3. Color Matters   [Why do they have a "splash" page?]
  4. Earl F. Glynn's Color Library     [Great starting place for color information]
  5. Light and Color  [Interactive Java Tutorials]
  6. Basic Color Theory --Douglas Barkey
  7. Munsell Color Science Laboratory
  8. Color it effective: How color influences the user
  9. Poynter.org: Color Contrast & Dimension in News Design
  10. Chronological Bibliography on Color Theory
  11. Colour Physics FAQ
  12. Non-Dithering Colors in Browsers
  13. Natural Selections: Colors Found in Nature and Interface Design
  14. CIE Web site of the International Commission on Illumination
    1. Interactive CIE demonstrations
  15. Color Wheel Pro: See Color Theory in Action!
    1. Color Theory Basics
    2. Classic Color Schemes
    3. Visual vs. Mixing Color Wheel
    4. Color Meaning

Lesson 6: Writting Good Code

  1. W3C: Index of Elements
  2. xhtml on Buildit
  3. Clean up your Web pages with HTML TIDY
  4. Using TidyGUI
  5. XForms
  6. Validating on Buildit
  7. Doctor HTML    Single-Page Analysis
  8. Web Page Analyzer
  9. NetMechanic

Lesson 7: Safe CSS

  1. David's CSS Page
  2. turn on/off stylesheet
  3. Diamond Demo Tools    Kill Style Sheets
  4. W3C: Cascading Style Sheets
  5. Font
  6. css Zen Garden: The Beauty in CSS Design
  7. CSS Fonts

Lesson 8: Creating Usable Sites

  1. Usability 101: Introduction to Usability
  2. Titles
  3. useit.com
  4. Principles of simple website design
  5. How to write summaries for web and intranet pages, and why
  6. STC Usability Web Site
  7. Research-Based Web Design & Usability Guidelines
  8. Usability Techniques   User-Centered Design and Web Development
  9. WebWord Usability Weblog :: Usability and Human Factors for the Internet
  10. 456 Berea Street | Web Standards, Accessibility, Usability
  11. Usability Must Die
  12. Designing More Usable Web Sites   [Trace]
  13. Wanted by the Police: A Good Interface
  14. Web-User Satisfaction on the Upswing
  15. Failing Grades For Many Fortune 100 Web Sites
  16. Common Myths about Web Design
  17. The "Tens"
    1. Ten Guidelines for User-Centered Web Design
    2. Top 10 Reasons to Not Shop On Line
    3. Top Ten Guidelines for Homepage Usability
    4. jessett.com | top 10 tips
    5. Top Ten Web Design Tips    WebDesignHelper.co.uk
    6. 10 Usability Principles   (to Guide you Through the Web Design Maze)
    7. 10 Big Myths about copyright explained
    8. Writing for a Web Audience   [Ten Web writing tips ]
    9. The ABCs of Building a Web Site: Amateur Web Sites - the Top Ten Signs
    10. Ten reasons people don't visit your website
    11. The Top Ten Reasons Visitors Leave Your Site
    12. 0sil8.top 10 secrets of a successful web site
    13. Ten tips for managing a successful Web redesign
    14. Top Ten Mistakes Site Builders and Developers Make
  18. Web Development Mistakes
  19. Usability for Senior Citizens
  20. Improve Usability for Older Users
  21. Usability of Websites for Teenagers
  22. Kids' Corner: Website Usability for Children
  23. Study: Men and Women Use Internet Differently
  24. Designed for life   [Donald Norman]
  25. Usability
  26. Eyetrack III
  27. User Interface Engineering
  28. The Principle of Least Astonishment
  29. Is the Computer Desktop an Antique?
  30. Designer & Developer - Usability Testing
  31. Galleries: The Hardest Working Page on Your Site
  32. Usability.gov
  33. == usable tools ==
  34. Usable Web
  35. NetConversions
  36. Usability Methods & Tools
  37. Location, Path & Attribute Breadcrumbs
  38. LookSmart   You are here: Home > Computing > Computer Science > Programming > Internet & Scripting > HTML
  39. useit.com   useit.com -> Alertbox -> June 2001 PDF
  40. PowerMapper: Automatic Site Mapping Tool
  41. FreeFind: Free Site Search Engine
  42. Site Maps:
    1. Lycos Site Map
    2. Apple Site Map
    3. FirstGov -- Site Map
    4. LA Times Site Map
    5. Whitehouse.gov Site Map
    6. W3C Search, Site Index, Keywords
    7. The Common Market     Site Mapper
    8. XRCE Hyperbolic Tree site map
    9. Web Design that use "wheel/flower"
    10. The Map of the CIP4 Website: www.cip4.org
    11. Web Site Mapping Software
    12. Google Sitemap Generator made with Java!
  43. Titles
    1. Find U.S. State Department Untitled Pages
    2. Find Department of Veterans Affairs' Untitled Pages
    3. Find IBM's Untitled Pages
  44. Status Code Definitions
  45. 404 Not Found:
    1. The Perfect 404
    2. 404 Not Found Homepage
      1. 404 Not Found Homepage   [view source - no </style>] 
    3. 404 Research Lab
    4. Customize Your 404 Error Message
    5. Custom 404 Error Message Prevents Customer Loss
    6. Improving the Dreaded 404 Error Message
    7. Whats so funny about a 404 Error message?      [Fred Langa] 
    8. 404 Errors
    9. 300 Multiple Choices
    10. Eric has left the building.
    11. Vincent's CASABLANCA HomePage has moved
    12. Principles of Graphic Design
    13. Oops!
  46. Visitor Agreement   [ By using this site, you accept the terms of our Visitor Agreement.]
  47. Privacy Policy
  48. Disclaimer
  49. Notification of Page Changes
  50. Leaving the site
    1. Leaving David's Site for the Whitehouse    [Opens in a new window]

Lesson 9: Accessibility

  1. David's Web Accessibility Page
  2. Web Accessibility Training for Section 508
  3. 10 Accessibility Blunders of the Big Players
  4. Web Accessibility Initiative (WAI)
  5. Designing Accessible Web Sites Implementing Section 508 of the Rehabilitation Act
  6. JimThatcher.com Web Accessibility for Section 508
  7. CSS Techniques for Web Content Accessibility Guidelines 1.0
  8. Accessibility Toolbar - Accessible Information Solutions

Lesson 10: Dealing with Browser Incompatibilities

  1. The Web Standards Project
  2. Viewable with Any Browser
  3. Cross-Browser Issues
  4. Designing for Multiple Browsers Without Being Bland
  5. AnyBrowser.com - Your Source for Browser Compatibility Verification
  6. BrowserCam Screen Capture Service

Lesson 11: Publicizing Your Web Site

  1. A Place to Start
  2. Basics of search engine optimisation
  3. Seo Site Checkup
  4. Search Engine Optimization Promotion Tools
  5. Seven Steps of Search Engine Optimization  [WebTrends]
  6. Advertising Your Site  [IBM]
  7. Google Information for Webmasters
  8. MetaData:
    1. How To Use HTML Meta Tags
    2. Metadata and Resource Description W3C
    3. META Tagging for Search Engines
    4. Dublin Core Generator
    5. Dublin Core Metadata Template
    6. META builder
    7. Free OnLine HTML Meta Tag Generator
  9. Heaven's Gate Website

Lesson 12: Review

** Home ** Class Pages ** BuildIt **

David J. Hark
HARK/INTERNET-HELP
P. O. Box 201 Shepherdstown, WV 25443-0201
304-876-2607
dhark@fred.net
http://www.dhark.com
http://www.fred.net/dhark
Last updated: 26 August 2008

© 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008 David J. Hark