Tweet
Tweet

Slide 1

Slide 1 text

Design Systems Engineering
 Scaling User Interfaces
 
 Christoph Reinartz | @pistenprinz |

Slide 2

Slide 2 text

Based on a true story
 Share what you’ve learned

Slide 3

Slide 3 text

Do what works for you
 This is what worked for us

Slide 4

Slide 4 text

2012
 Let the show begin

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Legacy PHP Framework
 Come with us they said

Slide 8

Slide 8 text

JavaScript
 Make sure to `onclick` every DOM node

Slide 9

Slide 9 text

CSS.inc
 We don’t always write CSS but when we do we make sure to save it in dot inc files

Slide 10

Slide 10 text

Specificity graph 2012
 The specificity wall

Slide 11

Slide 11 text

.gradient_bright_hover:hover, .gradient_bright_hover:hover *, .gradient_dark_hover:hover, .gradient_dark_hover:hover * { color:#fff !important } Show me your code
 Part 1 - Specificity 20

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Symfony Framework
 Twig templating & Assetic

Slide 14

Slide 14 text

jQuery
 to plugins

Slide 15

Slide 15 text

SCSS
 Pre-processing introduced - Ruby Sass

Slide 16

Slide 16 text

#banner_topnav div.tablink li div.dropdown #table.localization
 a.plain:hover { color:#fff !important; } Show me your code
 Part 2 - Specificity 254

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Amount of Frontend Developer
 x 1

Slide 19

Slide 19 text

2013 - 2014
 The first steps

Slide 20

Slide 20 text

Project Moon
 Flat Design facelift

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

The first guidelines
 I make my own rules

Slide 24

Slide 24 text

HTML5 101
 Fight the divitis

Slide 25

Slide 25 text

Templating guidelines
 Naming and structure

Slide 26

Slide 26 text

CSS Tipps
 2 simple rules (Nesting, Naming) + best practices

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

http://bradfrost.com/blog/post/atomic-design-in-one-gif/

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Mobile traffic
 D’oh

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

How it should not be solved
 Viewport vandalism

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Project Mars
 Desktop first facelift

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Project Venus
 Let’s launch in Israel

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Let’s talk about consistency
 Once again

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Hackathon Project 2014
 CSS Framework

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text


 “We built a CSS Framework. You should totally use it”

Slide 47

Slide 47 text

Amount of Frontend Developer
 x 5

Slide 48

Slide 48 text

2015
 Let’s scale

Slide 49

Slide 49 text

Graph 2015 
 Way better, but still…

Slide 50

Slide 50 text

Specificity graph 2012
 The specificity wall

Slide 51

Slide 51 text

Graph 2015 
 Way better, but still…

Slide 52

Slide 52 text

Houston, we have a problem
 It doesn’t scale anymore

Slide 53

Slide 53 text

#1 Sprites were out of control We built Frankenstein with Icons

Slide 54

Slide 54 text

Title
 subtitle

Slide 55

Slide 55 text

#2 Too much CSS How many Selectors do you use? ALL!

Slide 56

Slide 56 text

Christoph Reinartz - @pistenprinz #3 Too much CSS How many Selectors do you use? ALL!

Slide 57

Slide 57 text

#3 Desktop first approach Oh you poor mobile devices

Slide 58

Slide 58 text

#4 Inconsistency and missing Styleguide Or how to create fifty shades of grey

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Title
 subtitle

Slide 61

Slide 61 text

Title
 subtitle

Slide 62

Slide 62 text

Title
 subtitle

Slide 63

Slide 63 text

#5 Repeat yourself 97 different footers - no single source of truth

Slide 64

Slide 64 text

Title
 subtitle

Slide 65

Slide 65 text

Title
 subtitle

Slide 66

Slide 66 text

Title
 subtitle

Slide 67

Slide 67 text

Title
 subtitle

Slide 68

Slide 68 text

#6 Overly complex CSS/DOM structure div, div, div, span, span, span

Slide 69

Slide 69 text

#7 Too much confusion in code Scary comments

Slide 70

Slide 70 text

Title
 subtitle

Slide 71

Slide 71 text

#8 JPG to Jira Task driven development Developing on the live system

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

Design Systems to the rescue
 An Overview

Slide 74

Slide 74 text

Components Process UI Layer Styleguide Design 
 Language Documentation Assets UI Kit Design 
 Principles Inspired by: https://medium.com/@NateBaldwin/anatomy-of-a-design-system-7a6b0677bf5

Slide 75

Slide 75 text

Definition
 CSS Framework This is the front-end code and production-ready design assets. The CSS framework is referenced and consumed by the product(s). It is a modular, scalable, and extensible tool that fosters rapid development and typically confirms to a CI/ CD development environment. https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111#.nduusckg1

Slide 76

Slide 76 text

Title
 subtitle

Slide 77

Slide 77 text

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. Definition
 Styleguide https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111#.nduusckg1

Slide 78

Slide 78 text

Title
 subtitle

Slide 79

Slide 79 text

Definition
 Pattern Library This is a library of standardized 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. https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111#.nduusckg1

Slide 80

Slide 80 text

Definition
 Design System The entirety of the standardized UI patterns, framework, 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). https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111#.nduusckg1

Slide 81

Slide 81 text

Design Systems
 Examples

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

Design System Why do we need it?

Slide 87

Slide 87 text

#1 Establish design and code consistency Remove clutter in code code and design

Slide 88

Slide 88 text

#2 Improve code quality and maintainability Reduce technical debt

Slide 89

Slide 89 text

#3 Provide base for modern & sustainable UI rebuild Build modern applications fast

Slide 90

Slide 90 text

Design System Case Study A first try-out with patternlab.io

Slide 91

Slide 91 text

Digital Design UI Engineering

Slide 92

Slide 92 text

Design Development HTML CSS JavaScript

Slide 93

Slide 93 text

Design Development Accessibility Animations Integration Semantic Usability Performance JS Framework X

Slide 94

Slide 94 text

Design Development Accessibility Animations Integration Semantic Usability Performance JS Framework X

Slide 95

Slide 95 text

Design Development Accessibility Animations Integration Semantic Usability Performance JS Framework X

Slide 96

Slide 96 text

Design Development Accessibility Animations Integration Semantic Usability Performance JS Framework X

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text


 “We built a Design System for you w/o knowing your needs. You should totally use it”

Slide 99

Slide 99 text

The initial version 
 Simple but it worked

Slide 100

Slide 100 text

Form Elements Buttons Navigation Teaser Header Footer Typographie Icons Tabs Grid

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

Good news everyone
 We do it differently now - The sales pitch

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

The roll-out Vision handling
 The verbose version

Slide 108

Slide 108 text

The roll-out Vision
 Filtered by Designers

Slide 109

Slide 109 text

Title
 subtitle Project Ironman Large scale CSS refactoring Christoph Reinartz - ScotlandCSS - Edinburgh, June 1st 2016

Slide 110

Slide 110 text

New CSS Core Old CSS Core normalize.css reset.css border-box content-box mobile first (min-width) desktop first (max-width) media queries inline in separate files embed SVG icon image sprites ITCSS layering [something] BEM, OOCSS [something] Post processing (MQPacker etc.) nothing (Assetic)

Slide 111

Slide 111 text

From Assetic to Node
 Webpack, ES6, post CSS

Slide 112

Slide 112 text

Graph 2015 
 Way better, but still…

Slide 113

Slide 113 text

New CSS base refactored CSS Graph after Ironman
 Improved curve…

Slide 114

Slide 114 text

<3 New Icon System From sprites to embed-SVG

Slide 115

Slide 115 text

Title
 subtitle

Slide 116

Slide 116 text

Title
 subtitle

Slide 117

Slide 117 text

description details infobig hotelconnect smiley heart towel star pictures wifi spa beach breakfast pool pet golf tv family eco parking bed_single bed_double bed_small couple universal home menu share edit checkout checkin general rates faq_circle faq info_circle info arrow_right_circle arrow_left_circle arrow_down_circle arrow_up_circle arrow_right arrow_left arrow_down arrow_up tick exclamation x plus minus image media bag chair team candy journalist news hoteltest plus_circle minus_circle x_circle filter dashboard statistics hotel2 hotel travel2 travel booking hotelchain upload delete tick_circle exclamation_circle contact profile info product history giveback lock calendar search publisher career comment download map smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent level sort department poi_citycentre poi_airport poi_sight poi_conference poi_harbor poi_mainstation poi_nature poi_nightlife poi_sports filterreset join thin share2 movie call piechart diagram music multimedia wifi spa beach breakfast pool pet golf tv family eco parking bed_single bed_double bed_small couple universal home menu share edit checkout checkin general rates description details infobig hotelconnect smiley heart towel star pictures icn_profile icn_info icn_product icn_history icn_giveback icn_lock icn_calendar icn_search icn_publisher icn_career icn_comment icn_download icn_map icn_dashboard icn_statistics icn_hotel2 icn_hotel icn_travel2 icn_travel icn_booking icn_hotelchain icn_upload icn_delete icn_tick_circle exclamation_circle contact image media bag chair team candy journalist news hoteltest plus_circle minus_circle x_circle icn_filter arrow_right_circle arrow_left_circle arrow_down_circle arrow_up_circle arrow_right arrow_left arrow_down arrow_up tick exclamation x plus minus faq_circle faq info_circle info smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent smiley_belowaverage smiley_satisfactory smiley_good smiley_verygood smiley_excellent level sort department poi_citycentre poi_airport poi_sight poi_conference poi_harbor poi_mainstation poi_nature poi_nightlife poi_sports join thin filterreset share2 movie call piechart diagram music multimedia

Slide 118

Slide 118 text

<3 Sorted the colors Established and introduce a color palette

Slide 119

Slide 119 text

trv-blue-light #3f9fc1 trv-red-light #d67763 trv-green-light #8cba3f trv-green-lighter #b2d17f trv-green-dark #4c7b00 trv-juri-light #697379 trv-juri-lighter #9ba2a6 trv-juri-lightest #ebeced trv-blue-dark #005f81 trv-blue #007fad trv-orange #f48f00 trv-red #c94a30 trv-orange-dark #b76b00 trv-orange-light #f6ab3f trv-blue-lightest #e5f2f6 trv-red-lightest #f9ecea trv-orange-lightest #fdf3e5 trv-red-dark #963724 trv-green #66a400 trv-juri #37454d trv-juri-dark #293339 16 12 18 16 12 12 18 12 18 16 * trv-juri-very-light #cdd0d2 trv-red-very-light #f1d1cb trv-green-very-light #d8e8bf trv-orange-very-light #fce3bf trv-blue-very-light #bfdfea trv-red-lighter #e4a49b trv-orange-lighter #f9c780 trv-blue-lighter #7fbfd6 trv-green-lightest #eff5e5

Slide 120

Slide 120 text

Title
 subtitle Now 2015

Slide 121

Slide 121 text

Amount of Frontend Developer
 x 10

Slide 122

Slide 122 text

2016
 From refactoring to rebuilding to roll-out

Slide 123

Slide 123 text

Refactoring first
 Disposable refactoring of old code

Slide 124

Slide 124 text

Step 1 New codebase integrated Old layout kept because don’t release what you haven’t tested

Slide 125

Slide 125 text

Step 2 Iterate new versions of UI components A new Search Result component based on the new base

Slide 126

Slide 126 text

Rebuilding later
 Relaunch a few weeks after the refactoring

Slide 127

Slide 127 text

Release and test
 And qualify it

Slide 128

Slide 128 text

Step 3 Go to step 2 Rebuild more Components

Slide 129

Slide 129 text

Rebuild more components
 Relaunch a few weeks after the refactoring

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

Slide 132

Slide 132 text

No content

Slide 133

Slide 133 text

Slide 134

Slide 134 text

pull-left vs. fl-leading
 nobody uses this old thing, or? deprecated class non - deprecated class 97% 3%

Slide 135

Slide 135 text

<3 Code Styleguide And Documentation

Slide 136

Slide 136 text

No content

Slide 137

Slide 137 text

No content

Slide 138

Slide 138 text

No content

Slide 139

Slide 139 text

No content

Slide 140

Slide 140 text

No content

Slide 141

Slide 141 text

No content

Slide 142

Slide 142 text


 “We build a Design System together. Everybody can use it”

Slide 143

Slide 143 text

<3 New Icon System iterated From embed-SVG to Inline-SVG

Slide 144

Slide 144 text

Title
 subtitle

Slide 145

Slide 145 text

2017
 From refactoring to rebuilding to roll-out

Slide 146

Slide 146 text

21 admin-library patternlab-loader admin-lib trivago-core_patterns daisy-and-trivi fork visualisation admin-tools application composer package composer package composer package symfony application scss _patterns _patterns

Slide 147

Slide 147 text

100% Pattern lab loader reusable shared templates 100%

Slide 148

Slide 148 text

CSS Components to be open sourced soon 80%

Slide 149

Slide 149 text

Slide 150

Slide 150 text

daisy-and-trivi applications

Slide 151

Slide 151 text

daisy-and-trivi applications trivago core patterns

Slide 152

Slide 152 text

daisy-and-trivi applications trivago core patterns

Slide 153

Slide 153 text

No content

Slide 154

Slide 154 text

No content

Slide 155

Slide 155 text

No content

Slide 156

Slide 156 text

No content

Slide 157

Slide 157 text

No content

Slide 158

Slide 158 text

daisy-and-trivi applications trivago core patterns

Slide 159

Slide 159 text

Design System Metrics
 Some data

Slide 160

Slide 160 text


 “We saved two weeks when using the System” * *) Communication Team

Slide 161

Slide 161 text


 16 contributors

Slide 162

Slide 162 text


 12 teams using it

Slide 163

Slide 163 text


 15 applications using it

Slide 164

Slide 164 text

Title
 subtitle

Slide 165

Slide 165 text


 5 external companies using it

Slide 166

Slide 166 text


 ~50% reduced bug reports

Slide 167

Slide 167 text

Thank you
 all this wouldn’t have been possible without Jean, Ann-Kristin, Daniela, Kay, Ian, Ailin, Lukas, Jan, Radovan, Tom, Janine, Frank, Gregory, Jessica, Daniel, Ulf, Dejan, Mirja, Christina, Karan, Celine, Andrej, Lisa, Victor, Timon, William, Andrea, David, Annett, Thomas, Tim, Alexandru, Irfan and many many more

Slide 168

Slide 168 text

Christoph Reinartz UI/UX Engineer @trivago
 
 Web: www.creinartz.de
 twitter: @pistenprinz