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

A34bc430e87a74eba5d92719ea92cfdc?s=47 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.

A34bc430e87a74eba5d92719ea92cfdc?s=128

Cristiano Rastelli

September 08, 2016
Tweet

Transcript

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

    Rastelli Mobile Web Team
  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
  3. 320 million users 190 countries 46 languages

  4. Everyone has a style guide!

  5. The Hype

  6. Websites styleguides.io

  7. Conferences clarityconf.com

  8. Slack Channels design-systems.slack.com

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

  10. Newsletters designsystems.curated.co

  11. Tons of resources… Articles and blog posts Talks Slides /

    Presentations Videos / Transcripts Online courses Styleguides Learn from other people’s experiences
  12. Mainstream

  13. Where does all come from?

  14. Atomic Design Atomic Design - Brad Frost.com

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

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

  17. None
  18. Web Components <body> <h1>I am a title</h1> <my-component theme=“dark”/> <another-component/>

    </body>
  19. The advent of React

  20. A common ground

  21. A common language “card”

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

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

  24. Purpose

  25. Why?

  26. Nomenclature

  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
  28. Definitions Stu Robson / Always Twisted

  29. Definitions

  30. Not only visual ↦ Content - Tone of voice -

    Vocabulary ↦ Accessibility - Usability ↦ Localisation - Internationalisation ↦ Motion - Animation ↦ Code guidelines/standards ↦ Technological stack
  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
  32. Benefits

  33. Multiple scopes ↦ Consistency ↦ Classification ↦ Documentation ↦ Design

    framework ↦ Marketing / Branding ↦ Testing ↦ Hiring
  34. From chaos to order Brad Frost - Style Guide Best

    @ Beyond Tellerrand
  35. Patterns

  36. Gestalt Principles of Design

  37. Velocity

  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 +
  39. Not only web

  40. Tokens

  41. Tokens

  42. Examples

  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
  44. #mobileweb

  45. Our style guide at Badoo

  46. Today Collection of web components Increase reusability Reduce code duplication

    Documentation (kind of) Playground for refactoring / development Visual Regression Testing
  47. Interface inventory bradfrost.com/blog/post/interface-inventory/ Building the UI for the new The

    Times website see also:
  48. Interface inventory alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone

  49. Interface inventory

  50. Visual Regression Testing

  51. Visual Regression Testing

  52. Visual Regression Testing

  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
  54. #famous

  55. Material Design material.google.com

  56. Lightning Design System www.lightningdesignsystem.com

  57. Atlassian design.atlassian.com/product

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

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

  60. Financial Times origami.ft.com

  61. Do Something forge.dosomething.org

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

  63. Marvel marvelapp.com/styleguide/

  64. #institutional

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

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

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

  68. #special

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

  70. GEL gel.westpacgroup.com.au

  71. FontShop www.fontshop.com/styleguide

  72. #simple

  73. Viljami Salminen viljamis.com/styleguide

  74. Clearleft clearleft.com/styleguide

  75. #tools

  76. Dropbox Scooter dropbox.github.io/scooter

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

  78. #branding

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

  80. WhatsApp www.whatsappbrand.com

  81. Uber brand.uber.com

  82. Conclusions

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

    only its tech/dev teams.
  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.
  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
  86. That’s it. Any questions? Cristiano Rastelli Mobile Web Team

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

    @areaweb