Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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.

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

  1. 1. Style Guides,Pattern Libraries, Design Systems and other amenities. Cristiano Rastelli Mobile Web Team
  2. 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. 3. 320 million users 190 countries 46 languages
  4. 4. Everyone has a style guide!
  5. 5. The Hype
  6. 6. Websites styleguides.io
  7. 7. Conferences clarityconf.com
  8. 8. Slack Channels design-systems.slack.com
  9. 9. Podcasts Style Guide Podcast by Anna Debenham & Brad Frost
  10. 10. Newsletters designsystems.curated.co
  11. 11. Tons of resources… Articles and blog posts Talks Slides / Presentations Videos / Transcripts Online courses Styleguides Learn from other people’s experiences
  12. 12. Mainstream
  13. 13. Where does all come from?
  14. 14. Atomic Design Atomic Design - Brad Frost.com
  15. 15. Nothing new New York City Transit Authority Graphics Standards Manual - 1970
  16. 16. Nothing new The Making of Medium - teehan+lax
  17. 17. Web Components <body> <h1>I am a title</h1> <my-component theme=“dark”/> <another-component/> </body>
  18. 18. The advent of React
  19. 19. A common ground
  20. 20. A common language “card”
  21. 21. Anna Debenham 24ways.org/2011/front-end-style-guides/
  22. 22. Alla Kholmatova Responsive Day Out - 19th June 2015
  23. 23. Purpose
  24. 24. Why?
  25. 25. Nomenclature
  26. 26. 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
  27. 27. Definitions Stu Robson / Always Twisted
  28. 28. Definitions
  29. 29. Not only visual ↦ Content - Tone of voice - Vocabulary ↦ Accessibility - Usability ↦ Localisation - Internationalisation ↦ Motion - Animation ↦ Code guidelines/standards ↦ Technological stack
  30. 30. 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
  31. 31. Benefits
  32. 32. Multiple scopes ↦ Consistency ↦ Classification ↦ Documentation ↦ Design framework ↦ Marketing / Branding ↦ Testing ↦ Hiring
  33. 33. From chaos to order Brad Frost - Style Guide Best @ Beyond Tellerrand
  34. 34. Patterns
  35. 35. Gestalt Principles of Design
  36. 36. Velocity
  37. 37. 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 +
  38. 38. Notonlyweb
  39. 39. Tokens
  40. 40. Tokens
  41. 41. Examples
  42. 42. 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
  43. 43. #mobileweb
  44. 44. Our style guide at Badoo
  45. 45. Today Collection of web components Increase reusability Reduce code duplication Documentation (kind of) Playground for refactoring / development Visual Regression Testing
  46. 46. Interface inventory bradfrost.com/blog/post/interface-inventory/ Building the UI for the new The Times website see also:
  47. 47. Interface inventory alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone
  48. 48. Interface inventory
  49. 49. Visual Regression Testing
  50. 50. Visual Regression Testing
  51. 51. Visual Regression Testing
  52. 52. 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
  53. 53. #famous
  54. 54. Material Design material.google.com
  55. 55. Lightning Design System www.lightningdesignsystem.com
  56. 56. Atlassian design.atlassian.com/product
  57. 57. Rizzo - Lonely Planet rizzo.lonelyplanet.com/styleguide/
  58. 58. U.S. Web Design Standards standards.usa.gov
  59. 59. Financial Times origami.ft.com
  60. 60. Do Something forge.dosomething.org
  61. 61. Future Learn www.futurelearn.com/pattern-library
  62. 62. Marvel marvelapp.com/styleguide/
  63. 63. #institutional
  64. 64. GOV.UK govuk-elements.herokuapp.com
  65. 65. BBC.CO.UK www.bbc.co.uk/gel/
  66. 66. Sky skyglobal.github.io/web-toolkit/
  67. 67. #special
  68. 68. Mailchimp voiceandtone.com ux.mailchimp.com/patterns styleguide.mailchimp.com mailchimp.com/about/brand-assets
  69. 69. GEL gel.westpacgroup.com.au
  70. 70. FontShop www.fontshop.com/styleguide
  71. 71. #simple
  72. 72. Viljami Salminen viljamis.com/styleguide
  73. 73. Clearleft clearleft.com/styleguide
  74. 74. #tools
  75. 75. Dropbox Scooter dropbox.github.io/scooter
  76. 76. BuzzFeed Solid solid.buzzfeed.com www.buzzfeed.com/emmyf/buzzfeed-style-guide/
  77. 77. #branding
  78. 78. IBM www.ibm.com/design/language/
  79. 79. WhatsApp www.whatsappbrand.com
  80. 80. Uber brand.uber.com
  81. 81. Conclusions
  82. 82. Takeaway #1 A design system impacts a whole company,
 not only its tech/dev teams.
  83. 83. 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.
  84. 84. 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
  85. 85. That’s it. Any questions? Cristiano Rastelli Mobile Web Team
  86. 86. Slides are available here: bit.ly/2cwaS3Y Blog: www.didoo.net Newsletter: rfl.didoo.net Twitter: @areaweb

×