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

Made with Slides.com