Creating a Living Style Guide

This article is about creating living style guides. In it, we will discuss what they are, why they are an important step in the web design process, and a few tips on what they should include. Please feel free to leave your own suggestions and tips, or any questions you may have about style guides in the comment section below. Let’s begin!

What is a “Living Style Guide”?

In short, a living style guide is an ever-growing document that defines each of the various elements that make up your website. As your website changes over time, so should your style guide. This collection of pre-designed elements — color scheme, typography (fonts), logo and other images, code snippets, general guidelines, etc. — should be followed by every member of the team to ensure that each piece of the website is consistent, creating a cohesive user experience. Aside from consolidating all the individual design elements, it creates general design principles that determine the overall direction of the website, and it lays out the visual language the designers and developers will use to create the site.

Why is it important?

Creating a style guide is a very important step in the web design process. It enables you to stay on task and helps to create a cohesive experience throughout the entire website. Communication is also made simpler with the aid of a style guide because it can be shared with your entire team, including business owners and administrators, to reference when discussing site modifications. This can help streamline the approval process for everyone involved, from decision makers to the design and development team.

A living style guide will assist you in numerous ways as your team grows and changes organically over time. To begin with, creating it will take up a little time, but it should balance out with faster build times for new web pages, as designers and developers who are new to the team will have a reference to go back to for details on the precise styles that are to be used. Additionally, using the guide as an inventory of code enables designers and developers to easily see if new designs will fit with the established standards. If not, they can decide as a team whether to expand the codebase or if there is existing code that can be easily modified. Without a guide, it is impossible to do this, often making it necessary to write new styles, which will eventually result in a bloated CSS file. The codebase can be kept smaller when design consistency is maintained.

Finally, the language of the various classes already established in the guide can be quickly referenced and used when implementing changes. This leaves little to no confusion for designers and developers as they advance through revisions. It also provides the whole team with a common vocabulary to use when discussing the designs after they have been coded.

What should a style guide consist of?

Creating a style guide can seem a little daunting. After all, it is a collection of all the different design elements of your website. Try not to get overwhelmed, though, and just take it one step at a time. There is no exact formula you must follow to create a useful style guide; however, there are some imperative aspects that should be included to ensure its effectiveness and usability. Here are a few quick tips to help you get started:

  • Layout – Since your layout is likely to change during the design process, creating this section will help you define its general elements.
  • Navigation – Write the code for everything that will be used for navigation and interaction throughout your website (i.e. links, buttons, menus, etc.)
  • Typography – This section documents your font choices to set up type style. (You can always adjust font sizes later in the design process.)
  • Branding – Establish your company’s brand identity by outlining your website’s color scheme as well as imagery (i.e. logos, graphics, etc.)
  • Multimedia Content (i.e. videos, images, etc.) – Define specific proportions for videos, images, etc. in this section.
  • HTML – Use this section to define elements like copy, header and footer styles, etc., as it will contribute to site consistency.

Using a style guide lends many advantages to any project. They more than make up for the time it takes to create them in multiple ways throughout the life of the website, and they can be used by virtually every member of your team. In other words, style guides just make everybody’s lives easier!

By: Danielle Dandridge

Have your own tips on creating a style guide? Please leave them in the comments below!