Slide 1

Slide 1 text

Design Systems

Slide 2

Slide 2 text

Hello!

Slide 3

Slide 3 text

Let’s talk scaling.

Slide 4

Slide 4 text

Step 1: Your company grows.

Slide 5

Slide 5 text

Step 2: You launch more products.

Slide 6

Slide 6 text

Step 3: You hire more people.

Slide 7

Slide 7 text

Step 4: Those people launch their own experiments, initiatives and internal and external products.

Slide 8

Slide 8 text

Marketing landing pages.

Slide 9

Slide 9 text

Mobile apps.

Slide 10

Slide 10 text

Flyers.

Slide 11

Slide 11 text

Websites.

Slide 12

Slide 12 text

Banner campaigns.

Slide 13

Slide 13 text

Everyone works inside their neat little silo of a team, without paying attention to what happens at a global level.

Slide 14

Slide 14 text

Step 5: You’re successful and you go global. Communication gets more fragmented as you go.

Slide 15

Slide 15 text

Suddenly…

Slide 16

Slide 16 text

! : Dan Mall

Slide 17

Slide 17 text

!

Slide 18

Slide 18 text

How do you fix that?

Slide 19

Slide 19 text

Enter design systems.

Slide 20

Slide 20 text

Design systems are a shared language.

Slide 21

Slide 21 text

Design systems work at three levels.

Slide 22

Slide 22 text

Level 1: Reusable library of documented components.

Slide 23

Slide 23 text

Level 2: Reusable library of documented rules, principles, best practices, ideas and values.

Slide 24

Slide 24 text

Level 3: Connected community of people invested in consistency and quality of the products.

Slide 25

Slide 25 text

In other words: Design system is a product used to build other products.

Slide 26

Slide 26 text

That’s all great, but how do we actually build one?

Slide 27

Slide 27 text

Getting buy-in.

Slide 28

Slide 28 text

“Tear down this wall.” http://www.history.com/this-day-in-history/reagan-challenges-gorbachev

Slide 29

Slide 29 text

Designers: We can maintain consistency across our designs so you can focus on innovation rather than pixel pushing.

Slide 30

Slide 30 text

Designers: Oh, if you enjoy pixel pushing, come work on design systems with me, so we can do pixel pushing at a global level.

Slide 31

Slide 31 text

Developers: We’ll work on a UI framework that you can use like Bootstrap / Material / something they know, so you can focus on important code things.

Slide 32

Slide 32 text

Executives: We can build better, more consistent products, faster.

Slide 33

Slide 33 text

Executives:

Slide 34

Slide 34 text

Customer success: UI bugs and issues are basically a thing of the past.

Slide 35

Slide 35 text

Product management: You’ll be able to quickly mock up your experiments using a kit of elements without investing a lot of time.

Slide 36

Slide 36 text

Product management: More product ideas in less time.

Slide 37

Slide 37 text

Marketing: We can easily align marketing message with visual language — principles-based design.

Slide 38

Slide 38 text

Marketing: You can easily generate marketing materials out of blocks that designers supply.

Slide 39

Slide 39 text

Gathering requirements.

Slide 40

Slide 40 text

✅ Sketch Library ✅ CSS Framework ✅ UI kit for Visio (for PMs)

Slide 41

Slide 41 text

Interface inventory.

Slide 42

Slide 42 text

Pro tip: print it out.

Slide 43

Slide 43 text

Building a team.

Slide 44

Slide 44 text

“Tear down this wall.” http://www.history.com/this-day-in-history/reagan-challenges-gorbachev

Slide 45

Slide 45 text

R/A/C/I

Slide 46

Slide 46 text

Responsible/A/C/I

Slide 47

Slide 47 text

R/Accountable/C/I

Slide 48

Slide 48 text

R/A/Consulted/I

Slide 49

Slide 49 text

R/A/C/Informed

Slide 50

Slide 50 text

Interface inventory.

Slide 51

Slide 51 text

Building it out.

Slide 52

Slide 52 text

Document everything.

Slide 53

Slide 53 text

Design tokens.

Slide 54

Slide 54 text

“Design tokens are the visual design 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 color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.” https://www.lightningdesignsystem.com/design-tokens/

Slide 55

Slide 55 text

Good design token represents meaningful value and a design choice.

Slide 56

Slide 56 text

$brand-blue

Slide 57

Slide 57 text

$color-link-regular

Slide 58

Slide 58 text

Component library.

Slide 59

Slide 59 text

Atomic Design.

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

http://atomicdesign.bradfrost.com/

Slide 62

Slide 62 text

!

Slide 63

Slide 63 text

!

Slide 64

Slide 64 text

Congratulations, you now have a design system.

Slide 65

Slide 65 text

Congratulations, you now have a design system style guide.

Slide 66

Slide 66 text

!

Slide 67

Slide 67 text

Level 3: Connected community of people invested in consistency and quality of the products.

Slide 68

Slide 68 text

Evangelize.

Slide 69

Slide 69 text

Add design system as part of your company onboarding.

Slide 70

Slide 70 text

Do workshops.

Slide 71

Slide 71 text

Explain.

Slide 72

Slide 72 text

Get everyone on board.

Slide 73

Slide 73 text

Extra points: Build a dedicated Design Systems Engneering team whose sole purpose is maintaining, updating and evangelizing design system.

Slide 74

Slide 74 text

Congratulations, you now have a design system.

Slide 75

Slide 75 text

Get inspired:

Slide 76

Slide 76 text

WeWork (hi! ) Plasma http://plasma.guide/

Slide 77

Slide 77 text

VMWare Clarity https://vmware.github.io/clarity/

Slide 78

Slide 78 text

IBM Carbon http://carbondesignsystem.com/

Slide 79

Slide 79 text

Salesforce Lightning https://www.lightningdesignsystem.com/

Slide 80

Slide 80 text

Design Systems community on Slack http://designsystems.herokuapp.com/

Slide 81

Slide 81 text

Have fun and explore!

Slide 82

Slide 82 text

Thanks!

Slide 83

Slide 83 text

@dotmariusz