29Jul

Style Guides – Why Your Mom Would Approve

Mom told you to keep your room clean, be polite, and be considerate of others. She was building the base for a successful and rewarding life. Bet you didn’t know she was teaching you the principles behind style guides. She probably didn’t realize it either, but style guides are a tool to help you get along with others and keep your work neat and tidy.

Style Guides

In the early days of Fortran and Cobol, documentation took the form of comments inserted by the coder. As programs and designs became more elaborate and complex, comments just didn’t cut it any more. Enter the style guide. It’s the evolution of program documentation.

Style guides are a valuable tool during development and an invaluable history for maintenance because they centralize information about the “what” of the elements and document the “why” they are that way.

Style guides require an investment of time up-front but the payoff is enormous efficiency down the road.

Style Guides Build Consistency

Style guides solve problems before they happen. Product owners, producers, designers, and developers can all reference the guide when discussing site changes and iterations.

When you capture the elements of the brand’s design, every designer and developer that works on the brand won’t waste valuable time staring at CSS. Each current team member and anyone that works on the brand in the future can reference one place. This ensures a cohesive look and feel now and forever and that’s important for the success of any brand. And face it, without the brand you don’t have anything.

Effective Style Guides

A style guide is only as good as the information in it. An effective style guide is complete and up-to-date. It should include information for on-line and off-line marketing materials. Think of it as your brand’s Bible for corporate identity. Include the following elements for all materials:

Fonts. Font consistency reinforces the brand’s image. Not only do you need to include font family, but note if certain special characters or weights should not be used and why. Use terms such as “Bold” and “Italic” to denote weight.

Colors. The colors a company chooses send a message. Effective marketing associates the brand and color. If I say “Coca-Cola red” the color you think of is Hex: #f40000. This is information needs to be captured in the style guide.

Logos. A lot of work by someone (maybe you?) went into designing that logo. Include information that answers questions such as:

How much empty space must be around logo

How is it expressed in gray scale

Can it be used in any other color

What backgrounds can be used

Can it be displayed in a box or with a border

In addition, your style guide should include very specific information about your web site and web apps.

Structure. Capture the basic structure of the design. Include information such as:

widths

heights

columns

headers

body text

white space

padding

margins

Indicate what’s fixed and what’s variable. Use descriptive language like “Primary heading” instead of “H1” because it clearly captures the intention.

Text and Copy. Your current text might not wrap, but it could in the future. Make sure that you indicate clearly how text wrapping is handled in different elements. If you have copy style rules, such as handling Oxford commas or widows and orphans, include that information as well.

Pictures. Do picture elements have a subtle outline? Do they change with hover state? Are there rules for captions? Include that information too!

State of the State. Links are critical. For any element with multiple states, document all states.

Forms. Leaving the next person guessing about your form is well, just bad form. Don’t stop with label alignment and position, include load animations or graphics, live validation information, input field state and any other important information about your forms.

The best style guide is one that is current. As any changes are made, make sure they are captured in the style guide. In a fluid environment you may need to review the style guide every week or two to make sure it is accurate.

Design Consistency Supports the Brand

Brand consistency is maintained through design consistency. One reference point results in a cohesive look and feel for on and off-line materials. This is critical when there is a team of designers working on the site or brand. Just take a look at how these brands stay consistent through use of a style guide:

Benefits to Using Style Guides

The greatest benefits of style guides are found in improved communication and efficiency. Time is money. Style guides save time in many ways:

It saves time by providing answers to format, style and accuracy questions

It saves time writing, reviewing, and editing documents

It saves training time

It reduces time team members spend going back-and-forth just communicating the basic elements of the brand’s style

Style guides are also a way to standardize the CSS, keeping it small and quick to load. By using the guide as an inventory of modules and code, both designers and developers can quickly see if new designs deviate from established standards. Then the team can decide if it’s worth expanding the codebase or if something already written can be easily extended.

Do you use style guides? Do you think they are necessary? Comment and let us know how you use style guides and if they’ve ever saved your day.