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

Style Guides, Pattern Libraries, Design Systems and other amenities.

Cristiano Rastelli
September 08, 2016

Style Guides, Pattern Libraries, Design Systems and other amenities.

Style guides and component libraries are the new trend in front-end development.
Everyone is into "Atomic Design" and "Modular CSS" nowadays.
But how did we get to this “hype”, and why? What is a style guide, what is its value and where are the benefits of introducing one in a project? And are them useful only for the web, or can be employed by other platforms too?
I'll try to give an answer to all these questions in this presentation – directed to designers, web developers but also iOS/Android/Win developers – and I'll show how our Mobile Web team in Badoo has developed his first style guide and how is using it to catch bugs and create a shared pattern library.

Cristiano Rastelli

September 08, 2016
Tweet

More Decks by Cristiano Rastelli

Other Decks in Design

Transcript

  1. Style Guides, Pattern Libraries,
    Design Systems and other
    amenities.
    Cristiano Rastelli
    Mobile Web Team

    View Slide

  2. Hello!
    Cristiano Rastelli
    Front End / CSS developer at Badoo
    I like to work at the boundaries
    between different disciplines
    and competencies.
    I like to share experiences,
    knowledge and ideas.
    didoo.net / @areaweb

    View Slide

  3. 320 million users
    190 countries
    46 languages

    View Slide

  4. Everyone has a style guide!

    View Slide

  5. The Hype

    View Slide

  6. Websites
    styleguides.io

    View Slide

  7. Conferences
    clarityconf.com

    View Slide

  8. Slack Channels
    design-systems.slack.com

    View Slide

  9. Podcasts
    Style Guide Podcast by Anna Debenham & Brad Frost

    View Slide

  10. Newsletters
    designsystems.curated.co

    View Slide

  11. Tons of resources…
    Articles and blog posts
    Talks
    Slides / Presentations
    Videos / Transcripts
    Online courses
    Styleguides
    Learn from
    other people’s
    experiences

    View Slide

  12. Mainstream

    View Slide

  13. Where does all come from?

    View Slide

  14. Atomic Design
    Atomic Design - Brad Frost.com

    View Slide

  15. Nothing new
    New York City Transit Authority Graphics Standards Manual - 1970

    View Slide

  16. Nothing new
    The Making of Medium - teehan+lax

    View Slide

  17. View Slide

  18. Web Components

    I am a title



    View Slide

  19. The advent of React

    View Slide

  20. A common ground

    View Slide

  21. A common language
    “card”

    View Slide

  22. Anna Debenham
    24ways.org/2011/front-end-style-guides/

    View Slide

  23. Alla Kholmatova
    Responsive Day Out - 19th June 2015

    View Slide

  24. Purpose

    View Slide

  25. Why?

    View Slide

  26. Nomenclature

    View Slide

  27. Pattern Library
    This is a library of standardised UI patterns. They are the final designs, and
    can be delivered in the form of a repository of design files, or a symbol
    library/UI kit. It is the resource for designers to build from.
    Style Guide
    This is the documentation resource for the design system. Since the design
    system is purely code and assets, the style guide is a site to demonstrate
    the UI patterns with references to aid in implementation and usage.
    Design System
    The entirety of the standardised UI patterns, frameworks, assets, and
    documentation, as well as the processes and people involved. It is the
    ecosystem that drives and supports the unified evolution of the product(s).
    Definitions
    Clarifying our “Style Guide” Nomenclature - Nate Baldwin

    View Slide

  28. Definitions
    Stu Robson / Always Twisted

    View Slide

  29. Definitions

    View Slide

  30. Not only visual
    ↦ Content - Tone of voice - Vocabulary
    ↦ Accessibility - Usability
    ↦ Localisation - Internationalisation
    ↦ Motion - Animation
    ↦ Code guidelines/standards
    ↦ Technological stack

    View Slide

  31. One name to rule them all
    Brad Frost - Style Guide Best @ Beyond Tellerrand
    Brand identity
    design language
    voice and tone
    pattern library
    coding
    writing
    styleguide

    View Slide

  32. Benefits

    View Slide

  33. Multiple scopes
    ↦ Consistency
    ↦ Classification
    ↦ Documentation
    ↦ Design framework
    ↦ Marketing / Branding
    ↦ Testing
    ↦ Hiring

    View Slide

  34. From chaos to order
    Brad Frost - Style Guide Best @ Beyond Tellerrand

    View Slide

  35. Patterns

    View Slide

  36. Gestalt Principles of Design

    View Slide

  37. Velocity

    View Slide

  38. Scaling
    Team A
    Builds feature after feature
    velocity
    Team B
    Builds components, then features
    velocity
    (features)dev
    Time
    N
    dev=0
    ∑ (COMPONENTS)dev
    Time
    N
    dev=0
    ∑ (features)dev
    Time - TIMEre-use
    - TIMEno-test
    +

    View Slide

  39. Not only web

    View Slide

  40. Tokens

    View Slide

  41. Tokens

    View Slide

  42. Examples

    View Slide

  43. Keep in mind these!
    Consistency
    Classification
    Documentation
    Design framework
    Marketing / Branding
    Testing
    Hiring
    Content - Tone of voice
    Accessibility - Usability
    Localisation -
    Internationalisation
    Motion - Animation
    Code guidelines/standards
    Technological stack
    Granularity
    Purpose

    View Slide

  44. #mobileweb

    View Slide

  45. Our style guide at Badoo

    View Slide

  46. Today
    Collection of web components
    Increase reusability
    Reduce code duplication
    Documentation (kind of)
    Playground for refactoring / development
    Visual Regression Testing

    View Slide

  47. Interface inventory
    bradfrost.com/blog/post/interface-inventory/
    Building the UI for the new The Times website
    see also:

    View Slide

  48. Interface inventory
    alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone

    View Slide

  49. Interface inventory

    View Slide

  50. Visual Regression Testing

    View Slide

  51. Visual Regression Testing

    View Slide

  52. Visual Regression Testing

    View Slide

  53. Future
    Component library
    To share with designers as reference
    To share with desktop web (as package)
    Styleguide
    To document Badoo visual language
    To show how cool we are :)
    ‘Live’ documentation

    View Slide

  54. #famous

    View Slide

  55. Material Design
    material.google.com

    View Slide

  56. Lightning Design System
    www.lightningdesignsystem.com

    View Slide

  57. Atlassian
    design.atlassian.com/product

    View Slide

  58. Rizzo - Lonely Planet
    rizzo.lonelyplanet.com/styleguide/

    View Slide

  59. U.S. Web Design Standards
    standards.usa.gov

    View Slide

  60. Financial Times
    origami.ft.com

    View Slide

  61. Do Something
    forge.dosomething.org

    View Slide

  62. Future Learn
    www.futurelearn.com/pattern-library

    View Slide

  63. Marvel
    marvelapp.com/styleguide/

    View Slide

  64. #institutional

    View Slide

  65. GOV.UK
    govuk-elements.herokuapp.com

    View Slide

  66. BBC.CO.UK
    www.bbc.co.uk/gel/

    View Slide

  67. Sky
    skyglobal.github.io/web-toolkit/

    View Slide

  68. #special

    View Slide

  69. Mailchimp
    voiceandtone.com
    ux.mailchimp.com/patterns styleguide.mailchimp.com
    mailchimp.com/about/brand-assets

    View Slide

  70. GEL
    gel.westpacgroup.com.au

    View Slide

  71. FontShop
    www.fontshop.com/styleguide

    View Slide

  72. #simple

    View Slide

  73. Viljami Salminen
    viljamis.com/styleguide

    View Slide

  74. Clearleft
    clearleft.com/styleguide

    View Slide

  75. #tools

    View Slide

  76. Dropbox Scooter
    dropbox.github.io/scooter

    View Slide

  77. BuzzFeed Solid
    solid.buzzfeed.com www.buzzfeed.com/emmyf/buzzfeed-style-guide/

    View Slide

  78. #branding

    View Slide

  79. IBM
    www.ibm.com/design/language/

    View Slide

  80. WhatsApp
    www.whatsappbrand.com

    View Slide

  81. Uber
    brand.uber.com

    View Slide

  82. Conclusions

    View Slide

  83. Takeaway #1
    A design system impacts a whole company,

    not only its tech/dev teams.

    View Slide

  84. Takeaway #2
    Building a design system is a long process.
    So don’t build a style guide because is cool. 

    Do it if is useful & solves business problems.
    And while doing it, have clear in mind what
    are your objectives and top-level goals.

    View Slide

  85. Takeaway #3
    A style guide improves the communication
    between all the members of an organisation.
    It has to create a more cohesive user
    experience, encourage collaboration, and
    create efficiencies.
    A design system is made by artefacts, people,
    and products. Don’t forget the people.
    Brad Frost - Clarity Conference writeup

    View Slide

  86. That’s it.
    Any questions?
    Cristiano Rastelli
    Mobile Web Team

    View Slide

  87. Slides are available here:
    bit.ly/2cwaS3Y
    Blog:
    www.didoo.net
    Newsletter:
    rfl.didoo.net
    Twitter:
    @areaweb

    View Slide