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
140
Slides are easy
didoo
2
300
Adaptive, Responsive, Mobile. A liquid web.
didoo
0
95

Other Decks in Design

See All in Design
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
490
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.1k
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
360
新しいemoji😄のアイデアを Unicodeが募集中‼️🏃‍♀️💨💨💨 傾向を学んでみんな提案しよう💪
oguemon
2
690
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.8k
1年目のクリエイターがつくりあげた！採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
200
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
300
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
580
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
370
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
890
ZOZO CDO Office Design
zozodevelopers
PRO
1
450
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
290

Featured

See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Designing Experiences People Love
moore
138
23k
Unsuck your backbone
ammeep
668
57k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing the Hi-DPI Web
ddemaree
280
34k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
The World Runs on Bad Software
bkeepers
PRO
65
11k
A Tale of Four Properties
chriscoyier
156
23k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k

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