Style Guide Best Practices Presentation

I recently spoke at An Event Apart in San Diego where I presented on the whys, whats and how’s of style guides. Here are the slides:

And here are some resources I reference in the talk:

Style Guide Types

• Style guide types
• WVU brand style guides
• Google’s Material Design
• Mailchimp’s Voice and Tone
• Economist writing style guide
• Dalhousie University writing for the Web guidelines
• SMACSS, OOCSS,  BEM, and CSS Guidelines
• Github’s code style guide
• Walmart’s pattern library
• Front-end Style Guides by Anna Debenham

Creating a Style Guide

• CSS Stats
• Interface Inventory
• Conducting an Interface Inventory
• Interface inventory template
• Atomic Design
• Atomic Design book
• Style guide tools
• Pattern Lab
• Follow Dave Olsen on Twitter
• Element Collages by Dan Mall
• TechCrunch redesign

Maintaining Style Guides

• Lonely Planet’s Rizzo
• Yelp’s style guide
• Salesforce1 style guide
• Heroku Purple style guide
• Style Guide examples
• What’s new in Material Design
• Style Guides Podcast

And from the talk description:

We’re tasked with creating experiences that look and function beautifully across a dizzying array of devices and environments. That’s a tall order in and of itself, but once you factor in other team members, clients, stakeholders, and organizational quirks, things start looking downright intimidating. With so many variables to consider, we need solid ground to stand on. Style guides are quickly proving to be foundational tools for tackling this increasingly-diverse web landscape while still maintaining your sanity. Style guides promote consistency, establish a shared vocabulary, make testing easier, and lay a future-friendly foundation. This session will detail best practices and considerations for creating and maintaining style guides, so you can set up your organization for success.

Happy style guiding!