How To Create A Website Style Guide That Builds Your Brand



Your brand is who you are and what you represent as a company. It is the promise you make to your customers and the values you stand for. A brand style guide captures your brand and makes it understandable and replicable throughout any products and marketing materials you produce. This post is for you if you want to understand why a brand style guide is so important and find out how to create one.

WebsiteHow To Create A Website Style Guide That Builds Your Brand

This is one of a series of blogs intended to assist you in growing your online business. To prepare to create a winning e-commerce website, you need to address 4 key elements.

4 elements to create a website for growth

A content style guide is a documented set of guidelines and rules that break down your brand personality, and how it is (and isn’t) expressed through your content. This advanced tutorial for digital marketers will teach you how to create a content style guie for your brand. Ultimately, knowing how to create a style guide for your brand is all about expressing your brand clearly and encouraging the desired response from your ideal customer or business partner. The presence of a style guide can also create clear direction within your organization and provide a means for you to have agency and advocacy within your brand.

In related posts, we discuss the other elements:

  • How do you establish and align business, digital marketing and website goals?
  • Creating customer personas is vital to targeting your customers accurately.
  • Mapping customer journeys helps identify potential improvements in how you interact with your customers, whether via the website or other initiatives.

Why do I need a brand style?

It’s human nature that we’re attracted to and trust people and companies that seem to be like us. And when we trust someone, we’re open to being influenced by them. In this case, that translates into customers buying from you.

Your brand style gives your customers an immediate sense of who you are and what you’re all about. If your look and feel resonates with them, you’ve already moved them several steps along the journey of buying (into) what you have to offer.

The key here is making sure that you put the same message out there every single time. Going back to human nature for a moment, we all like to know exactly what we’re getting – it makes us feel safe and comfortable.

On the flipside, deviate from what your customer expects, and you may well be sowing seeds not only of confusion but also of mistrust. Imagine if Coca-Cola or Pepsi suddenly changed their brand colour and logo font too. They would instantly lose that brand recognition that has taken them so far.

That said, it’s true that brands do evolve – even Coca-Cola. Any changes need to be carefully considered and implemented though, making it clear why the new version is better.

How do I maintain my brand style?

Think about how many people need to know how to represent your company to your customers. At a bare minimum this list will include:

  • You
  • Your product designers and manufacturers
  • Your website design team
  • Your marketing team
  • Your customer service team

Some of these may be the same people fulfilling a variety of roles. Even if it’s just you doing everything in your business though (and perhaps especially in that case), the chances of remembering exactly how you did something last time are small.

Of course, you could try to cast your mind back, go and find the previous piece of work, and then highlight that particular element and check its size, colour, font, etc.

Or you could simply look it up in your brand style guide.

So, what is a brand style guide?

Your brand style guide is a document that lists how absolutely everything to do with your company is put out there so that your brand is consistently represented.

It’s true that putting this together takes some time. You can share that guide with every current and future person in your team though, saving you a great deal of time, energy and frustration in the long run.

This document is especially important if you are considering creating an e-commerce website. Give it to your website development company to help them stay on-brand from the start.

Talk to usto create a beautifully designed website using our e-commerce software.

How do I go about creating my brand style guide?

A. If you don’t have a look and feel yet, you’ll need to get your brand style in place first:

  • Spend some time considering the elements mentioned above – your business mission, vision and values as well as who your customers are – to make sure you’re clear on your brand story i.e. what you want to put out into the world.
  • Make a list of words that describe your brand’s “personality” e.g. trendy and fun, practical and down-to-earth, or traditional and stylish.
  • Search for images, colours and fonts you like and that fit with that personality, and save them all in one place e.g. on a Pinterest board.
  • Take all of this information to a designer you’re comfortable with and ask them to help you put it together into your brand style.

B. If you already have some kind of brand style:

  • Go through all your various company products, documents and marketing material, including your website (if you already have one).
  • Consider what has been working and what needs to change – in which case go to Step A above to find a new look and feel.

C. Once you’re happy with your brand style:

  • Document all the elements you can think of – see some suggestions below.
  • Format it so it’s easy to read and to find elements, grouping similar ones together – tables or columns work well.
  • Then every time you come across another element that is used regularly, or that people keep asking about, immediately add it to the document.

What goes into my brand style guide?

Your guide should contain information, with examples, about every aspect of your brand and how it should be used (and in some cases, should not be used – negative examples are often very useful).

Some of these elements may change depending on context and application, so the specs for each potential use need to be clearly documented. For example, on:

  • Product packaging
  • Company signage
  • Website
  • Business cards
  • Company letterhead
  • Marketing material, including on- and offline advertisements
  • Presentations
  • Blogs
  • Social media updates
  • Invoices
  • Your email signature
  • Staff uniforms if applicable

Documenting the following elements is a good place to start:

The following detail could be added under each element in your corporate identity guide:

1. Your brand purpose and positioning

This should include your mission, vision and values, and your brand personality.

2. Logo

  • Design
  • Colour/s (including for different backgrounds)
  • Minimum and maximum size
  • Proportions i.e. height vs width
  • Positioning e.g. top, bottom, left-aligned, right-aligned, centred or a certain distance from a margin
  • White space required around it

3. Colour scheme

This is usually derived from your logo colours – include colour swatches and describe them exactly:

  • Pantone colour matches
  • CMYK values for printing
  • RGB colours for use online i.e. the exact hex code

Here are some handy online tools to help you choose a colour scheme:

  • Material palette puts together a palette based on two colours you want to use
  • Spectrum selects dozens of images based on a colour you chose
  • TinEye Labs allows you to refine your image search by choosing up to five colours
  • Coolors helps you to mix and match colours until you find your perfect palette.

4. Typography

