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

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. Web Components <body> <h1>I am a title</h1> <my-component theme=“dark”/> <another-component/> </body>

18. The advent of React

19. A common ground

20. A common language “card”

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

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

23. Purpose

24. Why?

25. Nomenclature

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. Deﬁnitions Stu Robson / Always Twisted

28. Deﬁnitions

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

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. Beneﬁts

32. Multiple scopes ↦ Consistency ↦ Classiﬁcation ↦ Documentation ↦ Design framework ↦ Marketing / Branding ↦ Testing ↦ Hiring

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

34. Patterns

35. Gestalt Principles of Design

36. Velocity

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. Notonlyweb

39. Tokens

40. Tokens

41. Examples

42. Keep in mind these! Consistency Classiﬁcation 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. #mobileweb

44. Our style guide at Badoo

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

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

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

48. Interface inventory

49. Visual Regression Testing

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

54. Material Design material.google.com

55. Lightning Design System www.lightningdesignsystem.com

56. Atlassian design.atlassian.com/product

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

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

59. Financial Times origami.ft.com

60. Do Something forge.dosomething.org

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

62. Marvel marvelapp.com/styleguide/

63. #institutional

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

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

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

67. #special

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

69. GEL gel.westpacgroup.com.au

70. FontShop www.fontshop.com/styleguide

71. #simple

72. Viljami Salminen viljamis.com/styleguide

73. Clearleft clearleft.com/styleguide

74. #tools

75. Dropbox Scooter dropbox.github.io/scooter

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

77. #branding

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

79. WhatsApp www.whatsappbrand.com

80. Uber brand.uber.com

81. Conclusions

82. Takeaway #1 A design system impacts a whole company,  not only its tech/dev teams.

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. 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 efﬁciencies. A design system is made by artefacts, people, and products. Don’t forget the people. Brad Frost - Clarity Conference writeup

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

86. Slides are available here: bit.ly/2cwaS3Y Blog: www.didoo.net Newsletter: rﬂ.didoo.net Twitter: @areaweb