skip to content

Style Guide make

Document the components that make up the website or application to ensure consistency of design and code.

view all methods

Tools

Why do it:

Style Guides are helpful for keeping design consistent and helping to get through a build quickly. If you do this at the beginning of the implementation process, you can then have a library of reusable design objects that will be helpful to build out your pages.

When to do it:

After you’ve got some visual design done, possibly you’ve done Style Tiles and you are moving on to some mockups. It’s helpful to have the guide be one of the first things you do after visual design is starting to formulate and feel good.

Who’s involved:

Designers and Front End Developers

Time estimate:

Large (8+ hours)

One way to do it:

  1. Take the visual designs and make an inventory of all the elements, looking for repeated things such as buttons, type sizing, and components (or modules) that you reuse.

  2. Decide on how you want to create your guide. We favor creating a process that is custom to the team that is working on the project. This means that while there are a lot of ways to create systems, no two teams are probably going to do it exactly the same. You can use a tool or not, it’s up to the team (see styleguides.io for more information).

  3. Discuss your findings. Walk everyone through the visuals on a video call:. Do you all agree that the elements are the repeatable ones? You may want to do something like Charlotte Jackson’s article to make the inventory. Screenshot the designs and put them into a BoardThing and work on naming them together. This way you all move forward with the same vocabulary and the same ideas.

  4. The guide needs to get built out and put on a url somewhere that everyone can see it. If you are working on GitHub or a wiki, make sure that you indicate the link and how to add to the guide. Also, keep in mind that a guide never really is finished (this is why it’s often called a living style guide), you’ll iterate on it and change it as you iterate on the design of your site or application.

Examples:

Learn More: