A style guide is a document which includes different formatting guidelines for basically anything that a company would have designed. Style guides are very important when it comes to branding. They help to keep all styling consistent across multiple mediums. If you are a designer, consider creating a style guide for your client’s next website and/or printed line. If they request more work from you in the future, you will have a quick reference guide at your fingertips. Style guides are especially useful for large websites. I currently work with 9 e-commerce websites each with a different look & feel. So, to make things a bit easier on our creative team, they each have a style guide.
Without a style guide, keeping track of fonts, colors, and other styling would be quite the task.
What to Include in a Style Guide
Table of Contents
Having a clear organization system with your style guide is important. One of the reasons to have a guide in the first place is to use your time or your designer’s time more effectively. Make sure key elements are easy to find or placed within a logical section. Many designers don’t give enough attention to style guides when they should. Treat it as you would any other part of the project.
Design Concepts
Many designers forget to include their purpose of design in a style guide. I find it helpful when working on a re-design when I can understand the previous designer’s thoughts and reasons for why they designed elements the way they did. Again, a very helpful include for in-house design teams. Sometimes this information can be its own guide, separate from specific styling. Or, if multiple mediums are used, it can be inserted at the beginning of each guide.
Typography
List all fonts used and each style of that font as well. This includes bold, italic, regular etc. When you have large amounts of body text, include line-height as well, especially if it varies in different areas. Also include which sizes are used in which particular area. It is helpful to show visuals of different web pages (or other medium) that have different styling applied to the typography. Take screen shots to include in your style guide with clear identifications of which area has each particular styling rule applied to it. This will make it easier and more efficient for designers to make changes and skip any guesswork.
For example:
A. Gills Sans MT – 15 pt. Regular Strong | Color: White #FFFFFF | Kerning: 0
B. Gills Sans MT – 30 pt. Regular Strong | Color: Historic Brown #5b371c | Kerning: 0
C. Gills Sans MT – 14 pt. Regular Strong | Color: Historic Brown #5b371c | Kerning:0 | Line-height: 18
Color
To keep colors consistent across all design pieces, it is best to include all color codes that can be used. Include color swatches with the corresponding pantone or web color codes. Be as specific as possible and keep naming conventions consistent when referencing them in any company guides.
Imagery Restrictions/Preferences
Is there certain imagery that cannot be included in a designed piece from “company”? Make sure and be specific! Is the company’s design only illustration based? If so, include artists contact information if an outside source is used or multiple preferences of artists that are allowed to be contacted for freelance projects.
Logo Usage
Be clear on how you would like your company’s mark to be displayed. If you don’t want to see drop shadows, outer glows, or reflections applied to your logo, say so. Also, some logos have a specific tilt or angle to them. If you don’t want it rotated, specify this in your style guide to avoid any questions.
Paper Preference
It is likely that over the years a paper stock might go off the market, but it is important to specify which stock, weight and company you prefer per printed piece. This can be done by type of printed piece, such as direct mail, books, brochures etc. When indicating these choices for books, make sure and list the cover stock & interior pages. Remember, be as detailed as possible & don’t leave anything out.
Have some fun!
There’s a good chance that a style guide is a very technical document. If given the opportunity, show off your design skills with a style guide. Experiment with a unique layout that will keep the user’s attention and highlight essential and important elements you don’t want to be missed. Try playing around with some silly quotes or fun design elements. A technical document doesn’t have to look and feel technical! Apply your design magic!
Take a look at other key ingredients for any successful website.
2 Comments
Read more about: Tags: Style Guide