Download to read offline
Building Design Systems - Columbus Web Group
- 1. Building a DesignSystem Burton Smith burton@breakstuff.io @stuffbreaker
- 2. A Bit AboutMe…
- 3. A Bit MoreAbout Me…
- 4.
- 5. What is accidentalarchitecture?
- 6.
- 7. It Starts WithBrand “Don’t just be a name. A name is not a brand. If a name makes a promise and lives up to that promise anywhere in the world, then it’s a brand.” -- Horst Schulze Cofounder, The Ritz-Carlton Hotel
- 8. What is aDesign System? Pattern Library Style Guide Design System
- 9. What is aDesign System? “A design system is a living system of guidelines, reusable code and design assets, and tools that helps organizations deliver consistent, on- brand experiences at scale and over time.” -- Hack the Design System
- 10. What is aStyle Guide? A Style Guide is the documentation and guidelines of a specific implementation of the Design System for a given brand or product.
- 11. What is aPattern Library? An organized set of related, reusable values, functions, and components, often containing code examples, design guidelines, coding standards, and use cases which are designed to create consistency, efficiency, and quality in the product.
- 12. What is aDesign System? Pattern Library Style Guide Design System
- 13. What is aDesign System? Pattern Library Style Guide - A Design System Style Guide - C Style Guide - B
- 14. Benefits of aDesign System • Time save on designing and building modules • Time saved on making site-wide changes • Faster Feature Development and Product Launches • Brand Unity at Scale • Visual Consistency • Teamwork and Collaboration • Reduce learning curve for new employees • Increase the quality of our products
- 15. "For every $1spent on the design system saved $3 in design and development effort.” -- Ben Callahan President, SparkBox
- 16.
- 17. Before I goany further…
- 18. If you’re goingto use a Third-Part Design System…
- 19. 4 Keys toa Successful Design System 1. Scope Definition 2. Development and Testing 3. Implementation 4. Documentation
- 20. Define Your Scope •You don’t have to have a site before you build your design system, but you should have your user experience identified.
- 21. Define Your Scope •Do a site audit • Identify what you need • Design a representation of how components will look/behave
- 22. Define Your Scope SketchAdobe XDFigma
- 23. Additional Things toIdentify with Scope • Color • Interactive States • Animations • Typography • Fonts • Media Queries • Spacing • Iconography • Shapes and Borders • Voice and Tone • Performance Standards • Accessibility Standards • Technical Constraints
- 24.
- 25. It’s too constraining… "Creativitythrives under intelligent constraints." -- Carmine Gallo Talk Like TED
- 26. Development and Testing •Key Abstractions • CSS • Reusable design Tokens • Reusable classes and style patterns • HTML • Isolated/reusable markup for easy implementation • Abstracted for quick modifications • JavaScript • Logic that is specific for managing the behavior and state of your patterns
- 27. Development and Testing •Build meaningful Abstractions Flexible Easy to Use Reliable
- 28. Development Tools Tailwind CSS Tachyons CSSin JS Pre/Post-Processors Utility Libraries
- 29.
- 30.
- 31.
- 32. Implementation • How doapplications now implement your system? • What is the delivery method? • How do they implement it? • How can/should they extend it?
- 33. Documentation • Who isresponsible for the documentation governance? • Where can you find it and how easy is it to use? • How, When, and Where to use (or not use) aspects of your design system
- 34.
- 35.
- 36. Documentation Examples • https://atlassian.design/ •https://canvas.hubspot.com/ • https://developer.microsoft.com/en-us/fabric • https://meetup.github.io/swarm-design-system/ • https://slack.design/ • https://design-system.pluralsight.com/ • https://ux.mailchimp.com/ • https://adele.uxpin.com/
- 37. Additional Resources • DesignSystems by Alla Kholmatova • Atomic Design by Brad Frost • Building Design Systems by Sarrah Vesselov and Taurie Davis • CSS Architecture • ITCSS • The ten commandments of sane style sheets • Clarion - https://projectclarion.com
- 38.
- 39. The Challenge Develop DeployImplement +
- 40. The Challenge Install: Clarion –npm install –g clarion Vue CLI - npm install -g @vue/cli Repo: https://github.com/break-stuff/cwg-design-system
- 41.