Design Systems

Let's talk about Design Systems and how they could help you build better products in terms of efficiency, consistency, UX, code quality and accessibility.

"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)

This quote summarises –in essence– this inspirational talk I made for TeamCMP, on December 2018.

Transcript

1. . 4th of December, 2018
2. 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
4. 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/
5. 1. ABOUT ME Style Guide & Pattern Library CSS Framework Pattern Library Design System (WIP)
6. 1. ABOUT ME VR Sites
8. 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
9. 2. WHY HAVE ONE? Main benefits 1. Efficiency 2. Consistency 3. Design and code quality 4. Accessibility
11. “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
12. 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
13. Style guides Brand identity documents focused on logo treatments, corporate values and brand styles, such as colour and typography. 3. DESIGN SYSTEM (FUNDAMENTALS) DEFINITIONS
15. 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
17. 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
18. 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
19. 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
27. 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
28. 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
29. 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
42. 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
43. 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.
44. “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
45. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) INTERFACE INVENTORIES
46. 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?
47. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CREATE A PATTERN LIBRARY
48. 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
49. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CUSTOMISE PATTERNS WITH SETTINGS
50. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CUSTOMISE PATTERNS WITH SETTINGS
51. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CUSTOMISE PATTERNS WITH SETTINGS
52. 4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CUSTOMISE PATTERNS WITH SETTINGS
53. 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
55. 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
56. 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.
57. “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
59. 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
60. 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
61. 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.
62. 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
64. Feel free to ask any question. Please join #design-systems SLACK CHANNEL