The Importance of Style Guides

Meg Davis  

September 03, 2013

Related Topics

I realize the title of this blog may have already put you to sleep, but for those of you still with me, you may be interested in hearing that those annoying style guides that you haven’t paid much attention to really are important.

A little background:

Style guides are nearly as old as publications themselves. For print publications, style guides were necessary to establish consistent usage of language and layout across several different contributors. As media formats have evolved and publishing now takes place across a plethora of platforms, the need for businesses to create and maintain style guides has dramatically increased. Style guides must now cover every channel, from print to web to social media. With interactive media channels, style guides help to define the experience and interactions that are consistent with a brand.

Why is a style guide important?

In a nutshell, a style guide helps to ensure a continuous brand experience. It means that no matter how, when or where a customer experiences a brand, they are experiencing the same underlying traits. It’s this consistency across every touch-point that helps build a brand and brand loyalty. And with 2.4 billion Internet users around the world (and growing), it’s really more critical than ever for businesses to establish a comprehensive style guide.

Let’s review a great example. BBC (British Broadcasting Corporation), the largest broadcaster in the world by number of employees, has developed GEL (Global Experience Language).

BBC describes GEL as “the glue that ties all BBC services together.” This style guide covers everything from basic design philosophies, details of interaction, and interactions on various types of interfaces. It combines the visual specification alongside the guidelines for when to use a certain interaction.

ss1

ss2

It provides the strategy behind the design principles and leaves designers and UX teams with great direction and little room to stray beyond core design principles.

As platforms are often developed from outside parties, style guides become the primary communication tool between hired production teams and clients.

Microsoft has developed a UX Guide to “establish a high quality and consistent UX and UI baseline for all Windows desktop apps.” This style guide is used as a reference for any Windows platform designer.

ss3

In this example, the style guide creates a consistent experience for the customer, as well as unified the brand across business units internally within the organization. The style guide document itself brings key players from across the business together, around the same table to contemplate the customer experience.

What should be included in a style guide for digital?

This all depends on who you ask. A publisher would include specific grammar rules, writing tips, and guidelines for voice. A graphic designer would include fonts, colors, and sizes. A brand strategist would include appropriate usage of the logo and tagline.

At Extractable, we believe all of these components are valuable. We also believe that a style guide does not just include specifications around content and visual design but also calls for guidelines and specifications around interactive elements and functionality. This is especially important in today’s highly interactive, highly customer-centric environments. This level of detail helps to lay the groundwork for what types of interactions should be chosen.

For example, links and buttons are both ways for the user to move around a system. Functionally, these two interactive devices can accomplish the same action. How do you know when to use a link versus when to use a button? Here we have recommended that clients use buttons for the primary call to action on a page and links for secondary calls to action.

In this guided flow, the “Next” action is displayed within a button, while the “Cancel” is displayed as a link. These rules may seem minor, but it is a series of small interactions that make up someone’s holistic digital experience with a product.

ss4

Many people believe that this level of documentation belongs in a technical specification document. But it’s more than just documenting a rule. It is about setting a consistent language for interaction aesthetic that can be extended as digital assets grow. Even after an engagement with a client is over, the style guide serves as a living document to help guide further digital growth efforts.

How is a style guide developed and maintained?

The evolved style guide is multidisciplinary. It means that the creative, content and UX teams work together to develop it. Some are simplistic, while some are highly complex with pages and pages of defined guidelines for a multitude of needs and platforms.

The style guide should be maintained by one group and distributed freely. The style guide should focus on standards but document exceptions to the extent possible. Also, a change log should always be kept attached to the style guide to help show how decisions evolved over time.

What do you do if you need an updated style guide?

Don’t panic! But consider creating a comprehensive style guide that will ensure a consistent customer experience across channels. Contemplate re-hauling any existing style guides by adding interaction pattern principles.

Some may think of a style guide as a low priority, but think about how much it shows when brands have put great thought and effort into creating a detailed style guide.

What brands do you think do a great job of consistency across platforms? Share your thoughts. I’ll bet they have a great style guide!

To see the full BBC Global Experience Language Document, visit http://www.bbc.co.uk/gel

To see the full Microsoft UX style guide, visit: http://msdn.microsoft.com/en-US/windows/desktop/aa511258