A short presentation on getting started with Design Systems for developers.

1. Burton Smith
Senior Software Engineer at Bunzl North America
burton@breakstuff.io | @stuffbreaker
Speed Up Development with
Design Systems

3. The Problem
1. Multiple Teams
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. My Response

5. What is a Design 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 a Design System?
Pattern LibraryStyle Guide
Design System

7. Key Benefits
• Time save 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 Areas of 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. Where to start…

14. Create a Shared Language

15. Use your tools…

16. Create Your Base
• Color
• Interactive States
• Animations
• Typography
• Spacing
• Iconography Styles
• Shapes and Borders
• Illustrations
• Photography
• Voice and Tone

17. More Info
• Design Systems by Alla Kholmatova
• Atomic Design by Brad Frost
CSS Architecture
• ITCSS
• The ten commandments of sane style sheets
• Clarion

18. Some of my favorite 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/