Design Checklist

The following checklist serves to summarize the major points and to help you ensure you’ve done all you should before finalizing any web site you are creating.

This article edited on July 28, 2009. Now as you can see below, I wrote down all necessary elements together as you need in web design. Thank you for your reading.

Use this navigation and jump directly to content :

{Usability} {Visual Design} {Accessibility} {Overall Site Analysis} {Content Analysis} {Site Architecture Analysis} {Navigation Principles} {Text Links} {Navigational Images} {Menus} {Frames} {Local Search} {Other Navigation} {File Size and Resolution} {Building Blocks of Page Layout} {Visual Harmony} {Positioning Page Elements} {Story Boarding} {Web Typography}

Usability—Did You:

  1. Keep in mind browser inconsistencies, and test against your target browsers?

  2. Try to use HTML for structural identification and CSS for visual formatting?

  3. Consider the usability guidelines of self-evidence, speed, feedback, and accuracy?

  4. Aim to satisfy the usability factors that make a site functional as well as create a visual design that makes a site memorable?

Visual Design—Did You:

  1. Create a site that is aesthetically appealing, a unique experience, and evocative?

  2. Make sure the web site has a coherent visual identity that supports the branding of the product or organization?

  3. Consider using an organizing metaphor?

  4. Simplify whenever appropriate?

  5. Apply restraint in using gratuitous features?

  6. Analyze competing sites?

  7. Keep in mind that design isn’t “art for art’s sake,” but instead must solve a user’s problems?

  8. Choose an appropriate and appealing color scheme for your identified audience, providing the mood and ambiance that you intended? Be sure to consider factors such as age, gender, and culture.

  9. Provide sufficient contrast in color and value between foreground and background such that text and all links (static, on mouseover, visited, and active) are clear and easy to read?

  10. Choose background color and separator neutrals (or lack thereof) that interact appealingly, to show off colors to best effect?

  11. Choose prominent colors for the elements on the page that you want visitors to notice fi rst, while using more subdued colors for the elements of lesser importance?

  12. Test the page at different gammas and at both 24-bit and 256-bit color depths?

  13. Test the page on different systems just to make sure the colors are still legible, even if they look very different?

  14. Limit yourself to the web-safe palette, particularly in large areas of solid color, if a sufficient number of your viewers have older computers?

  15. Specify hex codes for colors, rather than ambiguous color names?

  16. Create an appropriate color scheme with a limited number of colors, re-use each of the colors in several places, and use the colors consistently throughout the site?

  17. Test the page for printing on a black and white printer or provide a printer friendly version of the page?

  18. Design your page so that it is appropriate for re-purposing, if that’s necessary?

  19. Test your site for accessibility by viewing in a grayscale format?

Accessibility—Did You:

  1. Provide identical content for people with impairments whenever possible, or equivalent content in a different format when not?

  2. Consider visual, aural, and physical impairments?

  3. Design the site to accommodate adaptive technology?

  4. Provide choice and adaptability in methods of use?

  5. Provide alternative access to images, animation, audio, or video that carry information content?

  6. Separate structure from format?

  7. Ensure that pages are still usable when scripts, applets, or other programmatic objects are turned off?

  8. Clearly identify the language of the page in the <html> tag?

  9. If, after best efforts, you could not create an accessible page, provide a link to an alternative page that is accessible?

  10. Use style sheets but also design the document so that it also makes sense without them?

  11. For data tables, use title, caption, summary, headers, id, and abbr attributes as well as structural markup?

  12. Avoid nested tables?

  13. Try to structure both data and layout tables so that they make sense when read left to right, top to bottom? If that is impossible, provide an alternative but equivalent page?

  14. Convey page structure with structural markup tags?

  15. For ordered lists, use a numbering scheme that conveys the level of each list item?

  16. Use style sheets to change a list’s bullet style or bullet image, if needed?

Overall Site Analysis—Did you:

  1. Perform analysis to determine exactly what is needed before you started building anything?

  2. Determine primary and secondary site goals?

  3. Identify primary and secondary target audiences?

  4. Identify the tasks the target audience will want to perform?

  5. Identify time and budget constraints?

Content Analysis—Did you:

  1. Make sure that every bit of content on the site supports the goals of the site?

  2. Provide all of the information the visitor needs to choose your products and services over those of another web site?

  3. Distinguish one product or service from another, thereby facilitating the visitor’s decision-making process?

  4. Demonstrate the value of your site to the customer as soon as possible, possibly by including a descriptive, one-sentence-or-less tag line?

  5. Include humor only with great care?

  6. Include the “who,” “what,” “when,” “where,” “why,” and “how,” as appropriate?

  7. Avoid using a visitor counter?

  8. Avoid welcoming visitors to your site?

  9. Explicitly indicate dates on time-sensitive content?

  10. Consider archiving, rather than deleting, old content?

  11. Include photos and biographies, if appropriate?

