Design Systems and Front-End Architecture

Design Systems and Front-End Architecture @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 1

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 3

What we are going to discuss today: 1. What is a Design System? 2. Do we need one? 3. Where should we start? 4. What makes a component? 5. How do we maintain it? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 4

What is a Design System? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 5

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 6

Pattern Library Style Guide Design Language @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 9

A Design System contains: the who, what, where, when, why and how of a product @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 10

Pattern Library The Who, The What. @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 11

Style Guide The How, Where, and When. @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 12

Design Language The Why. @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 13

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 14

That’s a basic take. @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 15

What else could be in a Design System? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 16

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 17

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 18

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 19

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 20

“ There isn’t a standard definition of ‘design system’ within the web community, and people use the term in different ways — sometimes interchangeably with ‘style guides’ and ‘pattern libraries’. — Alla Kholmatova | @craftui @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 21

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 22

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 23

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 24

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 25

“ …as a community we’re starting to get a bit dogmatic about what design systems are and are not. — Sarah Federman | @sarah_federman @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 26

“ It’s about systemizing the design. As a noun. That’s literally all a design system means. That’s not to say only designers can do it. — Jina | @jina @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 27

What do they look like? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 28

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 29

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 30

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 31

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 32

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 33

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 34

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 35

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 36

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 37

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 38

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 39

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 40

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 41

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 42

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 43

“ A Design System isn’t a Project. It’s a Product, Serving Products. — Nathan Curtis | @nathanacurtis @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 44

“ Real talk: don’t compare your design system to others. The grass is always greener, and their goals aren‘t your goals — Diana Mounter | @brocollini @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 45

Do we need a Design System? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 46

Consistency @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 47

Maintainability @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 48

Quality @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 49

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 50

“ We’re not designing pages. We’re designing systems of components. — Stephen Hay | @stephenhay @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 51

Buy in @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 52

“ Tiny Bootstraps — Dave Rupert | @davatron5000 @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 53

Scalability @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 54

Creativity @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 55

“ Design systems take care of the boring 80% of what you need to design, freeing you to concentrate your creativity on the interesting and unique 20%. — Dan Mall | @danmall @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 56

“ A design system is at its foundation, a set of rules. Rules and creativity are not mutually exclusive. Rules can be broken. — Mina Markham | @minamarkham @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 57

Themes @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 58

QA @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 59

On-boarding @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 60

Updates @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 61

Communication —be open —don’t dictate —listen —move within exitisting workflows @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 62

Be where the authors are @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 63

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 64

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 65

Where should we start with a Design System? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 66

“ …start with doorknobs and end up with cathedrals. … start with cathedrals and work down to doorknobs. — Jeffrey Zeldman | @zeldman @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 67

Design Principles @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 68

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 70

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 71

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 72

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 73

Design Tokens @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 74

“ Design Tokens are the visual atoms of the design system – specifically, they are named entities that store visual design attributes. We use them in place of hard–coded values (such as hex values for colour or pixel values for spacing) in order to maintain a scalable and consistent visual system. — Jina | @jina @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 75

Colour @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 76

Colour @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 77

Typography @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 78

Typography @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 79

Typography @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 80

Iconography @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 81

Spacing @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 82

Borders @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 83

Shadows @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 84

Time @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 85

Breakpoints @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 86

Aren’t they just Sass variables? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 87

“ Design Tokens are an abstraction for everything impacting the visual design of an app/platform. — Sönke | @soenkerohde @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 88

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 89

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 90

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 91

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 92

How will we code components? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 93

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 94

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 95

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 96

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 97

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 98

“ The Design System framework has to be platform-agnostic and meet the needs of users on a variety of different technology stacks.. — Stephanie Sullivan Rewis | @stefsull @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 99

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 100

Methodologies @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 101

OOCSS @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 102

BEM @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 103

SMACSS @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 104

ITCSS @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 105

OOBEMITSCSS @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 106

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 107

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 108

Namespacing Component Type .a-button { … } .m-signup { … } .o-masthead { … } @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 109

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 110

Serving Many Teams @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 111

Namespacing Product Type .vf-heading { … } .vf-news-item__heading { … } .vf-news-group__heading { … } @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 112

Namespacing .vf-grid { … } ———————————————— .embl-grid { … } @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 113

Guidelines @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 114

Guidelines @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 115

Linting @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 116

Linting @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 117

What makes a component? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 118

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 119

Variants — — — — — Typography Palette Borders Shadow Spacing — Interaction: hover, focus, active states @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 120

Typography — — — — font family font size font weight text transform @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 121

Palette — text colour — background colour @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 122

Borders — — — — border colour border style border width border radius @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 123

Spacing — — — — padding top padding bottom padding left padding right — — — — margin top margin bottom margin left margin right @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 124

Interactive States — hover text colour — hover background colour — hover box shadow — — — — — focus text colour focus background colour focus box shadow focus border colour focus border width — transition duration — transition property — transition timing function @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 125

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 126

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 127

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 128

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 129

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 130

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 131

“ If you aren’t explicit in the way an object’s hover states, touch states, open or closed states, etc., then chances are they will be overlooked and not built. — Jina | @jina @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 132

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 133

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 134

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 135

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 136

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 137

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 138

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 139

How do we maintain a Design System? @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 140

“ Design systems need be easy and desirable to use by the teams using them. — Charlotte Jackson | @lottejackson @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 141

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 142

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 143

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 144

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 145

Distribution @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 146

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 147

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 148

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 149

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 150

npm install my-components @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 151

npm install my-components/my-button @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 152

Versioning @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 153

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 154

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 155

Testing @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 156

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 157

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 158

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 159

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 160

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 161

Announcements @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 162

“ Successful design patterns don’t exist in a vacuum. — Yesenia Perez-Cruz | @yeseniaa @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 163

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 164

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 165

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 166

Component Status @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 167

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 168

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 169

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 170

New Components @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 171

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 172

Deprecating @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 173

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 174

@sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 175

Resources @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 176

Slack.Design.Systems @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 177

News.Design.Systems @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 178

DesignSystemsBook.Com @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 179

BuildingDesignSystems.Design @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 180

FEA.Pub @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 181

AtomicDesign.BradFrost.Com @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 182

Thank You twitter.com/@sturobson alwaystwisted.com @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 183