Design Systems - Speaker Deck

Slide 1

Slide 1 text

. 4th of December, 2018

Slide 2

Slide 2 text

SUMMARY 1. About me 2. Why have one? 3. Design system (fundamentals) 4. How to build a design system (process) 5. Cost and value 6. Inspiration 7. Q&A

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

1. ABOUT ME Nadal Soler Front-end Web Developer, focused on UX https://www.linkedin.com/in/nadalsoler/ https://twitter.com/nadalsol https://github.com/nadalsol/

Slide 5

Slide 5 text

1. ABOUT ME Style Guide & Pattern Library CSS Framework Pattern Library Design System (WIP)

Slide 6

Slide 6 text

1. ABOUT ME VR Sites

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

2. WHY HAVE ONE? Recurrent problems 1. UX and code inconsistencies 2. Misunderstandings across teams 3. Less collaboration 4. Increased costs (time wasted doing repetitive tasks) 5. Slow shipping times 6. No scalability

Slide 9

Slide 9 text

2. WHY HAVE ONE? Main benefits 1. Efficiency 2. Consistency 3. Design and code quality 4. Accessibility

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

“A design system is a set of interconnected patterns and shared practices, coherently organised to serve the purposes of a digital product”. Alla Kholmatova Designer and writer focused on design systems 3. DESIGN SYSTEM (FUNDAMENTALS) DEFINITIONS

Slide 12

Slide 12 text

There isn't a standard definition of "design system", and people use the term in different ways – sometimes interchangeably with "style guides" and "pattern libraries". 3. DESIGN SYSTEM (FUNDAMENTALS) DEFINITIONS

Slide 13

Slide 13 text

Style guides Brand identity documents focused on logo treatments, corporate values and brand styles, such as colour and typography. 3. DESIGN SYSTEM (FUNDAMENTALS) DEFINITIONS

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Pattern libraries* A tool to collect, store and share your design patterns, along with the principles and guidelines for how to use them. (*) aka “front-end style guides”, “UI libraries” or “component libraries”. 3. DESIGN SYSTEM (FUNDAMENTALS) DEFINITIONS

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Going further… “A design system is a collection of components, styles and processes to help teams design and build consistent user experiences — faster and better”. Jeroen Ransijn Design Systems Lead at Segment 3. DESIGN SYSTEM (FUNDAMENTALS) DEFINITIONS

Slide 18

Slide 18 text

Last, but not least... “We’re not designing pages, we’re designing systems of components”. Stephen Hay Head of UX, Author of Responsive Design Workflow 3. DESIGN SYSTEM (FUNDAMENTALS) DEFINITIONS

Slide 19

Slide 19 text

Carbon Design System https://www.carbondesignsystem.com/ Lightning Design System https://www.lightningdesignsystem.com/ Polaris https://polaris.shopify.com/ Mailchimp: https://ux.mailchimp.com/patterns https://styleguide.mailchimp.com/ Bulb: http://design.bulb.co.uk/ 3. DESIGN SYSTEM (FUNDAMENTALS) SOME EXAMPLES

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

1. Atomic Design 2. Interface inventories 3. Create a Pattern Library 4. Customise patterns with settings 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) ATOMIC DESIGN

Slide 28

Slide 28 text

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. 1. Atoms 2. Molecules 3. Organisms 4. Templates 5. Pages 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) ATOMIC DESIGN

Slide 29

Slide 29 text

Atomic design is not a linear process. Instead, think of the stages of atomic design as a mental model that allows us to concurrently create final UIs and their underlying design systems. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) ATOMIC DESIGN

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Advantages of atomic design “Atomic design provides us with a few key insights that help us create more effective, deliberate UI design systems”. Brad Frost Web designer and speaker, author of Atomic Design 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) ATOMIC DESIGN

Slide 43

Slide 43 text

