Collaborative Style Guides

A461ef837d379c4c5782e3b1aaa5fd24?s=47 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.

A461ef837d379c4c5782e3b1aaa5fd24?s=128

Susan Robertson

November 13, 2015
Tweet

Transcript

  1. 6.

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

    a brand guideline ✴A living document ✴Made with the site/application code
  2. 7.

    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. 8.

    Different Guides ✴Branding ✴Design language ✴Voice and Tone ✴Writing ✴Pattern

    Libraries ✴Code Style Guides http://bradfrost.com/blog/post/style-guides/
  4. 10.
  5. 11.

    Reference for the whole team Everyone knows what to call

    different modules. South Tees Hospital
  6. 28.
  7. 37.
  8. 43.
  9. 45.

    ASK

  10. 47.
  11. 48.
  12. 52.
  13. 56.

    There is no right or wrong way to create a

    style guide, just the way that works for your team.
  14. 58.
  15. 72.

    ✴Use it to test design changes ✴No PRs merged until

    style guide is updated ✴Use it for feature development
  16. 73.
  17. 80.

    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