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. 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
  2. 11.

    Tons of resources… Articles and blog posts Talks Slides /

    Presentations Videos / Transcripts Online courses Styleguides Learn from other people’s experiences
  3. 17.
  4. 24.
  5. 25.
  6. 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
  7. 30.

    Not only visual ↦ Content - Tone of voice -

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

    Multiple scopes ↦ Consistency ↦ Classification ↦ Documentation ↦ Design

    framework ↦ Marketing / Branding ↦ Testing ↦ Hiring
  11. 35.
  12. 37.
  13. 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 +
  14. 40.
  15. 41.
  16. 42.
  17. 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
  18. 46.

    Today Collection of web components Increase reusability Reduce code duplication

    Documentation (kind of) Playground for refactoring / development Visual Regression Testing
  19. 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
  20. 54.
  21. 68.
  22. 72.
  23. 75.
  24. 78.
  25. 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.
  26. 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