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.
| 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.
Post Comment
About The Author
Dan Zambonini is the Technical Director of Box UK. He is the original architect of the Amaxus Content Management System, conceived clickdensity, has participated in industry-shaping think tanks, and has had articles featured in international websites and magazines. He is passionate about making use of the latest technologies in everyday life, and believes people and communities are key to innovation. For more, you can visit him on his personal website at danzambonini.com.
Comments
7 comments
Joshua Lewis said... 1st Jul 2009, 05:42
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... 1st Jul 2009, 14:12
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... 1st Jul 2009, 14:16
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... 6th Aug 2009, 05:02
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!
Auto Insurance for College Students said... 26th Aug 2009, 17:25
Needs more SEO related topics
Send gifts to Pakistan said... 24th Sep 2009, 15:50
Nice and informative article.
Richard said... 20th Jan 2010, 16:19
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.