Web Site Design Rubric (HTML/XHTML)
Rubrics are used by instructors as a guide for assessing student performance and evaluating the quality of student work. Rubrics include multiple objectives each with a range of quality levels (performance criteria). The instructor uses the rubric as a guide for assessing the student's knowledge of each objective.
Rubrics can also be used as a method of self evaluation. Because the project objectives and grading criteria is clearly stated students can assess their own progress on a project.
Rubrics can also be used for peer assessment. Students can ask their fellow students to evaluate their projects based on the rubric. Peer evaluations should provide constructive criticism, not attacks. This means that students will provide valuable feedback to other students regarding their designs. Students should give their initial perceptions and reactions, and their reasoning. Students who evaluate projects should be prepared to provide sound reasoning and suggestions for improvement if necessary. Evaluations should include the positive aspects of the project, as well as, any suggested improvements. Remember, comments should always be backed up with reasons. I think Oli Studholme has an excellent article in Bloblet about critiquing. The critiquing process should make the designer think differently about a design element. I would also recommend that everyone read The Delicate Art of (Web) Design Critique by Makiko Itoh.
The rubric that follows should be used for all web site projects. Additional objectives may be added depending on the project assigned.
Before you submit your project to your instructor, use the rubric below to evaluate your site. You should also ask two of your fellow students to evaluate your site using the rubric. After self and peer assessment, revise your site as needed. Submit your self and peer-evaluations to your instructor.
| Objectives | Select Quality Criteria that
Best Matches Project |
Score | ||
| Design | 2 points The page design is not entirely appropriate to the content or its intended audience |
3 points The page design is visually pleasing, although it may not be entirely appropriate to the content or its intended audience |
4 points The page design is visually pleasing, supports the page content, and is appropriate for its intended audience |
* |
| Images | 2 points Several images on the site have problems with either design or mechanical presentation |
3 points The images are well designed for the most part, although there may be some minor problems with either design or mechanical presentation |
4 points The images are well designed and mechanically effective, without distortion, excessive dithering, haloes or other negative graphic effects; images include Alt, Height, and Width attributes (may be in CSS) and offer initial thumbnail graphic if file size is large |
|
| Layout | 2 points The page layout is usable, but it has problems with clarity or placement of elements. |
3 points The sites layout is largely effective, although there may be some occasional problems with clarity or placement of elements |
4 points Pages use an effective and uncluttered layout, using background color to enhance the readability of text and the appearance of graphics; users with a 800 X 600 monitor don't have to scroll to the right |
|
| Text | 2 points Text on the site has a problem with either style or mechanics or both. |
3 points Text on the site is readable and reasonably well written, although there may be minor mechanical errors |
4 points Text on the site is well written and presented effectively, using readable fonts and text design and without major mechanical errors (grammar, punctuation, and spelling). |
|
| Navigation | 2 points A reader can get around the site, but only with some difficulty |
3 points The site is well organized and easy to navigate for the most part, with clear relationships between pages; however, some sections may be more difficult to find or there may be "dead end" pages |
4 points The site is well organized and easy to navigate; the relationship between pages is clear and it's easy to find an individual page; each page is clearly linked to another; links are appropriate, clearly labeled, and have a definite purpose; page titles are appropriate to content and have a definite purpose |
|
| Mechanics | 4 points The site includes missing pictures or broken links, but is readable by both the major browsers |
6 points Everything on the site works: there are no missing graphics or broken links; it can be read with Explorer (PC) and Safari and shows equally well on PC and Mac |
8 points Everything on the site works: there are no missing graphics or broken links; it can be read with Firefox, Explorer (PC) and Safari (Mac) and shows equally well on PC and Mac |
|
| Download Time | 2 points The site takes to long to download, pushing the limits of a user's patience |
3 points |
4 points The site download time is reasonable, and doesn't make extreme demands on the user's patience; multimedia elements load quickly or file size is indicated with option to download |
|
| HTML/XHTML/CSS | 4 points The XHTML/HTML code has several problems, including incorrect or unnecessary tags. Meta tags are not included. The site does not use CSS elements to control design, content and layout |
6 points The XHTML/HTML code is largely clean, although there may be a few questionable tags. Some pages validate as XHTML compliant. The site uses some CSS elements to control portions of design, content and layout |
8 points The XHTML/HTML code is clean, without misused tags: tags are nested and complete, a minimum of tags are used (use one tag with several attributes instead of repeated tags), header tags are used as headers; all site names including folders, pages, images, frames use lower case text with no spaces, and meta tags are used. The site validates as XHTML transitional at the W3C.org. The consistently uses CSS elements to control design, content, and layout |
|
| Credibility | 2 points Site leaves user wondering about its origin and sources |
3 points Site includes author, contact person with e-mail address, date created or updated, and no copyright infringement |
4 points Author's name, affiliations, and credentials are included; contact person with e-mail address is present; site is bias-free or explicitly states point of view; material is original or includes appropriate citations with no copyright infringement; site includes date created or updated |
|
| Total Score | ||||
| Maximum Points Possible | 44 | |||
| Percent Accomplishment - Your score / 44 = Percent Accomplishment - Students must score 80% to be eligible for a certificate. | ||||
*Insert your quality score for each objective.
This rubric was originally found at the Landmark Project. It has been modified to meet the needs of the Contra Costa ROP's Web Page Design course for adults.
If you live in the San Francisco Bay Area and you're interested in learning more about web design and development, graphics, or computers in general, consider taking classes at the Contra Costa ROP Technology Center. We offer affordable computer training in a variety of subjects. Visit our web site for more information.
Stop by my Amazon Store for gifts for the web developer.
Visit Robin's Blog for more web design and development resources.
©Copyright 2001-2006 - Robin Wood - Send Questions or comments to robin at tinkertech dot net.
Last Updated:
April 24, 2007