$30 off During Our Annual Pro Sale. View Details »

Style Guides: Why I love them

Susan Robertson
September 18, 2013

Style Guides: Why I love them

A talk given at RefreshPDX on how I came to love style guides and why I think they are an essential part of a site or application.

Susan Robertson

September 18, 2013
Tweet

Other Decks in Design

Transcript

  1. Style Guides:
    Why I love them
    susanjeanrobertson.com @susanjrobertson

    View Slide

  2. How I define style guide:
    ‣Not a brand guideline
    ‣A living document
    ‣Made with the site/application code
    ‣You could also call it a pattern library

    View Slide

  3. First Glimpse
    An Event Apart 2011 - Mailchimp
    http://www.flickr.com/photos/aarronwalter/5579386649/sizes/l/in/photostream/

    View Slide

  4. 24 Ways, Anna Debenham

    View Slide

  5. Starbucks Guide
    http://www.starbucks.com/static/reference/styleguide/

    View Slide

  6. Guides start popping up

    View Slide

  7. The Workflow - Waterfall

    View Slide

  8. VISUAL INVENTORY

    View Slide

  9. ASK

    View Slide

  10. BUILD

    View Slide

  11. MODULAR CODE

    View Slide

  12. DESIGNOVELOPMENT

    View Slide

  13. Benefits

    View Slide

  14. Reference for the whole team

    View Slide

  15. Code Benefits
    ‣Find inconsistencies early in the project
    ‣Cleaner HTML and CSS
    ‣Easier testing cross browser
    ‣Performance improvements from reusing code

    View Slide

  16. Code as a system
    Modular CSS become a system of building blocks

    View Slide

  17. Fast build outs

    View Slide

  18. Nice deliverable for client
    http://daverupert.com/2013/04/responsive-deliverables/

    View Slide

  19. Workflow - Agile

    View Slide

  20. Editorially - no style guide

    View Slide

  21. Because, this

    View Slide

  22. Create style guide to learn

    View Slide

  23. Changes as application does

    View Slide

  24. Common language

    View Slide

  25. Use to make prototypes

    View Slide

  26. Where I am at now

    View Slide

  27. Live guide
    [Open Browser for the live guide]

    View Slide

  28. Resources

    View Slide

  29. Anna’s Gimmebar
    https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides

    View Slide

  30. Anna’s roundup
    http://maban.co.uk/66

    View Slide

  31. South Tees Hospital
    http://southtees.nhs.uk/style-guide/

    View Slide

  32. Starbucks

    View Slide

  33. BBC Global Experience

    View Slide

  34. Boilerplate
    http://www.brettjankord.com/2013/03/07/style-guide-boilerplate/

    View Slide

  35. Automations tools
    ‣https://github.com/kneath/kss
    ‣https://github.com/trulia/hologram
    ‣https://github.com/filamentgroup/X-rayHTML

    View Slide

  36. When you have one.....

    View Slide

  37. Thank you
    susanjeanrobertson.com @susanjrobertson

    View Slide