Product Design Lessons
Creative Direction | Lesson #31
Creating a Killer Style Guide
Get five tips to creating a document that unifies a product’s design, even after launch.
1. Include enough to build out a site, more or less
It's a set of guidelines and coded UI patterns that, in context of template pages, exemplify the site. Your style guide should have enough components to build a page from scratch — within reason. While accounting for every possible scenario is difficult at best, having many pre-built components, written in HTML and CSS, on hand helps keep a product consistent.
2. Include code samples
To facilitate consistency and — let's be honest — avoiding extra work, we recommend adding actual code samples to the style guide. One sample per item in the guide, including HTML and CSS, will let designers copy/paste approved components with ease.
3. Start your guide after you have a fully-coded content page
Designs change over the course of development, so constantly updating your guide is extra work. We recommend writing the style guide after your team and your client have given final approval of the site's look and function. In fact, we base our style guides on a content page to give clients a complete — and accurate — point from which to start.
4. Write for someone completely unfamiliar with the website
Assuming that you've covered every aspect of your site's design is easy. Too easy. We've found that people familiar with a design can miss the obvious. Be careful to copy code samples from every part of many pages throughout the site (see the boilerplate below for examples).
5. Organize your guide
To help with that, we've designed a boilerplate/checklist of items to include in most style guides. Each project may need its own unique parts, but in general you'll need:
- Code Structure
Follow this boilerplate to get started building a thorough, helpful style guide.
About the instructor
Ben Gremillion is a Design Writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He facilitates the ZURB training courses.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.