Style Guides

I had a think the last week, and thought, some places I have worked in have not got a clue when it comes to Style Guides. So I compiled a list of what you may want in one. These are just items that I think you need to consider when putting together a style guide – you may not need them all and in most cases you will need to add some other information more specific to your company.

Obviously, you need Branding. Define and give examples of your logos and color schemes. Show how your logo should be used in full color, decorated, flat, in black and white or on different backgrounds. Provide HEX and RBG color values and Pantone colors for each color and you may also want to provide locations on where you can find the logo files .png .eps .ai and .psd formats.

Goes without saying, Typography. Define what font families and the sizes for each header, paragraph, labels, form elements and any other formatted text that will be used. Also provide examples of what kerning, line height or line spacing should be used as well.

Layouts. This is my addition to the traditional style guide, Define where and how other elements are positioned on the screen and how they relate to each other. You could define margins, padding, gutters or grid patterns of the overall layout as well as any specific elements if different. I would provide examples of the layout to show the differences in screens or layout templates.

Navigation elements. Define the main and sub navigation styles as well as the interactivity of them. Define what happens when nested or parent/child navigation is used and show examples of how the navigation should be used and/or created.

Image use and Icons. Maybe define what sizes, file sizes, dimensions, and styles should be used for images and icons.

Other UI Standards. Define what types of other UI elements should be used for each interaction and how they should look. Where should a check box or radio button be used or should they be used at all?

Most Style Guides I have done also include a Goals/Mission area. You may want to define what your overall goals and mission of the screen/application you are making etc.

I have also added in some guides, coding practices. Here I defined what coding standards and practices should be used when edited and writing any type of code used. For example what HTML, CSS and JavaScript standards are supposed to be used when writing code for the site and show example code to illustrate how code should be written and submitted.

File Naming Conventions. I think this is very important, this will prevent so many problems in the long run.

In conclusion, make it pretty. This may take a lot more work but if you have end users referencing the style guide this may be worth extra time. Honestly, think about it, your style guide is a reflection of your product just like any other publicly facing product you manage. But, if your audience is just your group of developers then it might be fine very loose designed. This is since most of these users already understand your brand very well. But if you are sending off work to third parties, it is worth putting more effort in.