This describes the fonts for different levels of headers, body text, image captions, etc:

  • Type
  • Colour
  • Size
  • Alignment – left, right, centred, fully-aligned
  • Kerning (space between letters and words)
  • Line and paragraph spacing e.g. single, multiple, double, so many points before and/or after

These font-pairing websites may help you find your perfect font combination:

  • Type Genius helps you choose a font to start with and then suggests best possible pairs
  • Typespiration shows text examples given by designers from their designs

5. Imagery

  • Often-used images or photos
  • Style, shapes and mood of new images, if required
  • General graphics styles
  • Where they should appear on the page

And specifically for online elements:

  • Page layouts e.g. home page, information pages, product pages
  • Banner sizes
  • Navigation bar
  • Buttons

6. Voice

  • Writing style and tone e.g. formal or conversational (this should align with your brand personality)
  • Words to use or avoid
  • How to write often-used words e.g. in lower case or title case, as one word, hyphenated or two separate words
  • What default language to use (the US uses a lot more z’s than the UK or SA)

What do I do with it now?

You’ll be making revisions and additions to this document, especially at first, and it also makes sense to plan to review it regularly. So once you’ve got it up and running, it’s a good idea to store it somewhere central and simply let people know where to find it. That way only one, hopefully the most current, version will be available at any given time.

The bottom line

Taking the time to think through the various aspects of your brand style guide is a useful exercise in itself, as it helps you get really clear on what your company is all about. And once you have your style guide in place and everyone knows how to use it, your brand presence out in the world will be that much stronger, translating into higher returns all round.

Contact us to discuss a B2C or B2B e-commerce website.

Does your business have a brand style guide? Can you share any tips and tricks with us?

Recent posts

Consistency is the first key of branding. Your brand should have an uniformed look and voice throughout all of your brand assets to help your audience grow familiar with who you are and what you represent. This means there should be set rules on things such as colors, layout, typography and tone.

Besides a product, the company logo should be your strongest visual asset. It’s crucial to branding that the logo does not vary too far away from your original design. This is something that often comes into play when printing your company logo on promotional products. Without any guidance, it becomes more difficult to create a consistent look for your brand. Some common issues when printing are:

  • The imprint area of the product – While you can put your logo on almost anything under the sun, most products have a standard imprint area. This means the logo must fit into a predefined box that varies from product to product. Having different layout styles for your logo helps better fill the imprint area and make your logo more prominent on the product.
  • The colors of your logo – The number of colors in your logo help determine the price of the imprint. Each time another color is added, the price per piece typically goes up. Having multiple color variations of your logo eliminates this confusion.
  • Your budget – Your budget is the most determining factor for your imprint. With a style guide it makes it easy to get the best possible imprint and also stay in budget.

Because of these factors, along with other marketing and advertising materials (i.e. business cards, websites, PowerPoint presentations, pamphlets, etc.), creating a style guide will help ensure that your branding is consistent throughout.

What is a style guide and why should I create one now?

A style guide is a fairly straight-forward document with rules and guidelines for how your brand and logo should be represented. This typically includes how the brand will look visually, but also how the brand should interact with its audience, or its personality.

In this guide, we are going to focus on the visual aspect of the brand/logo.

How To Create A Website Style Guide That Builds Your Brand New

From a design point of view, a style guide should include an outline, for anyone to use, that illustrates the acceptable ways for the brand to be personified across any platform.

Website

Logos

Your logo is the face of your brand. That’s why its important to set a standard when it comes to how you use it. Creating consistency with your logo will allow consumers to be able to start recognizing your brand, whether its through style, shape or color.

Walmart does a terrific job displaying the correct ways their logo should be displayed. It also demonstrates the appropriate amount of white space that should surround the logo, the minimum size and specific colors. Doing so helps companies strengthen their brand identity.

Like we mentioned before, you should design different variations of your logo to better fit within certain areas. This helps fill a specific space better so your logo will be displayed more prominently. The University of Washington has three distinct versions of their university signature. They also have examples of unacceptable versions to ensure it is done correctly. Again, this helps build integrity within a brand.

Colors

Color is an extremely powerful aspect of brand identity. It connects with us mentally and emotionally. It’s crucial to pick a set of colors specifically for your logo, along with the background and any accompanying text. Take a look at the following picture of Coca-Cola and Pepsi. It truly hurts to see these big brands in other colors not their own.

It’s important to not give your color choices generalities such as red, yellow, or blue, but exact values. Pick specific CMYK, REG, HEX and Pantone colors, so your brand colors are the same every time, no matter what type of marketing material you attach your logo to.

Lynda.com has very simple, yet effective color options for their logo. Because of their limited options, it is easy for anyone involved to advertise adequately for their site.

Typography

Typography, or selected fonts, are an often overlooked part of a style guide. To keep your brand message clear and concise, a group of predefined fonts should be selected to accompany all projects. The typography should follow a common theme (serif or sans-serif), along with additional styling, size and color.

How To Create A Website Style Guide That Builds Your Brand Quiz

AT&T has its own predefined font that should be used for all communications, which was actually specifically made for their brand. However, if that font is not available, they are free to use Verdana.

Ready to Create Your Own Visual Style Guide?

Because our goal here at Blue Soda Promo is to “make your brand pop” we wanted to give away a resource to help other businesses protect their logo and ensure that brand standards are met on each and every marketing campaign. So even if you don’t have a creative director in-house or a big graphic design budget, you can have something that others can reference moving forward.

What’s inside:

How To Create A Website Style Guide That Builds Your Brand
  • A PDF guide that reinforces the things you’ve learned from this blog post along with some additional style tips and examples with our own logo
  • A easy to edit PSD to help you create your own visual style guide
  • To get started, just click here to download!