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

Style Guides, Pattern Libraries and Code Standards

Anna Debenham
September 20, 2015

Style Guides, Pattern Libraries and Code Standards

After interviewing a dozen people with Brad Frost for their podcast on Style Guides for the web, Anna has collated all their findings for this talk on the different kinds that are out there, how they're built, what works (and what doesn't), and what makes them such a useful tool.

She'll give you a tour of some style guides built by companies with a range of different needs and requirements, and you'll learn how to build your own using a range of possible technologies.

Most importantly, she'll show you how to make sure they don't get forgotten at the end of the project, and ways that it can be kept up to date as living documentation well after a site has gone live.

Anna Debenham

September 20, 2015
Tweet

More Decks by Anna Debenham

Other Decks in Technology

Transcript

  1. Style Guides,
    Pattern Libraries and
    Code Standards
    @anna_debenham
    Front-End Developer

    View full-size slide

  2. @anna_debenham
    Front-End Developer
    Style Guides,
    Pattern Libraries and
    Code Standards

    View full-size slide

  3. Susan Robertson
    on Editorially’s Style Guide
    “…all that historical mileage is documented so
    that everyone can see why they're doing it the
    way they're doing it and all the things they've
    thought about to get there.”

    View full-size slide

  4. Types of Style Guide

    View full-size slide

  5. Branding/Identity Guidelines
    Penguin Group

    View full-size slide

  6. Print Guidelines
    NHS

    View full-size slide

  7. http://simple.wikipedia.org/wiki/Defibrillator

    View full-size slide

  8. Content/editorial guidelines
    Mailchimp

    View full-size slide

  9. Coding Standards
    GitHub

    View full-size slide

  10. Front-end style guides
    Yelp

    View full-size slide

  11. One deliverable to
    rule them all

    View full-size slide

  12. Exploration Build
    Design
    Interface Inventory
    Brad Frost’s
    “…a comprehensive collection of the bits and pieces that
    make up your interface.”

    View full-size slide

  13. Brad Frost
    • Global elements
    • Navigation
    • Image types
    • Icons
    • Forms
    • Buttons
    • Headings
    • Media Objects
    • Lists
    • Interactive Components
    • Media
    • 3rd Party Widgets
    • Advertising
    • Messaging
    • Colors
    • Animation

    View full-size slide

  14. Exploration Build
    Design
    Style Tiles
    Samantha Warren’s
    “…a way to facilitate a conversation around options
    without necessarily designing a picture of what their
    website would look like.”

    View full-size slide

  15. flickr.com/photos/woordenaar/14308809322

    View full-size slide

  16. The Examiner

    View full-size slide

  17. The Examiner

    View full-size slide

  18. The Examiner

    View full-size slide

  19. The Examiner

    View full-size slide

  20. The Examiner

    View full-size slide

  21. The Examiner

    View full-size slide

  22. The Examiner

    View full-size slide

  23. The Examiner, Samantha Warren

    View full-size slide

  24. Exploration Build
    Design
    Element Collages
    Dan Mall’s
    “…a collage of elements that some of those pieces I think
    captured their brand really well… we were able to have a
    good conversation about things like that.”

    View full-size slide

  25. Reading Is Fundamental

    View full-size slide

  26. Dan Mall
    on Radio Free Europe
    “…they were really interested in how their site
    looked across different devices and different
    screen sizes and just different ways 

    to access it…”

    View full-size slide

  27. Code for America (Clearleft)

    View full-size slide

  28. Code for America (Clearleft)

    View full-size slide

  29. Code for America (Clearleft)

    View full-size slide

  30. Exploration Build
    Design
    Style Prototype
    Jeremy Loyd’s
    “…They can speed up site production, and they give a
    client an exciting early look at design elements.”

    View full-size slide

  31. sparkbox.github.io/style-prototype

    View full-size slide

  32. Jeremy Loyd
    on Style Prototypes
    “…we would typically try to create a Style
    Prototype when site planning is still in the
    works.”

    View full-size slide

  33. Exploration Build
    Design
    CSS Guidelines
    Harry Roberts’s
    “…all developers should strive for a degree of
    standardisation in their code.”

    View full-size slide

  34. cssguidelin.es

    View full-size slide

  35. cssguidelin.es

    View full-size slide

  36. cssguidelin.es
    Instruction

    View full-size slide

  37. cssguidelin.es
    Instruction reason

    View full-size slide

  38. cssguidelin.es
    Evidence
    Instruction reason

    View full-size slide

  39. Exploration Build
    Design
    Pattern Primer
    Jeremy Keith’s
    “…This idea of a pattern library has definitely been, I'd
    say, the most important development when it comes to
    front end deliverables.”

    View full-size slide

  40. Exploration Build
    Design
    Pattern Primer
    Jeremy Keith’s
    “…This idea of a pattern library has definitely been, I'd
    say, the most important development when it comes to
    front end deliverables.”

    View full-size slide

  41. Front-end Style Guide
    Pattern Library/Primer
    Content/Editorial Guidelines Code Standards

    View full-size slide

  42. Natalie Downe’s Pattern Portfolio

    View full-size slide

  43. Natalie Downe’s Pattern Portfolio

    View full-size slide

  44. Jeremy Keith’s Pattern Primer

    View full-size slide

  45. Jeremy Keith
    on Clearleft’s Pattern Libraries
    “…We’ll also give you some pages, but these
    pages, they're not the deliverable; these pages
    are just examples of the pattern library in
    action.”

    View full-size slide

  46. What they achieve

    View full-size slide

  47. “…they publish 150 different sites over sixty
    countries… so a strong style guide… was going
    to be really crucial to them.”
    Tackling complexity
    Dan Mall
    on Radio Free Europe

    View full-size slide

  48. “QA uses it a lot… the front-end developers and
    the engineering teams all refer to it on a regular
    basis so it's actually really kind of crucial to our
    entire workflow…”
    Quality Assurance
    Federico Holgado
    Mailchimp’s Style Guide

    View full-size slide

  49. “I think when you're iterating quickly on an
    application… you abandon a module for
    something totally different… so I was able to
    clean a lot of that up…”
    Reduced Redundancy
    Susan Robertson
    Built Editorially’s Style Guide

    View full-size slide

  50. Chris Coyier’s CodePen

    View full-size slide

  51. Chris Coyier’s CodePen
    “You think you just have a handful of button styles.
    Then you take an inventory.”

    View full-size slide

  52. “There's not that extra step of getting approvals
    for a design comp and then having to come
    back and go, "Yeah, so I know we showed X in
    the design comp but it really came out kind of
    Y.”
    Realistic Representations
    Dave Olsen
    worked on Pattern Lab

    View full-size slide

  53. “Marriott… is a huge organisation with tons of
    digital teams and they actually have a team of
    four or five people who are paid to maintain
    their standards…”
    Maintainability
    Susan Robertson
    Built Editorially’s Style Guide

    View full-size slide

  54. “…some of these people have been jailed or
    have been hanged just for accessing their
    website. So we can't have a page loading in
    thirty seconds; that just can't fly.”
    Performance Budget
    Dan Mall
    on Radio Free Europe

    View full-size slide

  55. Lonely Planet

    View full-size slide

  56. “…in twenty minutes, we had built a system that
    was responsive; it looked great on mobile and it
    was nice to look at.”
    Tool for Rapid Prototyping
    Federico Holgado
    on Mailchimp’s Style Guide

    View full-size slide

  57. china.org.cn/china/2015-03/17/content_35077927.htm

    View full-size slide

  58. Dan Mall
    on Element Collages
    “Don't rely heavily on a deliverable to solve this
    for you: rely on your listening skills
    to solve it for you.”

    View full-size slide

  59. Jina
    worked on Salesforce’s style guide
    “Putting it off to the end or treating it as a
    separate thing is just asking for it to just sort of
    die on the vine or just become outdated and
    obsolete.”

    View full-size slide

  60. A List Apart

    View full-size slide

  61. How to make one

    View full-size slide

  62. Code for America

    View full-size slide

  63. Code for America

    View full-size slide

  64. Code for America

    View full-size slide

  65. Code for America

    View full-size slide

  66. Code for America

    View full-size slide

  67. Code for America

    View full-size slide

  68. Code for America

    View full-size slide

  69. /styles
    accordion.scss
    header.scss
    buttons.scss

    header.html
    buttons.html
    accordion.html
    /patterns

    HTML SCSS
    SCSS
    SCSS
    SCSS
    HTML
    HTML
    HTML

    View full-size slide

  70. main.css
    /styles

    /patterns

    CSS
    HTML SCSS
    SCSS
    SCSS
    SCSS
    HTML
    HTML
    HTML
    header.html
    buttons.html
    accordion.html accordion.scss
    header.scss
    buttons.scss

    View full-size slide

  71. main.css
    /styles

    /patterns

    CSS
    HTML SCSS
    SCSS
    SCSS
    SCSS
    HTML
    HTML
    HTML
    header.html
    buttons.html
    accordion.html
    CSS styleguide.css
    +
    accordion.scss
    header.scss
    buttons.scss

    View full-size slide

  72. /patterns

    HTML
    HTML
    HTML
    HTML
    click me click me
    item 1
    item 2
    item 3
    Header
    header.html
    buttons.html
    accordion.html
    click me click me
    click me click me

    View full-size slide

  73. click me click me
    item 1
    item 2
    item 3
    Header
    click me click me
    click me click me
    AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQ

    View full-size slide

  74. click me click me
    Header
    click me click me
    click me click me
    AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQ
    Header
    Header
    Header
    Header

    View full-size slide

  75. item 1
    item 2
    item 3
    Header
    click me click me
    click me click me
    click me click me

    View full-size slide

  76. style.maban.co.uk

    View full-size slide

  77. patternlab.io

    View full-size slide

  78. /* 


    Your standard form button.


    :hover - Highlights when hovering.

    :disabled - Dims the button when disabled.

    .primary - Indicates button is the primary
    action.

    .smaller - A smaller button


    Styleguide 1.1 


    */
    button { … }

    button.primary,

    button.primary:hover { … }

    button.smaller { … }

    button:hover { … }

    button:disabled { … }
    KSS

    View full-size slide

  79. What to include

    View full-size slide

  80. Basic Elements
    Mapbox

    View full-size slide

  81. Basic Elements
    Paul Lloyd’s Barebones

    View full-size slide

  82. “…I fall into this trap all the time… I want to
    deliver everything.”
    Patterns
    Dan Mall
    worked on Radio Free Europe’s style guide

    View full-size slide

  83. flickr.com/photos/75905404@N00/7126147125

    View full-size slide

  84. Markup
    Salesforce

    View full-size slide

  85. Markup
    Salesforce

    View full-size slide

  86. Markup
    South Tees Hospital

    View full-size slide

  87. Markup
    South Tees Hospital

    View full-size slide

  88. Styles
    Salesforce

    View full-size slide

  89. Styles
    Salesforce

    View full-size slide

  90. Extremes
    Code for America

    View full-size slide

  91. Extremes
    Code for America

    View full-size slide

  92. Extremes
    Code for America

    View full-size slide

  93. Notes
    Wellcome Trust Intranet

    View full-size slide

  94. Notes
    Wellcome Trust Intranet

    View full-size slide

  95. Notes
    Wellcome Trust Intranet

    View full-size slide

  96. Notes
    Wellcome Trust Intranet

    View full-size slide

  97. Notes
    Wellcome Trust Intranet

    View full-size slide

  98. Colour Swatches
    Code for America

    View full-size slide

  99. Colour Swatches
    Code for America

    View full-size slide

  100. Grids
    Mailchimp

    View full-size slide

  101. Grids
    Starbucks

    View full-size slide

  102. Grids
    Starbucks

    View full-size slide

  103. Grids
    Starbucks

    View full-size slide

  104. Interaction
    Salesforce

    View full-size slide

  105. Interaction
    Google’s Material Design

    View full-size slide

  106. Localisation
    University of Surrey

    View full-size slide

  107. Localisation
    University of Surrey

    View full-size slide

  108. Localisation
    University of Surrey

    View full-size slide

  109. Navigation
    Code for America

    View full-size slide

  110. Navigation
    Code for America

    View full-size slide

  111. Living style guides

    View full-size slide

  112. Jina
    https://twitter.com/jina/status/638850299172667392
    “Zombie style guides — style guides that aren't
    maintained and part of your process.

    they die and rot.

    they eat your brains.”

    View full-size slide

  113. Rizzo, by Lonely Planet

    View full-size slide

  114. Lonely Planet

    View full-size slide

  115. Lonely Planet

    View full-size slide

  116. Ian Feather
    on Lonely Planet’s Style Guide
    “I've made two style guides before this one at
    Lonely Planet, both of which went out of date
    very rapidly and were never used ever again.
    This one doesn't go out of date and it means we
    don't need to actually maintain it.”

    View full-size slide

  117. “…you guys are going to live with it for a month
    or two and then we're going to come back and
    we're going to assess what worked and what
    didn't and help you fix it.”
    Revisit
    Dan Mall
    worked on Radio Free Europe’s style guide

    View full-size slide

  118. “…sharing was one part and the other part was
    we really just needed to keep ourselves
    honest…”
    Make it public
    Federico Holgado
    on Mailchimp’s Style Guide

    View full-size slide

  119. “…when I saw it I thought it was beautiful and
    it's why I wanted to join this team.”
    Make it public
    Jina
    on Salesforce’s Style Guide

    View full-size slide

  120. “…we have had people apply who've known
    about Rizzo, who've known about the style
    guide, and that's been a really nice thing…”
    Make it public
    Ian Feather
    on Lonely Planet’s Style Guide

    View full-size slide

  121. “I think our standards for what a style guide
    needs to look like are based on all the ones that
    are public and all the ones that are public have
    designers behind them who wouldn't let them
    be public unless they were beautiful!”
    It doesn’t have to be pretty
    Susan Robertson
    built Editorially’s style guide

    View full-size slide

  122. styleguides.io
    Thanks for listening!
    £2
    podcast and
    transcripts
    e-book
    300+ resources

    View full-size slide

  123. styleguides.io
    Thanks for listening!
    £2
    podcast and
    transcripts
    e-book
    300+ resources

    View full-size slide