What is a Brand Style Guide?
A style guide is a document that details and governs how you want to display and convey your business image on a website for example. It may include but is not limited to: Logo, logo variations, colours, fonts, icons, tag lines and slogans, and presentational information surrounding your brand, image & story.
This is the Go-To resource when you want to create a new page on the website, a blog post, a social media header image or a marketing poster, or anything of the like. It can be used by others to understand your required vision or even by yourself to keep you in check and consistent in your own message.
Do You Know What I Mean?
Have you ever said or had a discussion where someone says “Do You Know What I Mean?” Explaining things over and over again is tiresome, ineffective, and sometimes straight-up frustrating! A style guide’s intent is to easily get everything on the same page, literally. It can start off simple and develop with you but ultimately it should convey clearly not only how you want things to look, but also how you want things to sound. The style is defined both visually AND verbally so the language that is used is also an important element.
Collar and Cuffs
When you strive for consistency, customers will see the same logo, the same style fonts, and the same colors, and read the same language they will instantly know they are dealing with the same company they saw in the past. Even if you mix things up on a campaign, if you already had your style consistency stamped in, carrying certain elements over into new design ideas will help retrain that recognition.
Everyone Needs a Little OCD
Without a style guide to work from, it is really difficult to build up website recognition. Things will look different and disjointed, customers will have a hard time making the connections. Everyone Needs a Little OCD here, having a clear set of guidelines for your brand’s style also presents a sense that all is under control. I like to think that people enjoy working with brands that they think are well-run, and who know what they are doing and are in control. By ensuring your style and brand is consistent across all mediums, you are showing that you have control over your brand and that the little details are important to you.
Consistent Actions Create Consistent Results
Finally, if you’re not sold already, you must agree that a consistent design just looks better!? Imagine if this website homepage was Blue and Black with a technical informal language on my text, my About Me page was Red and Green with a loose formal video to the language, and the Services page was Orange with a mixture of formal technical and third person informal language, besides it looking very unpleasing to the eye (unless your on mind-altering substances) the overall theme and vibe, my story or brand would be quite a mixture and somewhat a code to decipher no?!
This isn’t the case, for example, you can see as you browse www.Interwebdynamcis.com, It applies consistent color schemes, picture styles, fonts, and language. Consistency is appreciated by website visitors and customers, and a style guide helps you to achieve this.
THE NITTY GRITTY – HOW TO MAKE A STYLE GUIDE
Remember, Rome wasn’t built in a day! A style guide will take time to discuss build and even develop. If you’re in a company where you are not the sole decision maker when it comes down to the company image/brand, then your style guide will take collaboration. However, once it is complete, it’s done and will make style and brand decision-making so much easy for you in the future.
There isn’t a magical one-size-fits-all style guide format. You are unique, and your business and ideas are unique so see it as an ongoing process that may require incremental updates and changes.
Here Are Some First Timer Tips to Making a Style Guide
Logo Guidelines
Firstly, think about how and where your logo will be used. It may need to be different colours at times depending on the background do you want to adopt variations? Sizes or even shapes may need altering depending on the medium. So, detail its preferred size and how it may be modified to your choice, and how you would not like to see it if applicable. Perhaps take the time to create a few different variations of your logo for different uses if necessary.
Web Design Color Palette
You want the colors to be consistent throughout your website, so list what to use so everyone knows what they are. Match your colors throughout your business theme so your business cards, posters, shop signs, work shirt badges van stickers, or whatever are in line with each other. Where the exact colors are concerned, be specific. Giving the hexadecimal code for color is much better than saying something like “soft yellow”. If you’re not sure about how to find a hexadecimal color code, perhaps you want the exact same colour as your logo, well, you can visit HTML Color Codes for example, add your logo image for example and then click on the color onscreen and it will tell you the hexadecimal color code to include. You can now, with confidence use the EXACT same precise color in your styling each time in the future! Yaay! Easy peasy!
Describe and/ or List Your Fonts
Add some details about where and when to use certain fonts or typefaces. Larger, smaller, bold, italics, etc. Generally, again we are going for consistency. Typically it’s not recommended to mix your fonts up, in other words, choose one and stick to it. I believe there is a little more room for flare with fonts. Although I agree you need to be consistent, I have bravely used 3 fonts in my web design. You can clearly see my dominant header font is very distinguished from my content text. Both in turn are different from my Logo text. This was my decision as it is yours but you certainly don’t want to mix it up too much as it defeats the objective of outlining them in the first place.
When I’m looking for something a little different I like to work with Google Fonts you can browse them here and any web designer can import them to use on your website to give it more character. You can of course just use the standard web-safe fonts as well which guarantee to display consistently across the web.
Set Your Voice
When people read your website, do you want the copy to be casual and fun or technical and informative? Again for consistency, we are trying to maintain a similar voice throughout everything, so keep this voice in mind when you first create your copy or let your writers know what they should be aiming for. It really helps to note down examples of what you are going for and equally, not what you’re going for. If you plan on using different voices in different areas, be sure to lay out where each one is to be used.
OK, OFF YOU TROT… GET STARTED”
Start with a simple brainstorm, bullet point the things I’ve listed, and anything you want to include in your style guide. Do some research, and play around with styles to see what fits. Ask colleagues, partners, or even friends for advice, feedback, and input to consider.
In a perfect world, I advise creating a style guide that is accessible online. This way it can be shared updated and accessed on the fly if needed. One way to achieve this is by saving your document to the cloud. So your Word doc could be uploaded to the cloud. Google Drive for example.
If you have followed any of my other posts, you will see I strongly advocate the use of WordPress! So if you or your business uses WordPress CMS ( and you really should be) Reason 101 from the many other reasons I list is because of a very cool WordPress plugin from ARC. This baby is a FREE WordPress Plugin to download and makes creating Web design style sheets very simple and organized AND it saves them on your website too!
Right… That’s Your Lot. Have Fun Creating Your New Web Design Style Sheet!
