MOBILE WEB TEAM Cristiano Rastelli didoo.net / @areaweb

What we are going to talk about i. Atomic Design ii. Design Systems iii. React iv. Cosmos v. But… vi. Conclusions

No content

Cristiano Rastelli didoo.net / @areaweb Mobile Web Team

team.badoo.com

webdeldn.rocks codemotionworld.com

No content

Atomic Design by Brad Frost http://atomicdesign.bradfrost.com

The book about Atomic Design http://atomicdesign.bradfrost.com

“Atomic” approach to UI design

Our Sketch Design Library in Badoo

(which is not completely new) www.teehanlax.com/story/medium/

Atomic Design in one GIF

No content

Components http://atomicdesign.bradfrost.com ATOM MOLECULE ORGANISM TEMPLATE PAGE

Component Library LIBRARY COMPONENTS PAGE / APP https://medium.com/@wolframnagel/content-design-and-ui-mapping-in-a-nutshell-7dce5634afff

A design system is like a cake… People & Process Documentation UI Components

It’s a complex system! Design System Processes Components Dev Standards UI Presentation Layer Web Native Documentation Style Guide Voice & Tone Testing Content Strategy Design Principles Brand Visual Design Language Design Assets UI Kit Platforms https://blog.producthive.org/anatomy-of-a-design-system-7a6b0677bf5 DESIGN SYSTEM

The golden definition medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935 “A style guide is an artifact of a design
 process. A design system is a living,
 funded product with a roadmap
 and backlog, serving an ecosystem ” design system serving an ecosystem product Nathan Curtis

Companies with a Design System ACL - Airbnb - Alberta Government - Altinn - Ant Financial - Appear Here - Atlassian - Audi - Auth0 - Automattic/WordPress - Badoo - British Airways - Barnard Levit - Barricade - BBC - Bookatable - Bristol City Council - Buffer - Buzzfeed - CA Technologies - Carnegie Mellon - Channel 4 - City of Philadelphia - Clearleft - CloudFlare - CMS.gov - Co-Op - Code For America - DC Comics - Dell - Disqus - DoSomething.org - Dropbox - Drupal - Dubizzle - Duolingo - eBay - Editorially - edX - Envato - Estonia - Eurostar GLU - Facebook - Financial Times - Fontshop - Frontify - FutureLearn - GE Digital - GitHub - Google - GOV.uk - Greenpeace - Hailo - Harmony - Healthcare.gov - Help Scout - Heroku - Homify - HP Enterprise - IBM - Instacart - Khan Academy - Lasse Diercks - Liferay - Lonely Planet - Lost My Name - Mailchimp - Mapbox - Marvel - Mass.gov - Microsoft Office - Mixpanel - Money Advice Service - Morningstar - Mozilla/Firefox - NASA - National Geographic - National Instruments - Next - Nordnet - OpenTable - Oracle - Ordnance Survey - Pega Systems - Perch - Pivotal - Pluralsight - Priceline - Quicken Loans - Rackspace - Relais & Châteaux - Royal Canin - Salesforce - SAP - Seek - Shopify - Sky - Skype - Skyscanner - Snyk - South Tees Hospital - Spotify - Starbucks - Swiss Confederation - Texas State - The Guardian - The Times - ThermoFisher - ThinkUp - Time Warner Cable - Tourism Whistler - Tradeshift - Trello - Tuts+ - U.S. Design Standards - Uber - Ubuntu - University of Edinburgh - University of Manchester - University of Oxford - USAJobs - Ushahidi - uSwitch - VMware - Walmart - Weight Watchers - West Virginia University - Westpac GEL - WeWork - WhatsApp - Winstrap - WooCommerce - Yelp - 18F U.S. …and many, many, many more! Badoo

The benefits of a design system consistent/cohesive design language USERS alignment of processes DESIGN & ENGINEERING efficiency PRODUCT DESIGN & DEVELOPMENT living documentation VISUAL & TECHNICAL communication/collaboration ENTIRE COMPANY marketing/branding/hiring PR & COMMUNITIES

