Design Systems at Scale
•
3 gefällt mir•561 views
A design system can vastly improve your team's productivity, but most of all, it leads to better products! The challenge lies in creating a mature system and leading its adoption across the company successfully. Let's talk about how we learned to meet the needs of different designers and developers on different products, on different tech stacks. Attendees will go home with tips they can use to improve design systems of any stage.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Design Systems at Scale
Ähnlich wie Design Systems at Scale (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Design Systems at Scale
- 1. Sarah Federman Design Engineer Design Systems at Scale @sarah_federman
- 2. Sarah Federman Design Engineer Design Systems at Scale @sarah_federman
- 5. A brief history of the universe
- 9. “We’re not designing pages, we’re designing systems of components.” - Stephen Hay (2012)
- 14. Design and engineering have been on a collision course for years.
- 16. Styleguides & Brand Guidelines
- 18. Spoiler: No one has figured it out yet.
- 19. Spoiler: No one has figured it out yet.
- 20. What is a design system?
- 21. A product that helps us scale our design practice.
- 22. Scale means getting the best results with the least duplication of effort.
- 23. Scale means getting the best results with the least duplication of effort. Keeping your designs DRY.
- 24. Duplication leads to fragmentation.
- 25. Duplication leads to fragmentation.
- 26. Diving deeper
- 27. In order to really understand what a design system is, we have to understand where it lives.
- 28. A design system is an organizational problem.
- 29. A design system is an organizational problem.
- 30. A design system is run like a product.
- 31. A design system is run like a product.
- 35. Resources + Operations outputs Product Product + Emotion creates Experience
- 36. The product is what users consume. The experience is how it makes them feel. The operations are how it’s made.
- 38. None of it really matters as long as your team knows what the heck you’re talking about.
- 39. Buttons, links, inputs, icons, etc Fonts, colors, sizing Basic documentation UI Components Grid Code style Developer tooling Design tokens High level guidelines Accessibility information Internationalization Motion guidelines Voice and tone/writing Workflow tooling
- 40. The benefits
- 41. The benefits Quick iteration Stronger brand identity Everyone speaks the same language Better user experience
- 42. A delivery mechanism for important goals.
- 43. A delivery mechanism for important goals.
- 44. A delivery mechanism for important goals.
- 45. Collaborating at Scale Design Systems at Adobe
- 47. spectrum
- 49. What scale are we dealing with?
- 50. What scale are we dealing with? Over 250 designers world wide
- 51. What scale are we dealing with? Over 124 products sent to market
- 52. What scale are we dealing with? Available in 4 color themes
- 53. What scale are we dealing with? Available on 6 platforms UWP (Windows) macOS Web Desktop iOS Android Web Mobile
- 54. What scale are we dealing with? Built in multiple frameworks
- 56. This has 1,080 permutations
- 57. Call to action Primary Secondary Warning Over background
- 58. Standard & quiet styles
- 59. 5 interactive states (default, hover, down/touch, keyboard focus, disabled)
- 61. Web Desktop macOS UWP (Windows) Web Mobile iOS Android
- 62. Web DesktopmacOSUWP (Windows) Web MobileiOSAndroid
- 64. Establishing trust Implementing at scale Designing at scale Measuring success
- 65. relaunching our website Establishing trust
- 66. 2017 Q2
- 69. “Is this up-to-date?” pain point
- 70. Spectrum “Basic Elements” - 2017 Q2
- 71. Lightroom CC
- 72. “Does this work for my product?” pain point
- 73. Spectrum needed to be something people can really trust.
- 75. Inclusion Criteria cross-platform 4 color themes accessible documentation etc.
- 76. website
- 80. Imperative vs. Declarative Approach
- 81. callout image column row section column content-block callout image Imperative vs. Declarative Approach
- 82. callout image Imperative vs. Declarative Approach column
- 83. frameworks and tooling Implementing at scale
- 85. Spectrum DNA
- 86. Spectrum DNA Store constants as data Integrate constants with UI code Validate design integrity
- 90. border-radius-xsmall border-radius-small border-radius-regular border-radius-medium border-radius-large border-radius-small border-size-thin border-size-thick border-size-thicker border-size-thickest 1 pt 2 pt 4 pt 8 pt 16 pt 2 pt 1 pt 2 pt 4 pt 8 pt checkbox-box-border-radius
- 91. Asset Delivery
- 92. Asset Delivery Cataloging & Tracking Storage & Workflow Delivery & Validation
- 93. an evolving design process Designing at scale
- 94. “Where did everything go!?” pain point
- 95. Button Link Split Button Action Button Toggle Switch Radio Checkbox Text Field Text Area Tag Table Forms Stepper Field Flyout Menu Dropdown Combo Box Simple Search Search Within Slider Color Slider Color Picker Loader Calendar Progress Bar Star Rating Scroll Bar In-line Alert Toast Tooltip Status Light Dialog Badge Banner Rule Tabs Accordion Panel Carousel Popover Web Rails Basic Table Basic Card Global Header Steplist Pagination Miller Columns Side Navigation Tree View Bread Crumbs Logic Button Tray Video Player Drag & Drop List Drag & Drop Zone Tool Well these have not been vetted
- 96. Button Link Split Button Action Button Toggle Switch Radio Checkbox Text Field Text Area Tag Table Forms Stepper Field Flyout Menu Dropdown Combo Box Simple Search Search Within Slider Color Slider Color Picker Loader Calendar Progress Bar Star Rating Scroll Bar In-line Alert Toast Tooltip Status Light Dialog Badge Banner Rule Tabs Accordion Panel Carousel Popover Web Rails Basic Table Basic Card Global Header Steplist Pagination Miller Columns Side Navigation Tree View Bread Crumbs Logic Button Tray Video Player Drag & Drop List Drag & Drop Zone Tool Well these are vetted against the entire system Button Link Switch Radio Checkbox Text Field Dropdown Tooltip Dialog
- 97. Button Link Split Button Action Button Toggle Switch Radio Checkbox Text Field Text Area Tag Table Forms Stepper Field Flyout Menu Dropdown Combo Box Simple Search Search Within Slider Color Slider Color Picker Loader Calendar Progress Bar Star Rating Scroll Bar In-line Alert Toast Tooltip Status Light Dialog Badge Banner Rule Tabs Accordion Panel Carousel Popover Web Rails Basic Table Basic Card Global Header Steplist Pagination Miller Columns Side Navigation Tree View Bread Crumbs Logic Button Tray Video Player Drag & Drop List Drag & Drop Zone Tool Well these are vetted against the entire system Button Link Action Button Switch Radio Checkbox Text Field Tag Dropdown Slider Loader Progress Bar Tooltip Status Light Dialog Rule Tabs Basic Table Side Navigation Tool
- 98. How can Spectrum grow faster?
- 100. Spectrum Precursors
- 101. Spectrum Precursors
- 102. Spectrum Precursors
- 112. How can we measure adoption at scale? pain point
- 113. Spectrum Scorecards
- 114. Spectrum Scorecards
- 121. Thank you! Sarah @sarah_federman Special thanks to PJ Buddhari (@pudjeeb_pj )for her contributions to the content and slides.