Imagine you've just bought a new TV. You open up the box, remove the protective packaging and plug in the power. Usually floating in the box somewhere is a paper booklet called a user's manual or quick-start guide. We can think of style guides as a user's manual for clients. You've created a great product, but now you have to show your client how to use it correctly.
Show and Tell
A helpful style guide includes all the basic information about the brand or logo in question: colors, typography, sizing and usage cases. I'll go through each element in a moment, but a helpful tip to remember is to provide both the raw information and examples. Design is very much a visual game and providing examples helps other designers catch on quickly to correct usage practices.
Color
Your color panel is easy to create by pulling the palette used from your created artwork. The color data you provide can be tuned to the final presentation of your content. For print work, provide CMYK codes or Pantone swatches for reference. For web, RGB or Hex codes are your targets. Giving a sample of each color is helpful for quick visual reference.
Typography
When documenting typography, its easy, and a good practice, to be as thorough as possible in showing usage cases. I like to use basic HTML structuring for my typography. What font do you use for title case? What size? What about for H1 headings? H2? Body copy? This might look like:
Sizing
Let's say you're working on a logo. Logos are classically applied to everything in a brand and are the anchoring element of a brand's visual identity. Rules for sizing are important to include to make sure the logo you have created is always presented well. Be sure to provide limits on how small a logo is allowed to be scaled. This is especially important if your logo has text, as typefaces have their own limits regarding readability as your shrink and expand them.
Usage Cases
Usage examples are helpful additions to any style guide and are useful for demonstrating what is acceptable usage as well as what is not acceptable. Want to make sure future designers using your work don't add drop shadow? Show that it's not okay in an example frame. Overlaying a logo on a background photo? Demonstrate best practices with stock footage examples. Unless you're an in-house designer building out an enterprise design system, the chances are that once you hand off your work to the client you will have little control over how it is used. Thorough usage cases in your style guide can help future designers using your work to do so well and maintain consistency. Your clients will thank you.
Comments