24 November 2015
What Is a Living Style Guide?
A living style guide is a reference for a team of designers and developers to understand how an application will look and feel. It is used to convey design language, define design rationale, and explain how to use markup. A living style guide creates shared understanding among all team members and is a place for the whole team to reference how something should look and feel.
Living style guides should change and adapt to new needs and challenges that arise during the life of a project. Nothing should be written in stone, and they should consistently be refined and revised.
Why use style guides?
With style guides, both the development and design teams can move at a faster pace. It allows a developer to quickly build a feature that inherits the already established design of the app.
Similarly, it allows a designer to adapt existing patterns to a new problem. That way, the designer is never starting completely from scratch when solving challenges. Style guides also help designers translate existing brand guidelines to the world of the web.
From a technical standpoint, living style guides help to avoid duplicated CSS. Avoiding duplicate CSS is the designer version of don’t repeat yourself.
As a deliverable, a living style guide acts as a personalized bootstrap that another team of developers and designers can pick up, work with, and build upon.
How we use style guides
We begin all new projects with a style guide. Starting with basics like colors and typography, we build style guides from the inside out. From there, we’ll design buttons, links, lists. Then, modules, widgets, grids, and other patterns will be designed and defined.
This inside out approach allows us to understand and predict how changes to basic elements will ripple out to more complex patterns.
When does a design element become a pattern? Sometimes, design elements are too specific to add to the style guide. Throughout the course of a project, our general rule of thumb is that when an element is used three times, it is added to the style guide as a pattern.
Best practices for living style guides
Style guides should be updated often. The guide should be readable and useful. There should be design rationale for elements of the style guide, so that developers and other designers know why decisions in the style guide were made.
There should be example markup so that there is consistency throughout the project with how things are structured. CSS conventions like BEM or SMACSS promote consistency while mirroring the reusability concept of of the style guide. CSS frameworks can also be a good starting point. They provide a grid and an inventory of elements and typical patterns used in web apps.
Final thoughts
Living style guides may seem like a lot of extra work, especially up front. However, they will provide consistency with a project, act as a means of shared understanding for design decisions, and allow future features to be designed and developed more quickly. Those cumulative effects should make it clear why creating and using a living style guide is always a good thing for a project.
Kenny Glenn and Chris Moore also contributed to this post.
