Advertisement

A Super-Quick Introduction to Style Guides

by
This post is part of a series called All About Style Guides.
How to Create Style Guides for a Specific Audience

This week the Tuts+Web Design team is bringing you an in depth series of pieces on the wide world of Style Guides and all the moving parts that go along with them.

The term "Style Guide" is very broad and can encompass several different areas, potentially covering everything from company branding, to interface design, to coding methodologies and more.

To get the ball rolling on our Style Guide week we're going to simplify things a little bit. Let's start with the most fundamental question: what is a Style Guide?

What is a “Style Guide”?

In a nutshell, a Style Guide is a set of standards that apply to the creation of text or design based assets for an organization, a publication, or a field.(1)  It is a comprehensive reference of DOs and DON'Ts which ensure content is produced in a consistent manner, in keeping with the goals of that organization, publication or field.

The types of assets Style Guides can relate to vary widely, and outside of web design can cover everything from print material to apparel. However within the world of web design Style Guides are most commonly constructed to determine how we work with:

  • Website layouts and interface design
  • Text and image formatting
  • Company name and logo displays
  • Color palettes
  • Code creation

What Do Style Guides Define?

Every Style Guide is unique and you'll see different things defined in each one, however the content will generally fall into the following four categories.

Identity

Who is behind the content? Identity forms the basis of branding and can include:

  • Mission statement
  • Promise to customers / clients / users
  • Personality, voice and tone
Tone of Voice is very important to Macmillan Cancer Support

Branding & Design

Conveying the "identity" to the public through elements such as:

  • Color palette
  • Logo design
  • Typography
  • Overall style
  • Animation
Kickstarter's color palette

Interaction

How interfacing with people should occur via:

  • User interface experience
  • Principles that ensure user focused design
  • Visitor flow through sites
Part of the BBC's Global Experience Language

Formatting

Best practices concerning:

  • Code formatting and methodologies
  • Text / language and image formatting
  • Logo usage guidelines
Yep, we do it to

How are Style Guides Applied?

Some of the most common ways Style Guides are implemented include:

  • Style tiles
  • Pattern libraries
  • Wireframes
  • Mockups
  • Prototypes

Oftentimes these elements make their way into Style Guides for the sake of keeping things in one place, and sometimes the terms listed above are even used interchangeably with "Style Guide". However, while some crossover is generally considered acceptable, strictly speaking a Style Guide is all about defining rules and principles and their actual execution is a secondary stage.

There's More!

Stay tuned this week to learn how to create and execute your own Style Guides, to help you put out a clearly defined and consistent public face for both yourself and your clients!

Advertisement