SlideShare a Scribd company logo
1 of 2
Web Site Design Checklist

Required Reading: http://usability.gov/guidelines/

Content
   ___ Purpose: Why should someone visit my site?
   ___ Interest: What will interest a user to explore my site? to return to my site again?

    Content is the most important feature of a web site!

    http://www.501cweb.com/web-design-rules.htm
    http://www.enosis.com/resources/10drules.html

User-Centered
   ___ Who is my intended audience?
   ___ Do I solicit feedback about my site?

    If content is the most important feature, then the user is the most important person!

Navigation
   Is my navigation:
   ___ consistent?
   ___ intuitive?
   ___ obvious?
   ___ easy to locate?

    ___ Does every page have a link to my home page?
    ___ Does the home page or every page have my contact information?

    ___ Do I follow the 3-click rule: A user will lose interest if s/he doesn't find what s/he's looking
       for in 3 clicks.
            http://www.7nights.com/dkrprod/gwt_three.php

Graphics
   ___ Do I use graphics sparingly?
   ___ Do I provide text alternatives to graphical links?

Colors
   ___ Is there high contrast between background and foreground?

Fonts
   ___ Are the typefaces easy to read?
   ___ Are the font sizes neither too large nor too small?

White Space
   ___ Is there sufficient white space, but not too much?
   ___ Are there any white space trapped between elements?
   http://graphicdesign.about.com/library/weekly/aa030900a.htm




                                                   1
Layout
   Is my layout:
   ___ consistent throughout the site?
   ___ simple?
   ___ easy to read?

    ___ Do I prevent horizontal scrolling?
    ___ Do I limit vertical scrolling to about 3 screens?
    ___ If a page scrolls vertically, does it have anchors in both directions?
    ___ Do I make maximum use of the upper-left corner of a page?
    ___ When the user views the top of a page, do I draw the eye to the middle of the page?

    ___ Do I follow the 7-item rule: A person can process a limit of about 7 items of information at
       once.
           http://www.well.com/user/smalin/miller.html

    ___ Is every page organized by level of importance, with the most important elements at the
       top?
    ___ Do visual elements (font, size, color, position) indicate the level of importance?

    ___ Are the elements on a page balanced: symmetrical, asymmetrical, radial?
           http://graphicdesign.about.com/library/weekly/aa021000a.htm

    ___ Is there sufficient contrast: size, color, value, fonts, emphasis, shape, texture
             http://graphicdesign.about.com/library/weekly/aa012700a.htm

Loading Time
   ___ Are my image files small?
   ___ Do all the images have the width and height attributes?

Accessibility
   ___ Do all images have the alt attribute?
   ___ Do I provide text-based alternatives to plug-ins?

Accuracy
   ___ Do images load?
   ___ Do links work?
   ___ Is the text free of spelling mistakes?

Compatibility
   ___ Does my web site load properly on a variety of browsers?
    Note: This is not required for CS105.

Additional References
http://graphicdesign.about.com/cs/designbasics/a/webrules.htm
http://www.grantasticdesigns.com/5rules.html
http://www.501cweb.com/web-design-rules.htm
http://www.intuitive.com/articles/design-guide.html
http://graphicdesign.about.com/cs/webdesigntips/a/webchecklist.htm
http://www.useit.com/alertbox/20020512.html
http://www.pantos.org/atw/
http://webstyleguide.com/




                                                  2

More Related Content

Similar to Web Site Design Checklist

The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointD'arce Hess
 
Ninghua Ch3
Ninghua Ch3Ninghua Ch3
Ninghua Ch3ninghua
 
Usability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT FoundationUsability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT FoundationTonya Thomas
 
Tampa UX November 2014 Meetup
Tampa UX November 2014 MeetupTampa UX November 2014 Meetup
Tampa UX November 2014 MeetupMike Gallers
 
User Interface Design Basic
User Interface Design BasicUser Interface Design Basic
User Interface Design BasicHeru WIjayanto
 
Design for Accessibility
Design for AccessibilityDesign for Accessibility
Design for Accessibilityqixingz
 
DSpace - Digital Library - Heuristic Evaluation
DSpace - Digital Library - Heuristic EvaluationDSpace - Digital Library - Heuristic Evaluation
DSpace - Digital Library - Heuristic EvaluationDevesh Jagatram
 
香港六合彩 » SlideShare
香港六合彩 » SlideShare香港六合彩 » SlideShare
香港六合彩 » SlideSharebiyu
 
