Let’s paint a scenario here. Say your website is growing rapidly both in its scope of content and in the number of people you need to bring onboard to maintain or even relaunch it. You’ve hired designers, developers, copywriters, social media managers—the whole shebang.
Each person comes and goes, contributing their piece to the overall grand scheme—yet the consistency of your brand has run amok. Some button links are blue; others are green. One subheading is 26px in size; another subheading is 24px. Your logo has too much padding around it on one page yet too little padding on another…
As the owner of your website you already have too much on your plate, so how can you possibly expect to keep the hundreds of design rules for your brand all locked up inside your head? How do you remember to tell a newly hired designer every single style rule that your previous designer already established? It’s likely that you just can’t.
That’s where a style guide comes in.
What’s a Style Guide and Why Does My Business Need One?
A style guide is a unified resource that defines a brand through consistent usage of design, tone, voice, and identity.
A good style guide will act as the ultimate reference for your brand. It’s a blueprint. It defines the rules of typography, colors, layout, logo usage, tone of voice, content guidelines, user experience, and pretty much all aspects of public interaction with your brand.
The concept of style guides (or brand bibles) is nothing new, although their application for websites is a more recent hot topic. Commonly found in the print world, every major newspaper retains a style guide in order to maintain formatting consistency.
For large corporations, where a brand’s distinctive colors must match exact specifications in anything from television commercials to the sides of semi trucks, a comprehensive style guide is an absolute necessity—and it can become downright massive in size!
Chances are if you’re reading this then your business hasn’t reached a scale yet where you’d need an entire marketing division to helm your brand’s identity. However, it’s never too early to create a style guide. Solidifying the principles of your brand now will save you from potential mayhem down the road when your business grows into more than you alone can keep track of.
When It’s Time to Create a Style Guide
I bet you can already imagine the consequences of not having a style guide. Without predefined guidelines on how your brand should and should not be expressed, any designer or developer you hire could add their own personal touch or interpretation to your website, which eventually will end up creating stylistic mud rather than a cohesive whole.
Your online business will benefit from a style guide if and when:
- You begin delegating tasks to team members or third parties. A style guide will keep everyone on the same page and ensure contributions are standardized.
- Your website has become quite large (and disorganized in the process), and your CSS file has grown out of control from adding new styles to replace already existent ones you forgot were there.
- You need to streamline the process of making updates to your website. Having established guidelines to refer back to ensures new additions are quickly implemented and in alignment with the brand.
Your Style Guide Exists Within Your Website
Before you begin building your style guide you will need to designate where it exists. The best practice is to allocate its own area within your website, either as a directory (www.yourdomain.com/styleguide) or as a subdomain (styleguide.yourdomain.com).
QUICK NOTE: Remember that your style guide must share the same CSS file as the rest of your website. This ensures that design updates within one will immediately reflect in the other, keeping everything unified and consistent.
Your Style Guide Has Its Own Layout
Let’s get this out of the way: creating your style guide is going to take time. But consider the energy you put into it as an investment that will save you more time (and money) in the long run.
Just like your website, your style guide takes user experience into consideration with an easy-to-follow layout. It will function essentially as a standalone website, often with a navigational menu that lists each element of your site in a logical progression of importance. These elements are presented and styled just as they would be on the main website, only of course with contextual guidelines and reasons why things are styled the way they are.
SEE IT IN ACTION: One of the most popular and comprehensive style guides for reference belongs to Starbucks. Take a look at theirs if you need inspiration in getting something basic up.
Style Guides Vs. Pattern Libraries
The terms “style guide” and “pattern library” are often used interchangeably, and for the sake of simplicity I will refer to and provide examples of both as a “style guide”. However, there are important distinctions between the two that you should be aware of.
Pattern libraries will simply present the design elements without explanation of how they should be used within the site or app. Style Guides will, aptly, guide you on the best practices of utilizing the chosen design parameters, explaining why there are certain rules to follow when presenting the brand.
Essentially, with a pattern library you may be presented with style options for H2 tags; however, what’s missing is what a style guide provides: instruction on under what context each particular H2 tag should be used.
How to Create a Style Guide
To craft a style guide that ticks all the boxes, here are the steps you’ll take:
Step 1. Define Your Brand’s Essence
Take the time to research and ponder the defining characteristics of your brand, and then boil it all down into one or two paragraphs. Provide a mission statement, information on your values, and a few key words that will lay the groundwork for all design and content contributions to follow. A great picture can also help easily establish the tone and character of your brand.
Step 2. Set the Rules of Your Logo
The size, placement, and colors of your logo are paramount in the reflection of your brand. Here is where you will also often see Dos and Don’ts that make it very clear how your company should be visually presented to the world.
Twitter leaves no room for error with their extensive rules regarding proper usage of its logo.
Step 3. Establish the Typography
Typography portrays a very tangible sense of character for your brand. The different sizes of your Headings, the amount of spacing between them, and the style of the typeface all lend a particular tonal quality to your website. You can learn more about establishing your brand’s typography.
BBC shares the markup and layout of their typographical elements—a necessity for a large news organization that uses many different headlines of varying significance.
Step 4. Decide on Your Color Palette
Color can be more than just a visual representation of your brand—it can influence your users’ psychology. A certain shade of red could even become less a color and more a subconscious link to a certain soft drink.
Mozilla keeps its brand consistent by defining the color palette of their software. It’s important that you include color codes in HEX, Pantone, HSB, CMYK, and RGB; should the occasion arise that your brand must exist beyond a computer screen, you’ll be ready for it!
Step 5. Determine the Right Iconography
Icons boil an idea down into immediately accessible graphics. There isn’t much to hide behind; if an icon is even slightly out of kilter it will kill the intended effect. Some icons are more design-heavy than others; this doesn’t make one style better than the other, but they just need to be consistent. Avoid incongruous iconography.
IBM’s icon library provides context-based actions for their iconography. Notice how they all follow a similar style that is monochrome, flat and simplistic.
Step 6. Determine the Right Imagery
What imagery best supports your brand, the vibrant landscape photo or the hand drawn cartoon? Will you represent your company through stock photos, or will you hire a photographer to deliver something unique? Whatever is best for your situation, consider the emotion that your brand wishes to communicate.
Step 7: Build the Layout and Grid System
This is one where your planning will definitely pay off, as trying to create future page layouts without a reference usually takes a ridiculous amount of time. Remember to keep the layout fluid for multiple screen sizes.
MailChimp lays down how their main content is structured in a grid. Specific pixel amounts for the gutter and padding ensure the grid stays true no matter the user’s screen size.
Step 8: Style the Elements
Depending on the scope of your website, you may have hundreds of separate elements to take into consideration, from videos to blog comments to ecommerce items. Here are some of the most common ones, which will no doubt be included on any website:
Forms
It’s not just about the color and size of your input fields and labels; you should also include the text to be displayed in case of successful form submission, error, or alert messages.
Buttons
Your color palette and typography will take care of much of these. The color and sizing of your buttons can signify various things: there are button links, submit buttons, CTA buttons, cancel buttons, menu buttons, and so on.
Menus
Again, much of what you’ve already established will get you most of the way here. Spacing and text alignment are major styles to specify. Will your logo act as a Home button? Do you ditch the familiar “hamburger icon” for something more creative?
Modals
A good style guide will not only show the design of your modals (or pop-ups), but it will also stipulate the conditions for their appearance. What actions must a user take in order to see the modal? How is the modal going to persuade action from the user?
Interaction and Animation Effects
Believe it or not, your brand can be expressed in details even as minute as the milliseconds of a hover effect. A text link with the value { animation: 500ms ease-in; } conveys a different personality and sense of urgency compared to { animation: 100ms linear; }.
A mismatch in animation timing between different links on your website may muddle the user experience, so take the time to plan what message your animations and interactions relay and stick to those rules.
Don’t Forget About Content
I’m calling particular attention to this one, because the inclusion of content and copy in style guides is just as important yet often overlooked. As you’ve heard it before, content is the single biggest driving force behind your website’s success. Useful, original and well-written content will reward a much deeper satisfaction to users than pretty buttons or fancy menus. That is why it’s critical to impart brand guidelines to your copywriters in addition to your designers.
Great content is not only well written, it must communicate the voice and tone of your brand through a consistent writing style. These two key words are so important to capture, MailChimp even named their designated content style guide after them.
From this example, you can see how MailChimp directs their copywriters to formulate wording that aligns with the character of their brand while taking into consideration the emotions of their users at any given time.
Content style guides can be pretty exhaustive, even including grammatical rules that you would expect from an English professor.
Conclusion
Style guides take the guesswork out of scaling or starting your online business website. With this vital resource in place, you will no longer scramble to catch new team members up to speed on the rules of your brand.
There are millions of businesses out there—but there’s only one you. Protect the value of your uniqueness by being firm with how you are presented. Employ a style guide now for a brand that stays recognizable into the future.
The authors
Learn more about us
THE BEHIND THE SCENES OF THIS BLOG
This article has been written and researched following a precise methodology.
Our methodology