How to Create a Website Style Guide that Builds Your Brand

By Melissa Haney

http://www.weebly.com/inspiration/website-style-guide-builds-brand?utm_source=newsletter&utm_medium=email&utm_campaign=style-guide

Awesome web template? Check. Thoughtfully considered color scheme? Check. Logo and images that work thematically with your brand's voice? You got it. Now about those blog post titles -- are all words capitalized or just the first? Is your site for "ecommerce" or "eCommerce"? How about your copy? Is friendly and playful or formal and refined?You might be tempted to brush off these questions as negligible details, but inconsistencies like this can create a poor user experience for your site visitors. The last thing you want is for potential buyers to dismiss your brand's web presence as amateurish or unpolished.

Enter, the style guide.

A style guide is a document that bridges website design, maintenance, and content creation, in order to create a consistent, unified brand presence and voice. It's a good thing to have in your back pocket whether you're part of a team or creating your site solo. It sets the stage for all future site developments, both design and copy-wise.

Large brands spend a lot of time and energy creating comprehensive website style guides. Apple has a style guide that just covers the use of language in their Support services that tops out at nearly 200 pages. Skype has a 93-page document that goes over everything from font use to photographic styles. And MailChimp has created a stand-alone website that outlines its voice and tone (called, aptly enough, Voice and Tone) for use in all written materials and corporate correspondence.

What can small businesses take away from these examples? Details matter. Consistency matters. Unless you're a multimillion-dollar international company, you probably don't need to create a hundred-page document to achieve similar results (and if you are, that's a great problem to have!), so in today's post, we're going to walk you through creating a simple, concise style guide for your brand's website.

Creating a Style Guide

Step 1 - Full site audit

The first step to creating your own website style guide is to do a full site audit. Review what you've already created. Make note of colors you've used for different headers, blockquotes, or emphasis. Think about how you want to standardize testimonials or calls-to-action. Do you have a specific set of requirements for photos and images used with your brand?

Go through your copy with a fine-tooth comb and decide how to handle headers, titles, dates, and any non-standard or niche-related jargon. Will you use the word "and" or an ampersand (&)? Will you write out full names or use industry-specific acronyms?

Writing everything down at this stage will not only help you finalize a style guide for your brand, but it can also illuminate any aspects of your website that you've been neglecting. Perhaps those purchase links could be clearer. Maybe the language used in your website's menu should be more direct and in alignment with your brand voice.

Create an outline and start with the most obvious parts of your site -- the visual style -- color, images, and any icons you use. From there, you'll tackle the finer bits of your website's copy -- headlines, titles, blog post formats, product descriptions, etc.

Step 2 - Set content goals

The next step is to think about your content goals and how your style might best meet those goals. Now's a good chance to think about what's working and what isn't. Perhaps you need to style your product photography differently. Or maybe you should try to enliven your blog copy some more. Make notes of your ideas so you can create a consistent and unified brand for future blogs, website updates, and social media posts.

Step 3 - Give it a test run

The final step is to test your style guide for future content creation. Show it to a colleague or peer you trust and ask if they would understand how to make website updates. Not only can you use your style guide to reference when you're working on your site, your guide can be used to onboard new employees or freelancers faster. Use it every time you make a new post, add another product, create a Twitter or Facebook campaign, or reply to a customer support email.

A living document — Just like your website

Think of your style guide as a living document. It can and should grow as your brand does. You can always edit, update and even overhaul your style guide if your brand evolves, but this is one business asset that should always serve as the touchstone of your website strategy. Remember the goal: a consistent brand voice with a matching web presence that creates a cohesive experience for your customers and clients. A style guide you can easily reference makes achieving your objectives much more effortless.