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

How to create a living style guide

Fiona Chan
March 28, 2013

How to create a living style guide

A short presentation around the steps to take to create a living style guide.

This was presented at Web Directions What Do You Know 2013.

Fiona Chan

March 28, 2013
Tweet

More Decks by Fiona Chan

Other Decks in Design

Transcript

  1. How to create a
    living style guide
    Fiona Chan
    @mobywhale

    View full-size slide

  2. Building website is like building a house

    View full-size slide

  3. Don’t build pages

    View full-size slide

  4. Build a system
    of components

    View full-size slide

  5. Why a style guide?
    • Consistency in design and code
    • Reference for the whole team
    • Speed up development time

    View full-size slide

  6. How to start?

    View full-size slide

  7. 1. Analyse your site

    View full-size slide

  8. Common components
    • Typography
    • Links
    • Lists
    • Boxes and background colours
    • Buttons
    • Forms

    View full-size slide

  9. Typography Links
    Lists Boxes

    View full-size slide

  10. 2. Create your
    components

    View full-size slide

  11. Components folder
    list.handlebars
    _listInline.scss

    View full-size slide

  12. Component style guide

    View full-size slide

  13. 3. Maintain it

    View full-size slide

  14. Extra resources
    • Front-end style guides
    http://24ways.org/2011/front-end-style-guides/
    • Front-end style guide collection
    https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides
    • Making Front-end Development a Team Sport
    http://cognition.happycog.com/article/making-front-end-development-a-team-sport

    View full-size slide