Importance of a Style Guide for Web

The project is done, delivered and launched. Timelines were met, UI work was superb, designs look great, quality assurance and testing went smoothly. Happy client. Model project. Then you get that dreaded call two weeks later from someone on the other side who is wondering where their style guide document is. “It was in the proposal” they say. And yes, they are right, there it is, plain as day. No one realized it was missing and now you have to get it done!

A style guide serves many purposes. On one hand, it can be used in the early phases of a project to ensure common use of font, color, image style, etc. as a project goes through design revisions and reviews. During content entry or migration it can be a reference point to ensure standard treatment of content. During quality assurance, project managers and project stakeholders can refer to the style guide as they review content and images within the completed website. The client will take that same style guide in-house and months down the road when someone asks “what color and size are the font on the product page of our website?” the answer is readily accessible to them.

Now ask yourself how something so important could possibly get overlooked by everyone involved with the project? My theory is that nobody sees the value in this document until it is needed. As designers, we tend to keep all of that knowledge tucked away in our heads while we’re working. We don’t think to record it as we design it. However it is wrong to assume that anyone else can tell the HEX value of your brilliant blue H1 tag just by looking at it. Also, designers, it may seem odd to you, but most people can’t call out the name of twenty or so fonts just by glancing at a few letters. Crazy, I know.

A great way to avoid problems is to include the style guide as part of the design process – not as a later deliverable. Every time you add a new element to your design you should add it to the style guide. That way this key project document is built as a part of the project and not as an afterthought. It will be more comprehensive and much more effective – one more shining star in your otherwise perfect project!

Original article:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s