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

Style Guides, Pattern Libraries, Design Systems and other amenities.

Cristiano Rastelli
September 08, 2016
Design
11
3.7k

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
610
Atomic Design, Design Systems and React. Cool, but...
didoo
8
2.1k
From Zero to Cosmos
didoo
6
6.1k
Let There Be Peace On CSS
didoo
42
21k
Interaction Design Above the Level of a Single Man
didoo
0
130
What future we want for our Software Industry?
didoo
9
810
The data we should not miss
didoo
0
120
Slides are easy
didoo
2
250
Adaptive, Responsive, Mobile. A liquid web.
didoo
0
73

Other Decks in Design

See All in Design
decksh object reference
ajstarks
2
910
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
190
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
180
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1k
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
310
Product-Writing
aguringo
6
2.8k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
170
231206_Book-launch-event_kato
hjmkth
2
1.2k
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
7.8k

Featured

See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
The Language of Interfaces
destraynor
151
23k
Ruby is Unlike a Banana
tanoku
96
10k
GitHub's CSS Performance
jonrohan
1024
450k
Optimizing for Happiness
mojombo
370
69k
Web development in the modern age
philhawksworth
202
10k
KATA
mclloyd
14
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k

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