The term “style guide” often gets tossed into website design conversations as an add-on or something that is optional. When you’re in the throes of a design it can seem like one more thing you have to think about, but don’t have time to focus on. The fact is, it’s an essential tool for your team that carries with it benefits that really kick in after the website has launched.  

What Is a Style Guide?

A style guide is a tool that helps your team communicate more effectively and efficiently; when communication is clear, productivity improves. Instead of spelling out every design decision, the style guide enables your teammates to reference the same graphic and content-focused guidelines. When you don’t have to delve into side conversations about when to use a radio button and when to use a checkbox, larger conversations about design can happen. Once you have a style guide, it’s much easier to scale. You have a foundation to make products in a modular way, if you choose. Your style guide will help you build whatever is next.

A style guide consists of styles, interactions, and user experience patterns and solutions that solve common and recurring design problems. Here is a sample of three sections that are typically included in a style guide:

Design Elements: This section describes stylistic choices that your team is committed to including typography, color palette, logos, and icons.

Patterns and Interactions: This section contains best practices for solving coming design problems and tensions, from alerts to error messages and tags to tables. Design elements can typically be applied to the content in this section.

Assets: This section contains other downloadable design resources, like PowerPoint templates and PDFs, that don’t fit into other sections of the guide.

Creating a Style Guide

Consider your team’s needs, preferences, and context to create a style guide that works for your organization. Here are some tips:

Lead with Language: While the three sections of the sample style guide—design elements, patterns and interactions, and assets—might seem simple, it can take many iterations to find clarity. It’s a good idea to go through examples of existing style guides to better understand how to organize relevant content and material. It’s important that everyone on your team know where to find the answer to their problem—no middleman required. Simply copying and pasting using other people’s information architecture and labels likely won’t work for you.

After pursuing other style guides for structural ideas, pause and think about your team. How does your team communicate? Do you have a shared language around design and development topics? Does any part of your process, whether agile or otherwise, need to be considered in the structure? Information architecture should be your first step, and don’t expect to get it right the first time.

You can also think about user testing your style guide, or particular sections, to confirm that your team is aligned with other departments. Would others be interested in editing or contributing? Is your guide easily accessible as judged by its copy?

Provide a Design Education: Design can appear confusing and complicated for those who haven’t studied it. Your style guide is an opportunity to show how a streamlined design system can create clarity and showcase just how far design decisions can reach. If you reframe the project as a way to educate about design, how would you approach change?

Integrate Other Design Related Resources: Has your team hashed out its own set of design or experience principles? Does your organization have writing guidelines or guidance on grammar? Where do you store your current assets—like photography and icons? Does everyone know where these files live? Think about other useful and existing resources to incorporate into your style guide.

Reduce, Reuse, Remix: As a user experience principle within your organization one might be, “reduce, reuse and remix.” It’s not always necessary to build from scratch, and if you can reuse code, design, or copy from existing places, then you should probably do so. Fortunately, there are existing pattern libraries in the federal government that take into account the general needs and challenges of designers in the public and private sectors and this can be a good starting place. The U.S. Web Design System, the USPTO UI Design Gallery, and the CFPB’s Design Manual all help designers follow patterns where it made sense, but allows them to get creative in solving design problems unique to our organization.

Taking time to create a style guide is critical to ensuring consistency in all forms on your website. By thinking of it as a strategic asset, you will be helping your team work smarter and creating a resource for your users that ultimately helps them get the information they need.

This article was reprinted from DigitalGov  – https://www.digitalgov.gov/2018/02/13/why-your-team-needs-its-own-style-guide-where-start/

A global team of digerati with offices in Washington, D.C. and Southern California, we provide digital strategy, digital marketing, web design, and creative for brands you know and nonprofits you love.

Stay up to date with our insights by following us on Twitter, Facebook, and LinkedIn.