A style guide is simply a set of standards and objectives that you strive to meet when designing your website. Style guides are useful in helping other clients who are either taking over the creation of your website, or need to understand how you determine the way in which a website should look and function. There are many items to include in a style guide, and several reasons why you, as a designer, should consider making one that is both simple and transparent.
Why Create One?
Some of the reasons to create a style guide include:
1. Style guides help other people follow and understand your brand as a designer.
2. Style guides define your personality as a designer, and are good for personal portfolio purposes.
3. It’s a way of marketing and explaining your designs and design company in a professional way to your clients.
4. Style guides help other designers who may be taking over your design if you can no longer do it. In other words, they will continue the same layout and aesthetics that you envisioned when you began.
What to Include in Your Style Guide
1. Brand overview. Include the basic mission of what the company and you as the designer are trying to achieve, and put in keywords that the client can reference later on.
2. Logo variations. Include specifics about the logo design and show it in different sizes so the customer can understand how it looks in different circumstances.
3. Typography. Explain and show what fonts work for different sections of the design. Show the difference between kerning and tracking, so the customer can understand how to space their lettering.
4. Copywriting guide. This isn’t always necessary, but you want some sort of guide that can help copywriters at other companies understand how to write for this specific website. Writing for a website is a straightforward and to the point method that many good writers even need practice at. Using Dos and Don’ts as copywriting examples can help explain this better to the customer and writer.
5. Button hierarchy and navigation. Explain why buttons are in the position they are in, and how they should look on the design layout. Create a map of where each button leads to when pushed, as well as a brief paragraph that explains the navigation and why it was designed a certain way.
6. Simple HTML code explanations. You don’t need to go into huge detail about what code you used and why for each portion. Most customers don’t need to understand this. However, when they add on “related links” later themselves, for example, they will need to have a basic understanding of how to use code to do this. Make it as simple and straightforward as possible, as the mere word “computer code” can be overwhelming to those who don’t understand it.
There are other items you can include in your style guide, but these are some of the most important ones. When you’re finished, print it out and put it in a nice glossy book so it can easily be given out to customers as a reference guide.