Design systems: accounting for quality and scalability
•
3 likes•107,805 views
You'll learn: How Forumone builds and implements design systems for their clients How to plan, create, sell, and implement a design system How to use common design tools to build a design system developers will use
Report
Share
Design systems: accounting for quality and scalability
- 1. “ John Maeda Design in Tech Report ‘Scale’ a company’s design function through better managing/leading of designers and shareable design systems
- 2. Accounting for Quantity and Scalability Amy Vainieri & Courtney Clark UX at Scale Virtual Summit | October 5, 2017 #DesignSystems Design Systems
- 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. There are 20+ button styles
- 11. handoff or sharing 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. Entire Project = 8 months Discovery = 2 months UX & Design = 3-4 months Front & Back Dev = 3-4 months
- 19. Project Manager (x2) UX Designer (x2) Content Strategist Visual Designer Back-End Developer (x5+) Front-End Developer (x2+) Project Team
- 20. Product Owners (x2) Executive Director Communications Staff (x10) Developers (x2) Analyst Content Authors (x200!) Located in 60 countries across 15 programs Client
- 22. Discovery
- 23. Wireframes
- 24. Digital design system… What are our ingredients?
- 26. Basics
- 28. Elements
- 30. Building Blocks
- 31. Building Blocks
- 33. Pages Average Hero Stat Boxes Volunteer Openings Teasers Quote (with button) Story Teasers Image Gallery Support Teasers Share Bar
- 37. #DesignSystems Lesson Power Jams Wins Design Review Content Prep Design Inventory Preparation
- 39. #DesignSystems Lesson Power Jams Wins Design Review Content Prep Design Inventory Preparation Luck
- 40. #DesignSystems Lesson Start earlier Next Time Outline rules Choose a home
- 41. After Launch The story continues…
- 43. 1. What already exists? 2. What is the significance? 3. How will it be used again in the future? Ask:
- 44. Guard the system, or it will unravel quickly. #DesignSystems Lesson
- 45. 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
- 50. This design system has made my life rainbows and unicorns. “Dan Mouyard Front-End Developer Extraordinaire
- 53. How do you get buy in?
- 54. “ John Maeda Design in Tech Report ‘Scale’ a company’s design function through better managing/leading of designers and shareable design systems
- 55. Time Developing & Refining System Implementing System Money Design System Traditional Process Frame it around investment.
- 56. Project Management DevelopmentUser Experience Design System Business Development GovernanceDesign & Branding
- 58. Teach your clients. Share your approach. #DesignSystems Lesson
- 59. Tips and Tricks
- 60. Be consistent!
- 61. WIN!
- 62. Be organized!
- 63. WIN!
- 64. Communicate!
- 65. WIN!
- 66. Code!
- 67. WIN!
- 68. Decide on the afterlife!
- 69. WIN!
- 70. You have bigger fish to fry. #DesignSystems Lesson
- 71. Like fun 404 pages and pre- loaders.
- 72. Who wouldn’t want more delight?
- 73. Thank you.
- 74. Rollout Handoff Educate / Buy-in Keep it Fresh Questions we’re still working on