Web Design Checklist
Posted by Dan Zambonini on 30th Jun 2009
Design is an art; design is subjective.
Yet through our work with numerous designers and agencies, we notice similar design-related issues that emerge. Even though designers are often aware of these issues (“this is just a first iteration so I haven’t aligned everything yet”), these small snags can have a cumulatively larger negative influence on the viewer when assessing the aesthetic qualities of the design: it is difficult to rectify small design issues in your mind.
Although there are no hard-and-fast rules for good design, there are at least basic rules-of-thumb which designs can be checked against, lest their artistic qualities may be unfairly judged.
Updated 9 Jul '10, 12:01 Added link to Dutch translation.
Dutch Translation: Checklijst : lanceren van een website. (external link)
| Typography | |
| Type Families | |
| 2 (possibly 3) maximum (unless the concept, e.g. grunge, demands for a wider variety) | |
| Differentiation (e.g. Serif with Sans-Serif, Sans-Serif with Script) | |
| In-keeping with the theme of the design (e.g. not Comic Sans for a luxury brand) | |
| Type Hierarchy – clear hierarchy (Size, Weight, Family, Style, etc.) | |
| Correct Glyphs | |
| Quotation marks and apostrophes | |
| Hyphens and dashes | |
| Lesser used: lower case numerals, ligatures, arithmetic, etc. | |
| Micro-Typography | |
| Line-spacing | |
| Letter Spacing / Word Spacing | |
| Kerning – individual letters, e.g. in graphical headings | |
| Choice and formatting of capitalization (e.g. don ’t use all-caps for body text) | |
| Layout | |
| Alignment / Distribution | |
| Grid – align/distribute images and typography to the underlying grid | |
| Break the grid purposefully and clearly, if needed | |
| Check alignment and sizes optically, not just mathematically | |
| Proximity | |
| Negative space – use liberally to aid readability, guide focus | |
| Grouping – items positioned together should be related. | |
| Spacing – use the relevant spacing between items to create rhythm, tension | |
| Balance – balance the composition in the 2D space e.g. large light areas balancing small dark areas | |
| Precedence / Flow – guide the eye from the highest priority items to the lowest | |
| Aesthetic | |
| Concept / Unity – the design should speak with once voice/message | |
| Consistency – all elements should work together; use techniques such as repetition | |
| Colours – should be in keeping with the theme, from a limited purposefully-chosen palette | |
| Simplification – visual noise should be kept to a minimum (unless part of the concept) | |
| Subtlety / Variety – include enough subtlety and variety for visual interest | |
| On-Brand – follow the style/brand guidelines of the client, if applicable | |
| Content | |
| Consistency – writing style consistent with the concept, consistent capitalisation, etc. | |
| Context – text should make sense within it’s context (e.g. buttons in modal dialogues) | |
| Correctness – spelling and grammar | |
| Suitability – the writing style should be suitable for the audience | |
| Usability | |
| Fitts’ Law – the position and size of clickable targets should be chosen correctly | |
| Obviousness of Function – should be obvious what everything does, what can be interacted with | |
| Information Visualization – don’t clutter information and data, don’t mislead | |
| Contrast | |
| Quality | |
| Cross-browser | |
| Displays – test on different resolutions and monitors (e.g. colour temperatures/gammas) | |
| Font Replacements – if non-standard fonts are used, how will the page be rendered? | |
| Performance | |
| Quality of Images – not under or over optimised | |
What have we missed? Let us know in the comments below.
About The Author
We're hiring
Want to work with people like us?
Check out our vacancies.
9 comments
Joshua Lewis said on 1st Jul 2009
Very nice, I'll be adding this to my collection of resources.
I would consider adding sections for accessibility and progressive enhancement, possibly even for mobile browsers.
Examples: Does the site function at an acceptable level on older browsers? On screen readers? Without javascript? Without images? How does the color pallet interact with various forms of color blindness? etc.
Chris Cavallucci said on 1st Jul 2009
Dan,
I love checklists because they're simple and effective. I'd add another section called Findability which has all the meta-content related items, e.g. Page titles, descriptions, keywords, .ico files, microformats, etc. (All the stuff that bots consume.)
When designing digital experiences, I try to think about the timing of interactive elements on the page. So, perhaps, you may want to consider adding States and State Transitions to the list.
Chris Cavallucci said on 1st Jul 2009
Tip for the users Basecamp (http://basecamphq.com/):
use this checklist and create To-Do list templates.
http://www.basecamphq.com/help/todos#to_do_list_templates
frasi said on 6th Aug 2009
Wow. What a great resource. Sometimes I’m so keen on getting to the design that I forget to ask some key questions or take into consideration a few essential elements. Great post!
Richard said on 20th Jan 2010
Very useful, thanks. Although there's some irony in the 'Content' section:
'Context – text should make sense within it’s context' followed by 'Correctness – spelling and grammar';.
Its, not it's.
Austin web design said on 18th Aug 2010
This is great reference for designing a web site. It serves as a guide for first-time and professional web designers in making effective and user-friendly pages. A reliable check list such as this will pave away for more clients or visitors.
web designer manchester said on 7th Sep 2010
Hi. This is a valuable list. I am sure that some of these aspects need to be taken more into consideration than others. However, thanks for sharing :)
kevin mci said on 10th Feb 2011
do you have the checklist in a pdf ?
Thanks,
orersolibennyuI said on 28th Jan 2012
чем отличается юмор от сатиры?
триада видео
Post Comment