What's a Living Style Guide?
A living style guide is a document of UI components used on your website/app. It's built with actual code and allows everyone from devs, designers, and clients to see the bigger picture.
Why would I want one?
Creating a style guide allows you to have a clear and consistent design language. Below are a few of the many reasons of why you need a style guide.
Speed up the design and build process. Meaningful design decisions can be made quickly, instead of waiting on feedback for X amount of pages. Designers can quickly try out ideas and see what works and what doesn't. This is crucial for creating a successful responsive site. Stakeholders can see the progress of a site and give feedback immediately on components.
It allows designers and developers to start contributing to projects immediately. This is especially helpful on big projects so people aren't stepping on each other's toes. Designers can start thinking in states vs page by page. Working with components also allows you to quickly see how responsive-friendly a component is—saving you time with QA testing.
No Code Bloat
There's reduced code duplication and a consistent coding style. Code is reusable and pages are easier to build by piecing together components like Lego's. Designing and creating components is more efficient than designing page by page.
Not everyone has Photoshop installed. A living style guide allows everyone to get involved and give feedback. PSD files can also get out of control quickly and only 1 person can edit at a time.
You can create a style guide manually or save even more time and have an auto-generated style guide. My personal favorite is Kalei Styleguide, because it has few dependencies and gives you a lot of control out of the box.
Awesome examples of Living Style Guides
- Codepen's Design Patterns
- Fontshop Styleguide
- Disqus' Brand & Style Guide
- Survey Monkey Design Patterns