Site Architecture Analysis—Did you:

  1. Devise strong and logical categorization, labels, and underlying structure for the site, based upon the way visitors will view the information?

  2. Extract meaningful labels from content, competitors’ sites, and online thesauri, and/or check server logs?

  3. Consider alternate labels including synonyms, abbreviations, acronyms, alternative spellings and misspellings, and associated terms?

  4. Determine preferred labels?

  5. Be careful with overly clever labels?

  6. Test labels with users?

  7. Save rejected labels for later use as synonyms in search functions, the site index, and HTML <meta> tag keywords?

  8. Devise a logical structure for directories and files on the server?

  9. Standardize file naming conventions, based on function rather than visual characteristics?

  10. Employ relative addressing to reference files within the site?

Navigation Principles—Did you:

  1. Employ navigation to provide a conceptual map of the site?

  2. Provide feedback as to the current location?

  3. Remind the visitor how he or she navigated to the current location?

  4. Help the visitor find what he or she wants?

  5. Make the visitor aware of other offerings on the site?

  6. Provide site and page identification, contact information, a link to the home page, and global navigation on every page?

  7. Display local navigation, a search function, and site-wide utilities on appropriate pages?

  8. Avoid changing window size or deleting chrome if opening a new window?

  9. Adhere to the principles of navigation:

    1. Make navigation simple, visible, and consistent?

    2. Take advantage of what visitors already know?

    3. Orient visitors with “You Are Here” signs?

    4. Avoid requiring any extra effort from the visitor?

    5. Provide multiple ways to access information?

    6. Provide for visitors with varied skill levels?

    7. Provide feedback?

    8. Construct the site to be flexible and expandable?

Text Links—Did you:

  1. Use text links (as opposed to graphic navigation) whenever possible?

  2. Design appropriate text link affordances so that users are always clear as to what is and is not a link?

  3. Avoid underlining text that isn’t a link?

  4. Display link states (available/at rest, available/rollover, active, visited, and current) by using affordances that visitors will recognize?

  5. Choose text link wording to be concise, precise, and descriptive, usually based on the terms discovered during the discovery process for labeling site architecture?

  6. Avoid saying always “Click here”?

  7. Use the <title> tag to provide a longer description of the text link?

  8. Disable the current link?

Navigational Images—Did you:

  1. Use navigational images only when their impact enhances the site enough to make the download hit and the increased maintenance worthwhile?

  2. Design appropriate navigational graphic affordances so that users are always clear as to what is and is not a link?

  3. Avoid using these affordances on non-navigational images?

  4. Specify the alt attribute for every navigational image?

  5. Use rollover effects appropriately?

  6. Clarify non-standard icons with a text description?

  7. Employ image maps and sliced images with hotspots appropriately?

  8. Disable the current link?

Menus—Did you:

  1. Locate menus consistently from page to page, with each menu structured identically?

  2. Cluster links that are somehow related?

  3. Identify menus visually?

  4. Consider using bulleted lists (both custom and manual) to structure text menus?

  5. Choose drop-down menus, sequential menus, and drill-down pages appropriately?

Frames—Did you:

  1. Avoid using frames unless there is some overwhelming justification to do so?

  2. Set navigational frames to an exact pixel count wide?

  3. Avoid turning off frame scrolling?

  4. Turn off frame borders?

  5. Include backup navigation on content pages?

  6. Consider including <no frames> for visitors who don’t have frames enabled in their browsers?

Local Search—Did you:

  1. Include a local search function if users expect it, if the site has highly dynamic content, or if the site is large, complex, or fragmented?

  2. Expand preferred terms to include synonyms and even misspellings?

  3. Make the main search interface as simple as possible, while offering advanced search for the visitors who need it?

  4. On the SERP, display the search terms, the domain that was searched, and the number of matching pages found?

  5. Display relevant information about the destination pages, sorted appropriately?

  6. Offer the visitor a chance to refine the search criteria?

Other Navigation—Did you:

  1. Include embedded links, teasers, site maps, directories, breadcrumbs, keyboard shortcuts, and splash pages when they would enhance the visitor’s experience?

  2. Create a favicon?

  3. Make absolutely certain your site contains no broken links?

  4. Consider creating a custom 404 “page not found” document?

File Size and Resolution—Did you:

  1. Limit file sizes appropriately?

  2. Take into consideration browser inconsistencies?

  3. Pull most of the CSS and JavaScript out into external files that are reused throughout the site?

  4. Reuse graphics, audio, and video from page to page?

  5. Avoid gratuitous graphics, animation, and sound?

  6. Use smaller images rather than larger ones whenever possible?

  7. Minimize the number of unique navigation buttons?

  8. Determine an appropriate page size, in pixels?

  9. Avoid horizontal scrolling?

  10. Provide a “print page” option, when appropriate?

