Design Systems - O'Reilly Design Conference
3 likes345 views
1. The document discusses the benefits of design systems for handling large quantities of content and scaling websites over time. It notes consistency, efficiency, teamwork, and scalability as key benefits. 2. A case study example shows how a design system with core elements, building blocks, and pages allows for many variations like a taco menu. Maintaining the system is important for continued use and extension. 3. Getting buy-in requires framing the benefits in terms of investment returns like reduced costs and improved collaboration over time. Teaching clients the approach also helps secure support.
Design Systems - O'Reilly Design Conference
- 1. Accounting for Quantity and Scalability Amy Vainieri & Courtney Clark O’Reilly Design Conference, San Francisco March 21, 2017 #DesignSystems Design Systems
- 2. When a technology matures, design moves to the foreground because the underlying machinery has been commoditized. “ John Maeda Design in Tech Report
- 4. Who are you?
- 5. Have you used a design system?
- 6. Who loves a good design system?
- 8. How do you know if you need a design system?
- 9. Your site has 20+ button styles
- 10. Your site will evolve or grow over time.
- 11. sharing or turnover You have a lot of project
- 12. So…what is a design system?
- 13. 1 2 3 4 5 6 7 8
- 15. 8 ingredients = 50+ menu options!
- 16. Case Study A design system in the wild.
- 17. AfterBefore
- 18. Wireframes
- 19. Digital design system… What are our ingredients?
- 21. Basics
- 23. Elements
- 25. Building Blocks
- 26. Building Blocks
- 28. Pages Average Hero Stat Boxes Volunteer Openings Teasers Quote (with button) Story Teasers Image Gallery Support Teasers Share Bar
- 33. This design system has made my life rainbows and unicorns. “Dan Mouyard Front-End Developer Extraordinaire
- 36. After Launch The story continues…
- 38. 1. What already exists? 2. What is the significance? 3. How will it be used again in the future? Ask:
- 39. Guard the system, or it will unravel quickly. #DesignSystems Lesson
- 40. It was vital to understand the genesis of the design system. After that, it was easy peasy to maintain and extend the system. “ Sarah Coles Designer Extraordinaire
- 41. How do you get buy in?
- 42. “ John Maeda Design in Tech Report ‘Scale’ a company’s design function through better managing/leading of designers and shareable design systems
- 43. Time Developing & Refining System Implementing System Money Design System Traditional Process Frame it around investment.
- 44. Project Management DevelopmentUser Experience Design System Business Development GovernanceDesign & Branding
- 46. Teach your clients. Share your approach. #DesignSystems Lesson
- 47. Tips and Tricks
- 48. Be consistent!
- 49. Be organized!
- 50. Document!
- 51. Communicate!
- 52. Code!
- 53. Decide on the afterlife!
- 54. You have bigger fish to fry. #DesignSystems Lesson
- 55. Like fun 404 pages and pre- loaders.
- 56. Who wouldn’t want more delight?