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.

Transcript

1. Collaborative Style Guides @susanjrobertson susanjeanrobertson.com
2. First Glimpse http://www.flickr.com/photos/aarronwalter/5579386649/sizes/l/in/photostream/
3. 24 Ways, Anna Debenham
4. Starbucks Guide http://www.starbucks.com/static/reference/styleguide/
5. Guides start popping up
6. How I define style guide: ✴May be one part of a brand guideline ✴A living document ✴Made with the site/application code
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
8. Different Guides ✴Branding ✴Design language ✴Voice and Tone ✴Writing ✴Pattern Libraries ✴Code Style Guides http://bradfrost.com/blog/post/style-guides/
9. I’m talking about… Code Style Guides
10. Why?
11. Reference for the whole team Everyone knows what to call different modules. South Tees Hospital
12. Find inconsistencies One of these things is not like the other https://flic.kr/p/oEDx5z
13. Usage of modules documented Yelp
14. Variables well documented Yelp Code for America Easily reference so no duplicates are made
15. Quick testing cross browser Twitter Bootstrap MailChimp
16. Code as a system Modular CSS becomes a system of building blocks
17. Smaller CSS files https://www.flickr.com/photos/crichard/445904906
18. Fast build outs https://www.flickr.com/photos/state_library_south_australia/3925493340/in/photostream/
19. Nice deliverable for client http://daverupert.com/2013/04/responsive-deliverables/
20. Slow down to speed up
21. Style Guides I’ve Made
22. FiftyThree Type Style Guide http://www.fiftythree.com/styleguide/typography http://blog.typekit.com/ 2014/10/22/creating-a-type- style-guide/
23. Check design changes
24. Imprint first guide
25. Imprint post redesign
26. Inventory Styles
27. Editorially - no style guide https://flic.kr/p/5WrAQr
28. Because
29. Create style guide to learn
30. Changes as application does
31. Common language
32. Use to make prototypes
33. Where I ended up https://github.com/Editorially/styleguide
34. CSS Audit https://www.flickr.com/photos/joebeone/1764153258
35. Ugly useful is what matters
36. https://flic.kr/p/i24wxa
37. Process
38. Screenshot existing site http://bradfrost.com/blog/post/interface-inventory/
39. http://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone Cut up your design
40. Inventory goes into code
41. Easy access to work in progress ✴Intranet ✴In your repo ✴In an admin area
42. Think about the why of the patterns Yelp
43. Waterfall
44. VISUAL INVENTORY
45. ASK
46. DESIGNOVELOPMENT
47. BUILD
48. Agile
49. Reference when creating
50. Review as part of release
51. Are styles and design maintainable https://flic.kr/p/4miMB5
52. GOALS
53. Work together
54. Find inconsistencies Not quite the same, but close, can one change?
55. Create objects
56. There is no right or wrong way to create a style guide, just the way that works for your team.
57. Maintenance
59. https://twitter.com/susanjrobertson/status/530062285826711552
60. Client hand off
61. Recommend how to maintain
62. In House Maintenance
63. Automate it
64. Rizzo Ian Feather’s solution for Lonely Planet See more: http://ianfeather.co.uk/a-maintainable-style-guide/
65. Use tools KSS or Hologram or …. https://www.flickr.com/photos/mr_bmonroe/8541292238
66. Get people involved
67. Digital Standards Team
68. Simpler visual index for devs
69. A Champion https://flic.kr/p/7J1WXa
70. UX review team https://www.flickr.com/photos/72213316@N00/4429512983
71. A step in your process
72. ✴Use it to test design changes ✴No PRs merged until style guide is updated ✴Use it for feature development
73. Resources
74. Roundup of all the things https://styleguides.io
75. Remember…
76. Work together https://flic.kr/p/ef4uRZ
77. Benefits are worth the time https://www.flickr.com/photos/smemon/4961717384
78. Ugly is OK, worry about usefulness https://flic.kr/p/dQ5Cr
79. Cause when you have one.....
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