A presentation at Colchester Digital Conference in in Colchester, UK by Stuart Robson
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
“ A robust design system should contain guiding design principles — Sarrah Vesselov | @SVesselov — Taurie Davis | @tauried @sturobson | alwaystwisted.com | Design Systems and Front-End Architecture | Colchester Digital 2019 69
@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
What is a Design System?
Design Systems are so hot right now, in this talk I will discuss the various parts that make up one and offer various takeaways to help you start or continue your current system.
I will be answering the questions often asked, including: Where to start? How to get buy-in? How will it benefit my team? How to maintain it? What makes a component? How can I theme my system? Do we really need a Design System?
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
