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.

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