Building Blocks of Page Layout—Did you:

  1. Choose between frames, Flash, tables, and <div>s appropriately, when laying out the page?

  2. Choose appropriately between solid and liquid layout, and then control them properly?

  3. Make use of line (rules, borders, outlines, invisible grids) to organize your space, separating or connecting portions of your page?

  4. Select an appropriate type of line for the mood you want to convey?

  5. Choose appropriate shapes to add interest, movement, division, and connection to your page?

  6. Employ shapes (graphics, multiple column layouts, etc.) to break up overwhelming blocks of text?

  7. Squint at the page to see if the arrangement of shapes is pleasing?

  8. Apply color as an organizer for the page?

Visual Harmony—Did you:

  1. Provide continuity of mood, color scheme, layout, navigation, and graphics throughout all of the pages in the site in order to promote visual harmony, the balance between serenity and stimulation?

  2. Limit the number of elements on the page?

  3. Repeat elements for visual consistency?

  4. Align elements within an underlying grid?

  5. Employ visual adhesive (headings, bulleted and numbered lists, indentation, spacing, proximity, similarity and difference in style, horizontal and vertical rules, background colors, borders, sidebars, and <fieldset>) to chunk related information?

  6. Use line, shape, size, color, texture, typography, style, focus, space, and direction to manipulate contrast, thereby creating a visual hierarchy?

  7. Avoid creating so much contrast that you lose track of focal points?

  8. Provide enough white space to give respite from a sense of visual clutter?

  9. Choose an appropriate balance for the mood you want to portray, such as symmetrical balance for a calming mood, asymmetrical for interest, or unbalanced for tension?

  10. Avoid using the center of the page as the composition center?

  11. When creating rectangular shapes, consider following the proportions of the golden-mean (golden-ratio) rectangle (1 to 1.6)?

  12. Break up a “rectangles only” layout with rounded or blurred edges, graphics that cross the implied grid, masked backgrounds on photographs, graphics with irregular shapes, text snaked around graphics, varied leading, headlines, pull quotes, decorative caps, drop caps, and pop-up windows?

Positioning Page Elements—Did you:

  1. Provide obvious navigation on every page, usually on the top or left side?

  2. Position the most important information above the fold?

  3. Include the logo and company identifi cation, page identifi cation or title, main navigation (including a link to the home page), local navigation (if used) and a standard footer (if used) on every page?

  4. Make sure that the home page serves as an appealing “table of contents” for the entire site?

  5. Include only important elements on the home page?

Story Boarding—Did you:

  1. First create a grayscale wireframe of the page, in order to evaluate the layout without the distractions of content, color, and images?

  2. Create a color comp of the page, using either an image-editing program or HTML?

  3. Use a template to create an appropriate, standardized layout for the site?

Web Typography—Did you:

  1. Use a non-decorative, screen-optimized typeface at a legible size for body copy?

  2. Use looser leading appropriately for longer lines of text, for emphasis, or to lighten the density of the page?

  3. Use wider letter and word spacing for emphasis?

  4. Set body copy as justified left, ragged right?

  5. Employ contrasting elements like different typefaces, size, weight, color, form, structure, bold, italic, reversing the type and background colors, all caps, texture, direction, rhythm, spacing, and embellishment to emphasize special areas of type?

  6. Use restraint on those elements just listed?

  7. Make use of CSS to set special capitalization rules (all uppercase, all lowercase, title case) automatically?

  8. Avoid using all caps in body text?

  9. Apply underlining only for links?

  10. Test the site in grayscale to make sure that foreground text contrasts sufficiently in value with background text?

  11. If using light text on a dark background, consider making the text bolder or choosing a typeface with inherently thicker strokes?

  12. Avoid strikethrough like this unless you are attempting to display edited versions of documents?

  13. Consider using CSS to style the first-letter or first-line of text for decorative effect?

  14. Chunk content with headers, small paragraphs, bulleted lists, sidebars, indenting an entire a paragraph of text, or pull quotes?

  15. Limit line length to 350–550 pixels by splitting wide pages into two or more columns?

  16. Increase leading to improve readability on longer lines of text and to lighten the overall “color” of a page?

  17. Increase spacing between letters or words for emphasis?

  18. Use either an indent at the beginning of a paragraph, or double spacing between paragraphs, but not both?

  19. Avoid indenting the first paragraph following a header?

  20. Use double spacing before headings but single spacing between the heading and the content it introduces?

  21. Check spelling, grammar, and sentence structure?

  22. Limit the use of exclamation points?

  23. Specify proper typographic characters, including en dash, em dash, curly quotes, true ellipse, and upper and lowercase numerals?

  24. Make use of graphic text only when absolutely necessary, to avoid excessive download times? (for graphic text)

  25. Choose appropriate embellishment, anti-aliasing, and kerning? (for graphic text)

  26. For very small text, use typefaces designed for a specific size and turn off anti-aliasing? (for graphic text)

