Web Design and Usability Techniques
(Second Edition)

I'm always amazed that people will actually choose to sit in front of the television and just be savaged by stuff that belittles their intelligence. -

Alice Walker, Writer (1944- )

A "local" Home Page for our class.  Copy the index.html page to your 085563Data folder.

Planning a Web Site

1. Determine the Site Mission
   • Web Design Process
     • David's Web Design Page
     • Steps to web Site Creation
     • A Complete Website Planning Guide
     • Planning a usable website: A three-step guide
     • Six Phases of the Web Site Design and Development Process
     • Starting Out Organized: Website Content Planning The Right Way
     • The Hierarchy of Internet Metaphors
     • Differences Between Print Design and Web Design
     • Style Guides
     • Web Style Guide
     • Research-Based Web Design & Usability Guidelines
     • Homepage Usability: 50 Websites Deconstructed    [homepage or home page?]
     • Pithy Design Quotes
   • Usable Sites: Usability
     • Usability.gov    step-by-step visual map
     • Usability 101: Introduction to Usability
     • Titles
     • useit.com
     • Principles of simple website design
     • How to write summaries for web and intranet pages, and why
     • STC Usability Web Site
     • Research-Based Web Design & Usability Guidelines
     • Usability Techniques   User-Centered Design and Web Development
     • 456 Berea Street | Web Standards, Accessibility, Usability
     • Designing More Usable Web Sites   [Trace]
     • Wanted by the Police: A Good Interface
     • The "Tens"
       1. Ten Guidelines for User-Centered Web Design
       2. Top Ten Guidelines for Homepage Usability
       3. jessett.com | top 10 tips
       4. Top Ten Web Design Tips    WebDesignHelper.co.uk
       5. 10 Usability Principles   (to Guide you Through the Web Design Maze)
       6. 10 Big Myths about copyright explained
       7. Writing for a Web Audience   [Ten Web writing tips ]
       8. The ABCs of Building a Web Site: Amateur Web Sites - the Top Ten Signs
       9. Ten reasons people don't visit your website
       10. The Top Ten Reasons Visitors Leave Your Site
       11. Ten tips for managing a successful Web redesign
     • Web Development Mistakes
     • Usability for Senior Citizens
     • Improve Usability for Older Users
     • Usability of Websites for Teenagers
     • Kids' Corner: Website Usability for Children
     • Eyetrack III
     • Galleries: The Hardest Working Page on Your Site
     • Usable Web
     • Location, Path & Attribute Breadcrumbs
     • useit.com  >  Alertbox >
     • PowerMapper: Automatic Site Mapping Tool
     • Titles
     • Status Code Definitions
     • 404 Not Found:
       1. The Perfect 404
       2. 404 Not Found Homepage
       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!
     • Visitor Agreement   [ By using this site, you accept the terms of our Visitor Agreement.]
     • Privacy Policy
     • Disclaimer
     • Notification of Page Changes
     • Leaving the site
       1. Leaving David's Site for the Whitehouse    [Opens in a new window]
   • Web Site Types
     • Education:
       1. American Universities
     • Entertainment:
       1. comedycentral
       2. MTV
     • Corporate:
       1. Ford Motor Company
       2. AT&T
       3. Kraft Foods
       4. Tyson    [Have you had your protein today?]
     • Transactional:
       1. Amazon.com--Earth's Biggest Selection
       2. eBay - the world's online marketplace
     • General Consumer:
       1. Snickers   
       2. Guinness   [test for Java and JavaScript]
     • Specific Consumer
       1. Tonik Health Insurance - Blue Cross of California
     • Content-Driven:
       1. edmunds
       2. CNN
       3. c|net
       4. Salon
       5. International Business Machine
     • Government
       1. Find a County   NACO
       2. The Official City of Miramar Web Site
       3. Christchurch City Council, Christchurch, New Zealand
     • Yahoo!   Google
     • Kenneth Cole Online Store  
     • Washingtonpost.com
   • Brainstorm the Site Mission
