SlideShare a Scribd company logo

Design Systems

•
•
Nadal Soler
Nadal Soler

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. 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

Related slideshows

Initiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the EnterpriseInitiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the Enterprise
 
Design Systems (english) #UXcamHH
Design Systems (english) #UXcamHHDesign Systems (english) #UXcamHH
Design Systems (english) #UXcamHH
 
Design Systems at Scale
Design Systems at ScaleDesign Systems at Scale
Design Systems at Scale
 
1 of 64
Download to read offline
. 4th of December, 2018
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
Design Systems
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/
1. ABOUT ME Style Guide & Pattern Library CSS Framework Pattern Library Design System (WIP)
1. ABOUT ME VR Sites
Design Systems
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
2. WHY HAVE ONE? Main benefits 1. Efficiency 2. Consistency 3. Design and code quality 4. Accessibility
Design Systems
“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
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
Style guides Brand identity documents focused on logo treatments, corporate values and brand styles, such as colour and typography. 3. DESIGN SYSTEM (FUNDAMENTALS) DEFINITIONS
Design Systems
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
Design Systems
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
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
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
Design Systems
Design Systems
Design Systems
Design Systems
Design Systems
Design Systems
Design Systems
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
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
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
Design Systems
Design Systems
Design Systems
Design Systems
Design Systems
Design Systems
Design Systems
Design Systems
Design Systems
Design Systems
Design Systems
Design Systems
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
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.
“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
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) INTERFACE INVENTORIES
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?
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CREATE A PATTERN LIBRARY
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
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CUSTOMISE PATTERNS WITH SETTINGS
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CUSTOMISE PATTERNS WITH SETTINGS
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CUSTOMISE PATTERNS WITH SETTINGS
4. HOW TO BUILD A DESIGN SYSTEM (PROCESS) CUSTOMISE PATTERNS WITH SETTINGS
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
Design Systems
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
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.
“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
Design Systems
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
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
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.
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
Design Systems
Feel free to ask any question. Please join #design-systems SLACK CHANNEL

More Related Content

Design Systems

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