Even the smallest, simplest web presence needs consistency. Consistency of design, sure. But also of language.
Consistency is reassuring. It shows control and care. And in an unpredictable place like the Wild Wild Web, it can be even more valuable than in other media.
Your style guide is your starting point for ensuring your online presence is consistent.
What is a style guide?
A style guide is a document that provides guidelines for the way your brand must be presented.
That might include visual styles—rules defining the way the brand will look—as well as language styles influencing the way the brand will sound or read. All the rules are intended to ensure the consistency of your presentation.
In some organisations, the style guide’s printed, kept in a ring binder, and laughingly referred to as the “brand bible”.
In others it’s a simple electronic document containing images of the logo, a brand vocabulary, and a reference to a popular style manual, like the Chicago Manual of Style, which is to be used in any cases the house style guide doesn’t cover.
What’s in a style guide?
The last style guide I put together for a digital client came to 20 pages, and contained these sections:
- Mission, vision, and value proposition
- Target audience description and persona
- Brand attributes
- Logo: colors, minimum size, clear space
- Service description and tagline
- Language styles: tone, spelling and punctuation, numbers, capitalization, lists
- Brand vocabulary
For a startup, this was a fairly detailed style guide, but larger, more established organizations working across more varied media often have much bigger style guides.
One corporate client I’m working with has a 139-page visual style guide and a 32-page editorial (or language) style guide. These guides cover every conceivable application of the brand—from physical display banners, reversed logos on transparent backgrounds, and print advertising look and feel, to how various publications are referenced within the organizaton’s writing.
For some organizations, more detail is better, but longer style guides can be overwhelming for many of the people who actually need to use them.
How can you develop a style guide for your brand?
I find the best way to start a style guide for writing is, well, to start writing.
For startups developing new products, styles that describe functionality usually start to be developed with the brand vocabulary, as part of the interface development process. They’re fleshed out more as you turn to writing system emails, and then marketing pages.
As your UX and visual teams design the product and pages, they and you will be making decisions about how things will look—preferred colors, fonts, locations, and so on. These will become your visual styles.
At the same time, your writer will be developing a voice for your brand, and hopefully using things like lists and punctuation and capitals consistently. These will become your language styles.
If you can get these professionals to take note of the rules they’re following as they develop the content, you’ll be developing the bones of your style guide as a natural part of your development and pre-launch processes.
If you’re doing it all yourself, make quick notes about each style as you go. Have a working document with sections set up for visual and language styles, and include any images you need to to show how things should appear.
Then, when it comes to writing your first media release, video script, or banner ad, you’ll have a document you can give your PR agency or creative team so that they can make sure whatever they develop is in line with your brand’s “style”. You might eventually develop styles for:
- formatting text for on-page display
- presenting content for certain purposes, such as in your help articles, or on your order tracking page
- landing pages
- email newsletters, print direct mail, and so on.
The styles you develop will depend entirely on what you do and who and how you target your audience. So I find an organic approach, like the one I’ve just explained, is usually best.
To me, it’s far better than looking at someone else’s style guide and thinking “Let’s do something like this for our business!” Some other brand’s style guide may well have details that aren’t relevant to your business. And undoubtedly, they’ll have omitted stuff you need to include.
This is particularly relevant when it comes to language styles. While it’s easy to rip someone else’s massive style guide and save yourself a truckload of work, you probably don’t need a massive set of styles in the first place. In my experience, the longer and more complicated a style guide is, the less it tends to be used. And those who must use it in their daily work only use the specific chunks that are relevant to them.
So it’s better to have a simple, straightforward style guide that covers what you need it to than to copy a behemoth of a style guide that no one can bear to crack open.
It’s also easier to maintain.
It’s done! Or is it?
Brand styles are always evolving.
While the brand agency might hit “Send” and settle back into their seats, satisfied they’ve done a good job developing a style guide for a client’s brand, the reality is that the people using that guide will undoubtedly find problems with it as they try to apply those styles in a multitude of previously unimagined situations and media.
Similarly, the small business or startup style guide really is a work in progress. See your first style guide as a starting point. As you find new opportunities to communicate with your audiences, you may well need to expand your style guide so that it covers the restrictions and potentialities of different media, channels, and messages.
But by slowing and continually evolving your styles, you’ll be able to maintain a clear sense of your brand among the public, and more specifically, within your audiences. Your loyal users don’t want to see your brand stagnate—they want to see it grow and change, as a living entity.
So be prepared to develop your styles as your brand develops. Add, remove, overwrite—but make sure you have the buy-in of the people who use those styles as much as possible. After all, they’re the ones working at the coalface of your brand’s continuity.
Do you have a style guide for your brand? Share your thoughts on using and developing style guides with us in the comments.
SitePoint WordPress Restaurant Theme
SitePoint WordPress Ecommerce Theme
SitePoint WordPress Portfolio Theme
User Interface Design with Sketch 4
Photoshop for Web Design
Introduction to Photoshop
Designing UX: Prototyping
Researching UX: Analytics
Designing UX: Forms
- 1 Introducing Portfolio WordPress Theme – and the Design Decisions Behind it
- 2 How Writing Our Book Taught Us About Killer Prototyping
- 3 How to Turn Your Sketch Files into Working Prototypes with Origami
- 4 Killer GIFs: How Can an Animated GIF Become a Weapon?
- 5 How to Handoff Designs with Sketch and InVision