Writing an Interface Style Guide

by Jina Bolton

42 Reader Comments

Back to the Article
  1. Gina, great article.
    Developing guidelines can be tricky and keeping them up to date can be challenging – any suggestions or examples on how to ensure the value of the document persists? Thanks.

    Copy & paste the code below to embed this comment.
  2. It’s a very interesting article. I’ve always felt frustrated too when my designs got messed up. Most of the time I think a style guide is necessary. I always include it in my proposals, but most of the time the clients decline it, even though I try to convince them about its importance. However, sometimes too I question it’s utility when developping it. I always feel myself a bit confused about how to do it, because the CSS is exactly that, isn’t it? I feel myself repeating something that’s already there, and wasting my time too :). Wouldn’t it be preferable to make a very well commented and written css instead? I mean, who’s the style guide for?  If it’s meant for developers, them I think they should take sometime to study and understand the CSS. Isn’t it?
    Anyway, I loved the idea of an online style guide like the blueprint html example.

    Copy & paste the code below to embed this comment.
  3. Great article Jina!

    I’m an art director & user interface/experience designer for web and I’m constantly trying to push the style guide forward. It’s so important to keep a website looking & behaving consistent in terms of the brand. Usually it’s the first thing to be dropped from our clients’ budget, as the style guide does take a wee bit of time to create.

    However, I’ve recently found that a short style guide can be just a useful. As long as you sum up all of the key components and visuals you’ve listed, it can be helpful. The person/team responsible for maintaining the website would much rather flick through a concise guide, rather than having to sift through a 20 inch thick bible! That’s what I’ve found anyway.

    Thanks for the great article!

    Stu.

    Copy & paste the code below to embed this comment.
  4. I think creating too much of a process for anything eventually leads to paralysis from analysis.

    Copy & paste the code below to embed this comment.
  5. Here are a few screen shots from a very large and comprehensive visual design style guide that I lead while working on the redesign of the AARP Bulletin (http://bulletin.aarp.org) at Behavior Design.

    Yes, clients seem to ignore these very often, but that’s their choice. I find it more useful to use style guides as an internal tool to use to lock down the design language before moving an interface design project into multiple page production. This better allows you to stick to one style and maximize effort and budget.

    http://tinyurl.com/66yu7f

    Copy & paste the code below to embed this comment.
  6. Thanks good articls..

    Copy & paste the code below to embed this comment.
  7. My expirience is that when you deal with customers, as an webdesigner, its good to tell and show them a design guide. it is more comfortable to realise project with them together without having a crappy layout because of the customer ideas and changes they want.

    Copy & paste the code below to embed this comment.
  8. Every one thinks they can control the circumstances ‘if we would just… (fill in the blank).’

    History has taught us that optional guidelines are rarely followed. Rules must have a notable reward and a dire consequence. That way you appeal to both personality types; those that avoid pain and those that pursue pleasure.

    The caveat in all of this is that a good looking site is singular in perspective thus rendering the reward mute and… only the finest web designers appreciate really good design.

    In short, without sufficient motivation, manuals will not be read, guidelines will not be followed and the appearance of your masterpiece will eventually degrade.

    The only option is to eliminate the ability to alter the design or consign yourself to the idea that your control is temporary at best.

    But write that manual if it makes you feel as though you have more control.

    Copy & paste the code below to embed this comment.
  9. Thanks for alerting me to the fact that when I get more clients into CMS that they are going to need a style guide.

    Copy & paste the code below to embed this comment.
  10. Just caught this in a Lynda.com tutorial on how to design / build an online styleguide. Though the tutorial is rudimentary, the reference site is quite nice:

    http://www.monash.edu.au/staff/web/

    Copy & paste the code below to embed this comment.
  11. this video may help you and other to same purposes of writing CSS Guide

    http://www.lynda.com/home/DisplayCourse.aspx?lpk2=758

    thank you ..

    Copy & paste the code below to embed this comment.
  12. Copy & paste the code below to embed this comment.