2. Determine the Audience
   • Accessibility
     • Web Accessibility Training for Section 508
     • 10 Accessibility Blunders of the Big Players
     • Web Accessibility Initiative (WAI)
     • JimThatcher.com Web Accessibility for Section 508
   • Demographics
     • Pew Internet & American Life Project
     • Know your audience and their needs    Examples
     • Kids' Corner: Website Usability for Children
     • Teenagers on the Web
     • Usability for Senior Citizens
     • Georgia Tech Graphic Visualization and Usability Center (GVU)
     • Nielsen/NetRatings
     • Nua Internet Surveys
   • Computer Equipment Statistics
     • W3Counter - Global Web Stats
     • The Counter: Stats
     • Browser News: Statistics - Trends
     • Browser Watch
     • Usage share of web browsers
     • Browser Statistics:  University of Illinois at Urbana Champaign
     • Browser Statisticts:  w3schools
3. Choose a Domain Name
• Domain Name Registration
• marvinsgardens: Google
4. Organize Content
   • Chunk Size
     • Seven Plus or Minus Two
     1. Is the Magic Number 7 Relevant to Web Page Design
     2. The Myth of "Seven, Plus or Minus 2"
   • Content Categories
   • Site Flowchart
     • Site Maps:
       1. Lycos Site Map
       2. Apple Site Map
       3. W3C Search, Site Index, Keywords !
   • Labels
5. Determine Technoloies for a Site
   • HTML
     • David J. Hark's <html> Class Resources
   • CSS
     • David's Introduction to CSS Training
     • David's Advanced CSS Training
   • Database-driven Sites
   • FlashSites
   • XML
   • AJAX
   • David's HTML 5

CREATING A MOCK-UP

1. Choose lmages
   1. Choosing Images for a site
2. Choose Colors
   • Color Theory Tutorial
   • Hue
   • Saturation
   • Tint
   • Complementary Colors
   • Analogous Colors
   • Web-Safe Colors     
   • Color Blind Viewers
3. The Need for Web Design Standards
4. Mastery, Mystery, and Misery: The Ideologies of Web Design
5. Apply Design Principles
   • Focal Point
   • Proximity
   • Alignment
   • Contrast
   • Grid
   • Above the Fold
   • Eyes top left - what web authors learn from Eyetrack III
6. Create a Mock-up
   • Paper Prototyping
   • Mock-up      image page  (remove images)
   • Home Page
   • Template
   • Navigation Bread Crumbs
   • Utility Navigation
   • Navigation Usability
     • Is Navigation Useful?
   • Web Page Usability
   • Galleries: The Hardest Working Page on Your Site
7. Welcome To North Atlantic University [rt. click on the page]

DEVELOPING READABLE CONTENT FOR THE WEB

1. Writing Effectively for the Web and Intranet
2. Choose Fonts
   • Serif Fonts
   • Sans-Serif Fonts
   • Common Fonts    Earl's Font Face Test Page
   • WebFonts
   • A Comparison of Popular Online Fonts: Which is Best and When?
   • CSS: headings and web fonts
3. lmprove Readability
   • Writing Effectively for the Web and Intranet
   • Inverted Pyramid Writing Style
   • Write newspaper style
   • Standards for online content authors
   • How to write summaries for web and intranet pages, and why
   • When is a long document not a long document?
   • Automatic translation : Microsoft Translator
     

SITE TESTING

1. Testing on Adv CSS page
2. Perform Usability Testing
   • Testing Roles
   • Testing
   • Testing Areas
3. Validate a Site      
   • HTML Standards
   • Accessibility
   • Browser Compatibility
   • Image File Formats
   • Slicing      [example]
   • Dealing with Browser Incompatibilities

PUBLICIZE A SITE

1. lncrease Search Engine Rankings
   • Google Analytics | Official Website
   • Real Time Web Analytics, Live Chat, and Web Statistics - Woopra
   • How To Add Social Networking Buttons To Your Site
   • Optimizing Web Sites for Search Engines
   • FreeFind: Free Site Search Engine
   • Search Engine Rankings
   • Search Engine Spiders
   • Crawler Pages
   • Search Engine Watch (SEW)
     • Blog
     • Forums
     • SEM Basics

** Home ** Class Pages ** Site Map **

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

© 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012 David J. Hark
All rights reserved.