Website Rubric


Designer has clearly approached this as if graduating this quarter. Student has taken measures to personalize and brand this site.


Site is not existing Muse or Wix template.(required for passing grade). Student has replaced all template elements with own strong design choices.

Type: Papyrus font has not been used. Comic Sans font has not been used. Typefaces which are default in appearance have been avoided: Times New Roman. The use of copperplate is justified.

Type is large enough to be legible. Where possible, text is selectable for searching purposes. Display (Heading, subhead) type choices are harmonious with body copy typerface.

Consistency (though not unchanging) in terms of:

Color, Texture, type choices, overall aesthetic tone
Navigation does not move from page to page at all, without good reason.


Graphics are related to the theme/purpose of the site, are thoughtfully cropped, are of high quality and enhance reader interest or understanding.


Image files have been sized to enable quick loading balanced with excellent image quality.  Images have been resized using Photoshop where necessary.


The site has a well-stated clear purpose and theme that is carried out throughout the site.
The site content clearly communicates what you do, who you do it for, and why your clients come to you.
Content is organized logically, using categories and sub categories as necessary.


The Web site has an exceptionally attractive and usable layout. It is easy to locate all important elements. White space, graphic elements and/or alignment are used effectively to organize material.

elements of a similar nature are located in the same location on each page

A background image or color has been chosen for pages

background treatment is aesthetically appropriate

background treatment is thematically appropriate for student’s field

A background image or color has been chosen for the browser window (1900 x 1400 px). If design calls for white, a low contrast texture is used.


Default navigation is not used: Navigation has been customized by designer.

Links for navigation are clearly labeled, consistently placed, allow the reader to easily move from a page to related pages (forward and back), and take the reader where s/he expects to go. A user does not become lost or forced to use the ‘back’ button on browser.

Placement: navigation does not move from page to page at all, without good reason. Care has been taken to remove any shift, even of one pixel, between pages.

Wayfinding: The navigation link for the current page is always disabled (a page does not link to itself). The navigation link for the current page is always graphically/visually  different from other links to communicate the user’s current location within the site.

User has made formatting choices for navigation link behavior: rollover, visited, etc.

Links are easily identified as links without having to hover over them.



Header is proper size. Not too large. Header contains student’s logo.

Student has designed their own logo

logo is a treatment of their name or initials

logo is a strong design

logo is present on all appropriate pages, probably in page header

logo integrates with the web page, color scheme, overall tone


The author has made an exceptional attempt to make the content of this Web site interesting to the people for whom it is intended.


resume is available to be read on a page of the site, not as direct link to a pdf version.

resume text is a size and typeface that is appropriate and legible.

On the resume page of the site, the resume text can be selected, copied and pasted into a search engine.

Resume is downloadable as a .pdf file

Resume .pdf file is a polite file size

Resume .pdf file is titled with designer’s name, so it can be identified by potential employer, client, easily passed on to colleagues.

Resume web page is hyperlinked to Linkedin Public Profile. Other pages (about) may connect to Linkedin Public Profile as well or instead.

encouraged: resume page includes links (and icons) to behance, coroflot or other appropriate professional sites.

Links to external sites (such as Linkedin Public Profile) open in a new window, not taking user away from your web site.

Contact Page:

Graphic/web design: your email address is available as selectable text.

Other programs, as appropriate: A suitable contact form has been utilized via html snippet, as shown in class.

Contact form functions properly, email is sent.

Form integrates with the rest of the website in color, text choice.

Favicon:  appears in browser address window or tab of browser window depending on browser. Care has been taken to crop icon meaningfully to communicate brand consistency.

Gallery Album:

Album/Gallery pages structure is logical, from general, intelligent categories to specific projects

student has not thrown all projects into one or two galleries/albums carelessly

All images have intelligent, informative captions.

The option of viewing a .pdf case study of a project or business proposal with Issuu or Scribd embedded viewer or other similar method is offered.

Issuu, Scribd, prezi, sketchfab HTML widget is scaled in such a way as to allow the user to click on the “fullscreen” option.


Site is live. Required to pass this course.

All links are live, all appropriate pages are interlinked, no broken links.

Navigation is clear and intuitive. Wayfinding indicators- contrasting elements applied to nav, or other effective methods- have been employed on all pages.

Spelling and Grammar:

There are no errors in spelling, punctuation or grammar in the final draft of the Web site.

Search Engine Optimization:

Student has used Muse/Wix SEO options as shown. Site description is coherant and effective. All pages have pertinent, effective keywords, metadata. Excellence: Images have pertinent, effective keywords.


Student has designed mobile version of site using Wix mobile interface. Content adapted/truncated as needed. The mobile version of website features consistent branding element(s) – color, background image.

Final Submission

Student meets with faculty during final class. Site URL functions proofed.
Muse users submit final root folder to Faculty Inbox containing native muse file, all related assets, locally published html folder of site.


Graphic Design Students


  • Review current standards of portfolio website display, these change stylistically year to year. Make your portfolio an echo of current display standards. If you want to go another direction be prepared to be deeply scrutinized by the committee…you had better have compelling logic to be outside the herd.

  • Think “Mobile First” when designing your online portfolio. Latest trends indicate  the decrease in desktop computing and the rapid rise of tablet and phablet sales. Design your responsive online presence accordingly.

  • All websites MUST contain correct spelling and standard American English rules of  grammar.
  • Your complete resume needs to be displayed in HTML format designed within your personal business cabinet. This identically styled cabinet includes business card, resume, website and other collateral. An .pdf download may be included.

  • All work must be accompanied by a short description, process and solution examples on the web page. An additional case study .pdf file for project may also be made available via download, or in some cases, issuu or google docs embed.
  • Printed work should be exhibited photographically. An additional case study .pdf file for project may also be made available.

  • Think carefully about your navigation. Typically, graduating students do not have a huge amount of work to show that is of a professional level. With your small amount of work do you need sub navigation?

  • Avoid mail forms. Use your email address for contact. If you must use a form, place it alongside your email address with visual dominance. It must be selectable HTML format text, not a .jpg. In this way users who dislike contact forms can email you using their own email client and have a record of doing so.

  • An ‘about’ page is usually not desirable. Personal lifestyle descriptions are not considered professional in most cases. Consult your instructor.

Leave a Reply

Your email address will not be published. Required fields are marked *