Creating a website style guide

A 1 minute read written by steve June 26, 2012

yle guide banner image

Good communication is the key to any successful web project, which is why a solid style guide is essential. It is the document that tells you how to tell your story. It establishes writing rules, voice, typographical treatment, visual elements and interaction decisions.

The key to both print and online style guides is content. Making that content clear and consistent, ensuring it sings with one voice, that is the aim of the style guide. It explains the why behind the decisions made and clearly demonstrates the design thinking that was employed.

Done well, a style guide should read like the autobiography of your website project, enabling others to understand, interact with and extend the site. It takes the knowledge and experience stored up about a project in one person (or a team) and lays it out in plain language for future use. A style guide tells the story of a design system, explains the design thinking, and enables other people on your team, or a future team, to take action.

The full story

Recently I had an article published in .NET Magazine that details out an approach to website style guides. Check it out and let me know your thoughts. Very soon I’ll be writing a follow-up on how to produce a responsive style guide.

Read the full style guide article