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

Style Guides, Pattern Libraries, Design Systems...

Avatar for Cristiano Rastelli Cristiano Rastelli
September 08, 2016
Design
11
4k

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.
Avatar for Cristiano Rastelli

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
Avatar for Cristiano Rastelli didoo
3
660
Atomic Design, Design Systems and React. Cool, but...
Avatar for Cristiano Rastelli didoo
8
2.4k
From Zero to Cosmos
Avatar for Cristiano Rastelli didoo
6
6.6k
Let There Be Peace On CSS
Avatar for Cristiano Rastelli didoo
43
23k
Interaction Design Above the Level of a Single Man
Avatar for Cristiano Rastelli didoo
0
150
What future we want for our Software Industry?
Avatar for Cristiano Rastelli didoo
9
950
The data we should not miss
Avatar for Cristiano Rastelli didoo
0
170
Slides are easy
Avatar for Cristiano Rastelli didoo
2
350
Adaptive, Responsive, Mobile. A liquid web.
Avatar for Cristiano Rastelli didoo
0
110

Other Decks in Design

See All in Design
今日から意識できるアクセシビリティ
Avatar for fumiko fumiko
0
220
PF_濵村ひろみ_202503
Avatar for 濱村ひろみ maru_design78
0
150
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
Avatar for Takehiro KAWASE tkhr_kws
3
330
苦労が多かった多言語対応をFigmaで楽にした話
Avatar for Pioneer pioneer_devrel
PRO
0
210
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
Avatar for r.aoki u_ri_ta
2
190
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
Avatar for 株式会社カミナシ kaminashi
2
1.5k
私とデザインの10年
Avatar for なつ iflection
0
110
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
Avatar for Akiko Kurono cremacrema
7
5.4k
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
Avatar for kkaru kkaru
0
280
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
Avatar for Masahiko Sakakibara rdlabo
1
120
オリジナルのデザイン地図を作ってみた！〜OpenMapTilesとMaputnikを活用した地図スタイル〜
Avatar for Hajime Kato hjmkth
1
490
デザイナーとPMの両ロール_３つのポイント
Avatar for toy toy1618
1
290

Featured

See All Featured
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
46
14k
Done Done
Avatar for chrislema chrislema
184
16k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
It's Worth the Effort
Avatar for 3n 3n
184
28k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.5k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
40
7.3k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k

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