Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Collaborative Style Guides

Susan Robertson
November 13, 2015

Collaborative Style Guides

Ever wondered how to get a style guide into your process? Heck, even wondered what a style guide is or what it can be? Even if you don’t like to open up the text editor, you can help form and shape a guide by working with your team to make sure it works for both designers and developers. We’ll look at different types of guides and how to work in a collaborative process to make the guide work for your entire team and your process.

Susan Robertson

November 13, 2015
Tweet

More Decks by Susan Robertson

Other Decks in Design

Transcript

  1. How I define style guide: ✴May be one part of

    a brand guideline ✴A living document ✴Made with the site/application code
  2. But wait, what’s a Pattern Library? ✴Style guide can be

    more broad, including how and why ✴Pattern library is a framework http://webdesign.tutsplus.com/articles/front-end-style-guides-your-questions-answered--cms-21088
  3. Different Guides ✴Branding ✴Design language ✴Voice and Tone ✴Writing ✴Pattern

    Libraries ✴Code Style Guides http://bradfrost.com/blog/post/style-guides/
  4. Reference for the whole team Everyone knows what to call

    different modules. South Tees Hospital
  5. ASK

  6. There is no right or wrong way to create a

    style guide, just the way that works for your team.
  7. ✴Use it to test design changes ✴No PRs merged until

    style guide is updated ✴Use it for feature development
  8. Thank you Thanks to Flickr users who share their photos

    under Creative Commons license. Special thanks to Ethan Marcotte, Jason Grigsby, Anna Debenham, Tim Kadlec, Matthew Oliphant, Kitt Hodsden, Jonathan Snook, Stephen Hay, and Livia Labate for their invaluable feedback and support as I’ve written and thought about style guides. @susanjrobertson susanjeanrobertson.com