Web+Design+Guide[1]
Web+Design+Guide[1]Web+Design+Guide[1]
Web+Design+Guide[1]Anis Chief
 
7 Steps to Analyzing and Improving Your Company's Website - B2B and B2C Strat...
7 Steps to Analyzing and Improving Your Company's Website - B2B and B2C Strat...7 Steps to Analyzing and Improving Your Company's Website - B2B and B2C Strat...
7 Steps to Analyzing and Improving Your Company's Website - B2B and B2C Strat...Astek Consulting
 
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elementsrobin fay
 
Good bad ugly_presentation
Good bad ugly_presentationGood bad ugly_presentation
Good bad ugly_presentationD'arce Hess
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website designRavi Bhadauria
 

Similar to Web Site Design Checklist (20)

Ah cnn site_eval
Ah cnn site_evalAh cnn site_eval
Ah cnn site_eval
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePoint
 
Js site eval_pg
Js site eval_pgJs site eval_pg
Js site eval_pg
 
Ninghua Ch3
Ninghua Ch3Ninghua Ch3
Ninghua Ch3
 
Jamal Qaiyyim Ch3
Jamal Qaiyyim Ch3Jamal Qaiyyim Ch3
Jamal Qaiyyim Ch3
 
WebBestPractices3
WebBestPractices3WebBestPractices3
WebBestPractices3
 
Usability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT FoundationUsability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT Foundation
 
Js site eval_cnn
Js site eval_cnnJs site eval_cnn
Js site eval_cnn
 
Tampa UX November 2014 Meetup
Tampa UX November 2014 MeetupTampa UX November 2014 Meetup
Tampa UX November 2014 Meetup
 
User Interface Design Basic
User Interface Design BasicUser Interface Design Basic
User Interface Design Basic
 
ui
uiui
ui
 
Design for Accessibility
Design for AccessibilityDesign for Accessibility
Design for Accessibility
 
DSpace - Digital Library - Heuristic Evaluation
DSpace - Digital Library - Heuristic EvaluationDSpace - Digital Library - Heuristic Evaluation
DSpace - Digital Library - Heuristic Evaluation
 
香港六合彩 » SlideShare
香港六合彩 » SlideShare香港六合彩 » SlideShare
香港六合彩 » SlideShare
 
Web+Design+Guide[1]
Web+Design+Guide[1]Web+Design+Guide[1]
Web+Design+Guide[1]
 
Site Mockups
Site MockupsSite Mockups
Site Mockups
 
7 Steps to Analyzing and Improving Your Company's Website - B2B and B2C Strat...
7 Steps to Analyzing and Improving Your Company's Website - B2B and B2C Strat...7 Steps to Analyzing and Improving Your Company's Website - B2B and B2C Strat...
7 Steps to Analyzing and Improving Your Company's Website - B2B and B2C Strat...
 
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elements
 
Good bad ugly_presentation
Good bad ugly_presentationGood bad ugly_presentation
Good bad ugly_presentation
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 

More from butest

EL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBEEL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBEbutest
 
1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同butest
 
LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALbutest
 
Timeline: The Life of Michael Jackson
Timeline: The Life of Michael JacksonTimeline: The Life of Michael Jackson
Timeline: The Life of Michael Jacksonbutest
 
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...butest
 
LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALbutest
 
Com 380, Summer II
Com 380, Summer IICom 380, Summer II
Com 380, Summer IIbutest
 
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet JazzThe MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazzbutest
 
MICHAEL JACKSON.doc
MICHAEL JACKSON.docMICHAEL JACKSON.doc
MICHAEL JACKSON.docbutest
 
Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1butest
 
Facebook
Facebook Facebook
Facebook butest
 
Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...butest
 
Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...butest
 
NEWS ANNOUNCEMENT
NEWS ANNOUNCEMENTNEWS ANNOUNCEMENT
NEWS ANNOUNCEMENTbutest
 
C-2100 Ultra Zoom.doc
C-2100 Ultra Zoom.docC-2100 Ultra Zoom.doc
C-2100 Ultra Zoom.docbutest
 
MAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.docMAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.docbutest
 
Mac OS X Guide.doc
Mac OS X Guide.docMac OS X Guide.doc
Mac OS X Guide.docbutest
 
WEB DESIGN!
WEB DESIGN!WEB DESIGN!
WEB DESIGN!butest
 

