Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Style Guides, Pattern Libraries, Design Systems...

Cristiano Rastelli
September 08, 2016
Design
11
3.9k

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.

Cristiano Rastelli

September 08, 2016
Tweet

More Decks by Cristiano Rastelli

See All by Cristiano Rastelli
From zero to Cosmos: a journey to a multi-platform design system at Badoo
didoo
3
640
Atomic Design, Design Systems and React. Cool, but...
didoo
8
2.3k
From Zero to Cosmos
didoo
6
6.4k
Let There Be Peace On CSS
didoo
43
23k
Interaction Design Above the Level of a Single Man
didoo
0
130
What future we want for our Software Industry?
didoo
9
910
The data we should not miss
didoo
0
150
Slides are easy
didoo
2
310
Adaptive, Responsive, Mobile. A liquid web.
didoo
0
98

Other Decks in Design

See All in Design
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.5k
ZKK_001.pdf
nicholaspegu
0
1.4k
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
takanorip
5
720
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
510
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
210
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
2.6k
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
2
2.6k
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
610
Personal Story Sequence - Vendetta(WIP)
elrns88
0
340
東急URBAN HACKSのデザイナーって何やってるの？ 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
200
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
610
portfolio
amitnk
1
160

Featured

See All Featured
Facilitating Awesome Meetings
lara
50
6.1k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Building Applications with DynamoDB
mza
91
6.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Optimizing for Happiness
mojombo
376
70k
Why Our Code Smells
bkeepers
PRO
335
57k
Practical Orchestrator
shlominoach
186
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Making Projects Easy
brettharned
116
5.9k
Build your cross-platform service in a week with App Engine
jlugia
229
18k

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