Usability & Design

Featured Articles

Creating an Effective Style Guide
By Reshma Kumar
Published: February, 2005

A web style guide serves as a master style document for a web site. The purpose of a style guide is to create a living document of the individual style elements and design choices in a web site. The idea is that should someone else inherit a site you have designed or take over from you, that they should be able to easily pick up where you left off and edit the site having consulted the web style guide. A web developer or producer should be able to easily edit or scale out a site consistent with the look and feel of the existing site based on the style definitions set forth in the style guide.

The web style guide is subject to change and augmentation. As a site grows and matures, new content and design elements can and should be added to the site; thereby, potentially deeming an existing style guide obsolete or in need of modification on an as need basis.

Common elements defined in a style guide include:

• Typography - usually varying styles based on headers, subheads, body copy, breadcrumbs, footer, sidebar, etc.
  • Font sizes
  • Font colors
  • Font treatments - bolding, italicizing, anit-aliasing, kerning, etc.
• Hyperlink styles - treatments based on the various states (i.e. default, active, hover and visited states). Hyperlink styles can vary based on top level navigation, local navigation, breadcrumbs, footer, sidebar, etc.
• Navigation styles
• Image strategy - image styles (photographic, illustrative, etc.), type (gif, jpeg, png, etc.), size (min/max image sizes), dimensions (potentially dependent on placement).
• Color pallette
• Table styles
• Bullet styles
• Sidebar styles
• Multimedia usage - flash and animation use guidelines
• Design themes
• Homepage styles
• Specific page type styles (e.g. handling of FAQs, Search, etc.)
• Page dimensions, length
• Design grids
• Page layouts and templates
• Use of frames, accessibility, cross-platform and cross-browser issues
• Other general design considerations

A style guide forces you to think about all the details of your site. This can be a daunting task depending on the size and scope of your site but creating it simultaneously with your site can serve to ease the burden. So, as you create your masterpiece, don't forget the final piece of the puzzle....documenting your vision.

Return to "Featured Articles" index