4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) ATOMIC DESIGN Advantages of atomic design 1. Quickly shift between abstract and concrete. 2. See interfaces broken down to their atomic elements and also see how those elements combine together to form our final UIs. 3. Craft design systems that are tailored to the content that lives inside them. 4. A helpful shorthand for discussing modularity with our colleagues, and provides a much needed sense of hierarchy in our design systems.

Slide 44

Slide 44 text

“An interface inventory is a comprehensive collection of the bits and pieces that make up your user interface”. Brad Frost Web designer and speaker, author of Atomic Design 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) INTERFACE INVENTORIES

Slide 45

Slide 45 text

4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) INTERFACE INVENTORIES

Slide 46

Slide 46 text

4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) INTERFACE INVENTORIES Some key questions 1. Which patterns should stay, which should go, and which can be merged together? 2. What pattern names should we settle on? 3. What are the next steps to translate the interface inventory into a living Pattern Library?

Slide 47

Slide 47 text

4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CREATE A PATTERN LIBRARY

Slide 48

Slide 48 text

Settings may help on developing faster, ensuring consistency and maintainability: 1. Set a default "base-agnostic theme", to be used for all projects in “vr-sites”. 2. Create a “_settings.scss” Sass variables file, in order to customise the default appearance for all components. 3. Import the "base-agnostic theme" in the rest of projects, overriding those settings with custom values. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CUSTOMISE PATTERNS WITH SETTINGS

Slide 49

Slide 49 text

4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CUSTOMISE PATTERNS WITH SETTINGS

Slide 50

Slide 50 text

4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CUSTOMISE PATTERNS WITH SETTINGS

Slide 51

Slide 51 text

4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CUSTOMISE PATTERNS WITH SETTINGS

Slide 52

Slide 52 text

4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CUSTOMISE PATTERNS WITH SETTINGS

Slide 53

Slide 53 text

Settings leads to… 1. UI consistency 2. Reusable code (DRY!) 3. Fast development time 4. Easy adoption of new products 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CUSTOMISE PATTERNS WITH SETTINGS

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

The cost of creating a design system depends on how further do you want to go... 1. Maturity of the product 2. Resources invested (people, time, money…) 3. Level of collaboration 4. Starting from scratch? 5. Size of the company 6. Number of projects and components Keep in mind it’s a work in progress! 5. COST & VALUE COST

Slide 56

Slide 56 text

5. COST & VALUE VALUE 1. Consistency and cohesion (better UX) 2. Speed up your team’s productivity 3. More collaborative workflow 4. Shared vocabulary 5. Helpful documentation 6. Make testing easier 7. Serve as a future-friendly foundation 8. A single source of truth for everyone In the end is a matter of saving time and money.

Slide 57

Slide 57 text

“Teams that use the design system can focus on what’s unique to their product instead of reinventing common UI components.” Jeroen Ransijn Design Systems Lead at Segment 5. COST & VALUE VALUE

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

6. INSPIRATION ARTICLES & BOOKS ARTICLES Building a Visual Language by Karri Saarinen Driving Adoption of a Design System by Jeroen Ransijn Introducing Bulb’s design system by Alla Kholmatova BOOKS Atomic design by Brad Frost Design systems by Alla Kholmatova

Slide 60

Slide 60 text

6. INSPIRATION GLOSSARY & PRACTICES GLOSSARY Design system glossary by Bulb team GOOD PRACTICES Criteria for new patterns by Bulb team Defining patterns by Bulb team

Slide 61

Slide 61 text

6. INSPIRATION TOOLS & RESOURCES TOOLS Astrum Figma Fractal Frontify RESOURCES Adele DesignSystems.com StyleGuides.io UI Patterns Pattern Lab Storybook ZeroHeight Check my Pattern library tools research for more details.

Slide 62

Slide 62 text

6. INSPIRATION THE HOLY GRAIL OF DESIGN SYSTEMS Carbon Design System by IBM Evergreen by Segment Lightning Design System by Salesforce Mailchimp Pattern Library by Mailchimp Polaris Design System by Shopify Solar Design System by Bulb