How to Make a Style Guide Last

Kimberly Blessing

@obiwankimberly

Design style guides document information architecture practices, aspects of the user interface, such as grids and layouts, graphic design elements, such as color and typography, and branding.

Modern “front-end” style guides pair design specifications with code in order to give a complete picture of how the visual design language is implemented.

ROI of Front-End Style Guides

Efficiency Reduces development and QA time, improving time to market for new features

Collaboration Builds cross-functional teamwork and knowledge, eliminates miscommunication

Consistency Creates a consistent user experience, reduces need to reinvent the wheel

Clarity Makes it easy to identify gaps or inconsistencies

Pride Is the mark of a team focused on quality, which commits people to maintaining quality standards

Typical Complaints

Irrelevance The style guide is out of date or isn’t followed consistently.

Lack of Detail The style guide isn’t thorough enough – or it’s too specific to be applied broadly.

No Autonomy The style guide prevents individuals from being creative problem-solvers.

Poor Communication

Lack of information about the style guide is causing confusion.

Lack of Consensus

[Group X] disagrees with and isn’t following the style guide.

The Circle of Standards

Creation andDocumentati

on

Training andCommunicati

on

Review and ApprovalProcess

Creation and Documentation

• Start with the fundamentals• Investigate the live site and work in

progress• Think ahead to future needs• Review regularly• Monitor projects for efforts

that require standardizationCreation and

Documentation

Training andCommunicati

on

Review and ApprovalProcess

Training and Communication

• Make training mandatory for everyone• Offer training regularly• Communicate on a regular basis• Make information available

in a convenient formatCreation and

Documentation

Training andCommunicati

on

Review and ApprovalProcess

Project Review and Approval Process

• Make adherence to the style guide part of the project requirements and acceptance or launch criteria• Formal design and technical/code

reviews look for standards-related issues• New work gets fed back

into the Creation phase

Creation andDocumentatio

n

Training andCommunicati

on

Review and ApprovalProcess

The Standards Manager

• Champion for the style guide and standards• May run a team dedicated to maintaining

the style guide• Must understand the related

disciplines and work to be effective

Style Guide References

• A List Apart article by Anna Debenhamhttp://alistapart.com/blog/post/getting-started-with-pattern-libraries

• Collection of public style guideshttps://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides

Good Luck Making Your Style Guide Last!

Kimberly Blessing

@obiwankimberly