Share Below

If you have already different checklist or want to add more questions, you can share below.

There have been 15 comments | Subscribe to Comments | Jump to Form »

Grace

What a great post Mert, thank you for this.

1

Mike

All together and nice understanding. Great job.

2

Cyclop

Nice post really.

3

Craig Baldwin

Brilliant simple check list, thanks for the post.

4

Jim Wilson

Good ideas and checklist. It would be great if you could define some solutions/techniques/definitions for items such as “How to separate structure from format” and “What is an ‘organizing metaphor’?”

5

Mert TOL

@ Jim Wilson :

Good ideas and checklist. It would be great if you could define some solutions/techniques/definitions for items such as “How to separate structure from format” and “What is an ‘organizing metaphor’?”

Thank you Jim. I’m honored. I’ll try to quick explain your questions.

We can employ metaphor in a more global way as well, for the site as a whole. If you can identify an organizing metaphor that lends itself well to a visual interpretation, the entire design task becomes easier. For instance, a hotel’s home page might look like the lobby of a hotel, complete with a check-in desk, the entrance to a restaurant, and a concierge desk.

Each of these elements could be click-able, leading to reservations, a restaurant menu, and local attractions, respectively. The benefit to visitors is that common metaphors can convey immediate understanding. To be effective, though, a metaphor needs to be appropriate both conceptually and visually.

And How To Separate Structure From Format?

For instance, use HTML to identify structural elements such as headers, using standard header tags (<h1>, <h2>, and so on).

Move content formatting to CSS, where it can be overridden by visitors. Format a document so that it’s still legible (though not necessarily as visually appealing) even if the style sheet is disabled.

I hope these are helps you. If you have any questions more you can ask me. Thank you again.

6

Gino

The “Did You – Checklist” approach makes it seem like “design” (taken here for usability, visuals and accessibility bullets) is somewhat of a consequence.

I feel there is a lot missing. Things like the user-centered design of content and behavior (covered by disciplines such as information architecture and interaction design).

And of course, the most missed here: user research.

I think the post is a great initiative, and there is a lot of space to make it unbelievably excellent, if they don’t underestimate the deadly importance of understanding the users.

7

T. John

Awesome checklist. Thank you.

8

Maria

Everybody should bookmark this awesome checklist and must look before finalize or begin any web project. Amazing post! Thank you very much.

9

James

Under “Visual Design” what is “o” all about? Whenever I want black I always write black, so that it is immediately obvious – it is always a pain remembering whether #000 is black or if it is #FFF so I don’t understand why you call that ambiguous?

And any designer that gets to the end of a project and then realises that they forgot item “a” needs to be shot.

10

Catherine

Cool article…

Do you find it’s easy getting people to use the checklist?

11

Mert TOL

@ James :

Under “Visual Design” what is “o” all about? Whenever I want black I always write black, so that it is immediately obvious – it is always a pain remembering whether #000 is black or if it is #FFF so I don’t understand why you call that ambiguous?

Hello James,

Of course, you could prefer to say “color:black” in your CSS. You’d think that something as straightforward as “black” should always translate to #000000, but unfortunately, that isn’t necessarily true.

For instance, the color name “brown” translates to #A52A2A in Navigator 7.2 and to #993333 in Internet Explorer 6. Although newer versions of Internet Explorer and Firefox are more consistent with each other, it’s still safer to use hex codes, not names.

And please look at this article, I already mentioned this in there.

@ Catherine :

Do you find it’s easy getting people to use the checklist?

I hope Catherine, I hope :) Thank you for your comment.

12

Marun

Great checklist – Worthwhile to save as a PDF and printout. For accessibility and other validations you could use this.

13

Gary

Wonderful stuff.

One of the many reasons I love the web is because I can stumble across sites like this and be blown away by the dedication of others.

Great list, Mert – very much appreciated. Consider yourself Bookmarked!

14

Kathryn

@ James :

The trick I use for remembering that #000000 is black and #FFFFFF is white comes from elementary school science. Black is the absence of all color, so it is six zeros. White is the presence of all color, so it is six Fs, the highest value on the hex scale.

@ Mert :

Thank you for your lists. They help organize my projects.

15

Post Comment on This Article

Your e-mail address won't be published. If you simply add some value to the original post and stay on the topic, your comment will be approved.

You can use Textile parameters on your comments. For example: _italic_ *bold* bq. quated text "link text":URL — Get your own picture next to your comment with a Gravatar account.

SEARCH

TWITTER

RECENT COMMENTS