Download to read offline
More Related Content
Design systems
- 1. Burton Smith Senior SoftwareEngineer at Bunzl North America burton@breakstuff.io | @stuffbreaker Speed Up Development with Design Systems
- 3. The Problem 1. MultipleTeams 1. Marketing Team – Graphic Designers 2. Software Engineering Team – Hard-Core Developers 2. Different Skill Sets 1. Marketing Team has very little knowledge of the web 2. Software engineering Team has very little knowledge of design 3.Inefficiencies Ensued
- 4.
- 5. What is aDesign System? Design Systems – The comprehensive set of values, semantics, syntax, and context that form the foundation of a shared design language Style Guide – Style guide documentation is your “storefront” and includes crafted and detailed documentation with information like usage guidelines and code-style principles. Pattern Library – An organized set of related, reusable components, often containing code examples, design guidelines, and use cases
- 6. What is aDesign System? Pattern LibraryStyle Guide Design System
- 7. Key Benefits • Timesave on designing and building modules • Time saved on making site-wide changes • Faster Product Launches • Brand Unity at Scale • Visual Consistency • Teamwork and Collaboration • Reduce learning curve for new employees • Increase the quality of our products
- 8. Our Key Areasof Focus Purpose & Aesthetics Developer Experience (DX) User Experience (UX)
- 9. The Overview… Step 1- Systematize the Interface(s) • Define guiding design principles • "As we do this, keep this in mind…" • “No needless parts. Every design element, from the largest to the smallest, must have a purpose, and contribute to the purpose of a larger element it is part of. If you can’t explain what an element is for, most likely it shouldn’t be there.” • "Our UI should be simple and easy to use. A user should only hav e to learn it once. After that is should feel as if they have been doi ng it this way for years."
- 10. The Overview… Step 1- Systematize the Interface(s) - Continued • Define and standardize reusable design patterns. • Establish a pattern library. • Set up master design files with up-to-date patterns. • Refactor code and front-end architecture to support the modular approach. • Establish a coding standards (ie – B.E.M., OOCSS, etc.)
- 11. The Overview… Step 2- Establish Shared Processes and Governance • Establish Accessibility, Performance, and other Standards • Set up knowledge-sharing processes (through conversations, collaboration, pairing, training, and so on). • Promote the pattern library and encourage its use across the company. • Promote shared design language across teams and disciplines. • Make introduction to the design system part of the induction process.
- 12. Where to start… •Create a Pattern Map • AKA - Customer Journey Map, UX Map, "Job to be Done", etc… • Conduct an Interface Inventory • Define Patterns
- 13.
- 14. Create a SharedLanguage
- 15.
- 16. Create Your Base •Color • Interactive States • Animations • Typography • Spacing • Iconography Styles • Shapes and Borders • Illustrations • Photography • Voice and Tone
- 17. More Info • DesignSystems by Alla Kholmatova • Atomic Design by Brad Frost CSS Architecture • ITCSS • The ten commandments of sane style sheets • Clarion
- 18. Some of myfavorite design systems… • 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://adele.uxpin.com/
- 19. Useful tools… • https://cssstats.com/ •https://accessibilityinsights.io/ • http://wave.webaim.org/ • https://developers.google.com/web/tools/lighthouse/ • https://contrast-ratio.com/