That’s how you feel…

To know more… Style Guides, Pattern Libraries, Design Systems and other amenities. Cristiano Rastelli Mobile Web Team https://speakerdeck.com/didoo/style-guides-pattern-libraries-design-systems-and-other-amenities

No content

I am a title

Web “Components”

I am a title

Web “Components” COMPOSITION

A common ground

A common language “card”

The advent of React

Predominantly React React No frameworks Vanilla Multiple jQuery Angular Vue Other https://adele.uxpin.com/

To know more… https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660

No content

Demo

No content

No content

Codebase

Design Tokens { "global": { "type": "token", "category": "bricks" }, "props": { "TOKEN_BRICK_BORDER_RADIUS_CIRCLE": { "value": "50%" }, "TOKEN_BRICK_BORDER_RADIUS_SQUARED": { "value": "11.4%" } } }

React

CSS +

Folders structure DESIGN TOKENS (JSON) UI COMPONENTS (React) STYLE GUIDE
 (React Web App)

Things to notice React • we generally have only pure components (this is a UI library) • we split components is sub-components (our files are generally quite small, and if they’re not then is a “code smell” for us) • we use prop-types for type checking (and documentation) CSS • we use BEM notation for the classnames • classnames are “name-spaced” to avoid conflicts • extensive use of design tokens as Sass variables (when appropriate)

A simple component

A simple component

A complex component

A complex component

Some numbers 10k + 5k 36 + 98 180 70% Lines of JS + CSS code Components (Main + Sub) UI Coverage Visual Regression Tests

Visual Regression Testing diff after before https://speakerdeck.com/nikhilverma/visual-regression-testing-from-a-tool-to-a-process

The full story https://badootech.badoo.com/from-zero-to-cosmos-part-1-2d080fe35bf2

No content

“Direction” of componentization https://medium.com/ge-design/ges-predix-design-system-8236d47b0891 ATOM MOLECULE ORGANISM TEMPLATE PAGE Atomic Design by Brad Frost Atomic Design at GE (Predix Design System)

The “atomic” problem Jina Anne, Nathan Curtis, Trent Walton, 
 Adam Morse, and many others “Everything is a component.”

Flat navigation structure Flat folder structure Keep everything flat!

(We used a “fake” categorisation) quark atom molecule organism layout other QUARK ATOM MOLECULE FEATURE LAYOUT OTHER

Two distinct kind of components “Layout” Composition “Content”

Web “Components” COMPOSITION

I am a title

How to look at your components /1 When in doubt,
 break down a component * but not too much, or you’ll end up with “dust” of components break down

How to look at your components / 2 “Expected” component Component A ➔ (“Layout”) Component B ➔ (“Content”)

Gall’s Law on complex systems https://medium.com/@didoo/systemantics-a778c4247cbb

Gall’s Law on complex systems “A complex system that works is invariably found to
 have evolved from a simple system that worked. A complex system designed from scratch never works
 and cannot be patched up to make it work.
 You have to start over with a working simple system. ” complex system evolved from a simple system from scratch never works working simple system cannot be patched up

How much UI coverage? https://twitter.com/nathanacurtis/status/969197119730061313

How much coverage? https://twitter.com/resmini/status/912373274323103751

Component's average cost https://twitter.com/nathanacurtis/status/971110575114801152

Evangelisation https://medium.com/related-works-inc/the-people-part-of-design-systems-a5b54eea24f4

No content

Atomic Design is just the beginning Start here End here

The complexity is in the connections http://www.didoo.net/2015/07/modules-components-and-systems/

"Nothing is particularly hard
 if you divide it in small jobs." HENRY FORD

Cristiano Rastelli didoo.net / @areaweb Mobile Web Team

The theme used for these slides it’s been heavily inspired by the amazing, refreshing, superlative work done by Maria Arenas (Tandem Design NYC) for the campaign of Alexandria Ocasio Cortez. See: www.maaarenas.com CREDITS