More from butest (20)

EL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBEEL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBE
 
1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同
 
LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIAL
 
Timeline: The Life of Michael Jackson
Timeline: The Life of Michael JacksonTimeline: The Life of Michael Jackson
Timeline: The Life of Michael Jackson
 
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
 
LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIAL
 
Com 380, Summer II
Com 380, Summer IICom 380, Summer II
Com 380, Summer II
 
PPT
PPTPPT
PPT
 
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet JazzThe MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
 
MICHAEL JACKSON.doc
MICHAEL JACKSON.docMICHAEL JACKSON.doc
MICHAEL JACKSON.doc
 
Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1
 
Facebook
Facebook Facebook
Facebook
 
Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...
 
Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...
 
NEWS ANNOUNCEMENT
NEWS ANNOUNCEMENTNEWS ANNOUNCEMENT
NEWS ANNOUNCEMENT
 
C-2100 Ultra Zoom.doc
C-2100 Ultra Zoom.docC-2100 Ultra Zoom.doc
C-2100 Ultra Zoom.doc
 
MAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.docMAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.doc
 
Mac OS X Guide.doc
Mac OS X Guide.docMac OS X Guide.doc
Mac OS X Guide.doc
 
hier
hierhier
hier
 
WEB DESIGN!
WEB DESIGN!WEB DESIGN!
WEB DESIGN!
 

Web Site Design Checklist

  • 1. Web Site Design Checklist Required Reading: http://usability.gov/guidelines/ Content ___ Purpose: Why should someone visit my site? ___ Interest: What will interest a user to explore my site? to return to my site again? Content is the most important feature of a web site! http://www.501cweb.com/web-design-rules.htm http://www.enosis.com/resources/10drules.html User-Centered ___ Who is my intended audience? ___ Do I solicit feedback about my site? If content is the most important feature, then the user is the most important person! Navigation Is my navigation: ___ consistent? ___ intuitive? ___ obvious? ___ easy to locate? ___ Does every page have a link to my home page? ___ Does the home page or every page have my contact information? ___ Do I follow the 3-click rule: A user will lose interest if s/he doesn't find what s/he's looking for in 3 clicks. http://www.7nights.com/dkrprod/gwt_three.php Graphics ___ Do I use graphics sparingly? ___ Do I provide text alternatives to graphical links? Colors ___ Is there high contrast between background and foreground? Fonts ___ Are the typefaces easy to read? ___ Are the font sizes neither too large nor too small? White Space ___ Is there sufficient white space, but not too much? ___ Are there any white space trapped between elements? http://graphicdesign.about.com/library/weekly/aa030900a.htm 1
  • 2. Layout Is my layout: ___ consistent throughout the site? ___ simple? ___ easy to read? ___ Do I prevent horizontal scrolling? ___ Do I limit vertical scrolling to about 3 screens? ___ If a page scrolls vertically, does it have anchors in both directions? ___ Do I make maximum use of the upper-left corner of a page? ___ When the user views the top of a page, do I draw the eye to the middle of the page? ___ Do I follow the 7-item rule: A person can process a limit of about 7 items of information at once. http://www.well.com/user/smalin/miller.html ___ Is every page organized by level of importance, with the most important elements at the top? ___ Do visual elements (font, size, color, position) indicate the level of importance? ___ Are the elements on a page balanced: symmetrical, asymmetrical, radial? http://graphicdesign.about.com/library/weekly/aa021000a.htm ___ Is there sufficient contrast: size, color, value, fonts, emphasis, shape, texture http://graphicdesign.about.com/library/weekly/aa012700a.htm Loading Time ___ Are my image files small? ___ Do all the images have the width and height attributes? Accessibility ___ Do all images have the alt attribute? ___ Do I provide text-based alternatives to plug-ins? Accuracy ___ Do images load? ___ Do links work? ___ Is the text free of spelling mistakes? Compatibility ___ Does my web site load properly on a variety of browsers? Note: This is not required for CS105. Additional References http://graphicdesign.about.com/cs/designbasics/a/webrules.htm http://www.grantasticdesigns.com/5rules.html http://www.501cweb.com/web-design-rules.htm http://www.intuitive.com/articles/design-guide.html http://graphicdesign.about.com/cs/webdesigntips/a/webchecklist.htm http://www.useit.com/alertbox/20020512.html http://www.pantos.org/atw/ http://webstyleguide.com/ 2