Good Website Design Checklist

If you have been a web browser for any length of time, you have seen all types of websites that are ugly and usable. Here is a checklist of what to consider and include when building a new website.

  1. first impressions
  2. navigation
  3. text and links
  4. Content
  5. graphics, video, and audio

First Impression Counts

  1. Site designed for primarily for the visitor
  2. Home page designed to solve a particular problem for the visitor, not a pithy "we are great because" section (save this for the about page)
  3. Easy for the visitor to understand what your company is about
  4. Well defined home page focal point - what is the first thing you want your visitor to focus on when the load the home page
  5. Pleasant/simple looking home page - cluttered home pages leave the visitor with an impression that your business is unprofessional and disorganized
  6. Pages take too long to load - if your web page takes more than a couple seconds to load that visitor is hitting the back button
  7. Quick scan navigation - if your visitor must read your home page before knowing where to find the information they are looking for, their gone. People don't read the web, they scan the web
  8. Design elements (ie., navigational menu, ...) are where they are expected to be
  9. Element unnecessary design elements (ie., flash pages, animations, too much text, too many pictures, ...) - if it doesn't solve a visitors problem, get rid of it
  10. Website works when javascript is disabled and frames are not supported
  11. Text based navigation links - stay away from the flash and javascript menus
  12. Don't have "Welcome to ..." on your home page
  13. Don't have a splash page for your home page
  14. Title tags are meaningful - title tag such as home, untitled, index, new document are meaningless to the visitor
  15. Don't have an audio or video file automatically play when the page loads
  16. Check your pages in all the major browsers for compatibility
  17. Important content and call to action are "above the fold"
  18. Don't use home page pop-ups or pop-unders
  19. Don't force your visitor to install weird plug-ins to make the site functional
  20. Provide clear instruction next to your call to action

Navigation

  1. Use simple, text based link navigation menus
  2. Provide breadcrumb navigation so the user knows where they are and how to get back to a previous page
  3. Don't use sideways navigation
  4. Use link shortcuts on the home page to the most important information
  5. Put navigational menus at the top center, top left, or top right of every page
  6. Use a consistent site navigation menu across the whole website
  7. Divide your website into clear categories and subcategories
  8. Clearly label your navigational text to set the visitor's expectation when they click the link
  9. Don't make the user horizontally scroll to get to the navaigational menus
  10. Use the same size and color text for all navigational links
  11. Keep all pages less than three clicks away from the home page

Text and Links

  1. Don't mix and match text sizes and colors
  2. Use standard fonts
  3. Follow normal capitalization rules
  4. Stay away from scrolling, blinking, fading, or moving text
  5. Your site has the proper color and contrast scheme
  6. Use centered text only on headlines
  7. Don't use justified text
  8. Don't use browser specific or proprietary tags
  9. Don't use moving Javascript text in the status bar
  10. Don't use underlined text - leave underlined text for links only
  11. Use proper link text color schemes - hover and visited links are different color than non-visited links
  12. Links must be clearly labeled or distinquishable from non-linked text
  13. Don't use too many links on one page - try to keep the link count per page to less than 10 (excluding navigational menu links)
  14. Keep link (anchor) text to less than 5 words
  15. Check regularly for "dead" links
  16. Use website specific 404 pages

Content

  1. Know what content is popular on your website and make it easily accessable
  2. Organize your content based on visitor (not organizational) needs
  3. Divide content into logical and consist categories
  4. Have engaging, relevant, accurate, fair, and impartial content
  5. Identify non-html documents (ie., pdf, powerpoint, word, excel, ...)
  6. Write web specific content - don't copy and paste printed or other media content onto your website
  7. Keep pages short - if you need more than 500 words for a topic then divide it into multiple pages. Browers typically skim webpages until they find what they need
  8. Constantly add new content to your website to keep visitors returning again and again
  9. Stay away from offensive, politically incorrect, and racial content
  10. Proofread content for spelling, grammar, and capitalization errors
  11. Bury the "mission statement" pages into the about section - don't need links from your home page to this content
  12. Don't post company sensitive information onto your website - everything published webpage is publically disclosed information, whether your mean it to be or not
  13. Don't link to "under construction" sections until that section is ready for public viewing
  14. Make sure your website has privacy and terms of use pages
  15. Don't use word or powerpoint to generate your sites content

Graphics, Video, Audio

  1. Use a professional designed logo
  2. Website logo should not be a scan business card
  3. Website logo should be at the top of the every page and link back to the home page
  4. Seperate banner ads from graphics - people tend to ignore banner ads so they'll ignore your graphics as well
  5. Only use quality graphics - stay away from cheap clip art
  6. Use divider bars with great care
  7. Use small file size graphic - try to keep each image to less than 20kB
  8. Don't automatically load movies - have the user click the video to play
  9. Don't use trailing cursors
  10. Don't use large images and resize them with the img tag height and width parameters
  11. Don't use graphical text - graphics are graphics and text is text
  12. Stay away from animated gifs, 3D graphics, gradient images, beveled images, and image shadows
  13. Use alt tags with all images
  14. Use a pleasant color scheme - stay away from all red or black background sites
  15. Don't use image maps
  16. Don't use graphics that suffer from the "halo effect"