Should developers learn Design Systems?
@tian_yi_wang
What is a design system?
-
Everything that makes up your product.
-
Typography, layouts and grids, colours, icons, assets, components and coding conventions.
-
Style-guide and documentation.
A design system is bringing all of these together in a way that allows your entire team to learn, build, and grow.
What is a design system?
"A design system is an interconnected set of elements that is coherently organised in a way that achieves something."
- Donella H. Meadow, Thinking In Systems
Examples
Material design
Salesforce Design System
Shopify Polaris
United States Web Design System
IBM Carbon Design System
Atlassian Design System
Why do we need a design system?
A Car
Benefits
- Consistency
- Customisability
- Accessibility
- Product usability
- Easier onboarding
- Enhanced development speed
- Easier to scale
Drawbacks
- Time consuming
-
Up-front commitment
-
Necessary team buy-in
-
Ongoing maintenance
Time consuming and Up-front commitment
Start small and iterate
Design takes iteration, and design
systems make it easier.
Necessary team buy-in
Investing time to communicate/educate your team.
Investing in your team is never a bad idea
Ongoing maintenance
-
Create good work flows
-
Use good design tools
Why should developers care?
- Understand the WHY
- Better application architecture
- No guess work anymore (or use ruler on the screen)
- Consistency among developers
Breaking interfaces down into patterns has been immensely helpful in learning and reevaluating the best possible code to implement them.
Comopnent
Comopnent
Page Layout
Interaction model
The problem
Not much interaction/feedback between designers and developers
A good System empowers designers to code, and empowers engineers to design
- Diana Mounter Github
Is Design system the solution?
Story time
Stack Shuttle
2 years
9 startups
Stack Shuttle
10 web apps
10 mobile apps
8 API servers
One regret
We did not have a design system
😭😭😭😭😭😭😭😭😭😭😭
Thank you!
@tian_yi_wang
Design systems for developers
By Tianyi Wang
