Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Systems Aren’t Hard

Design Systems Aren’t Hard

Design systems aren’t hard.
But they are complex.
And they’re also hard.

Design systems are often thought of in terms of the visible parts - a Sketch file, a repository of React code, a documentation website. But these are only the artifacts of the system. A design system is actually the thinking and the decision making and the principles of your organization. Producing the artifacts is the easy part - maintaining the institutional value of the design system is the hard part.

In this talk we’ll dive into the lessons I’ve learned during my time working on a large design system for a fast growing company. Hopefully we can help you avoid some of the common pitfalls and enjoy the quiet satisfaction of working on a design system so successful no one ever thinks twice about it.

Presented at:
OpenJS 2020
Full Slidedeck with Speaker Notes:
https://github.com/milsyobtaf/prez/blob/primary/2020/OpenJS/design-systems-arent-hard-openjs_notes.pdf

milsyobtaf

June 24, 2020
Tweet

More Decks by milsyobtaf

Other Decks in Technology

Transcript

  1. DUSTIN YOUNSE But they are complex. And also hard. DESIGN

    SYSTEMS AREN’T HARD OPENJS 2020
  2. WHO’S THIS GUY? @milsyobtaf from the internet I’ve worked on

    large websites since 2008 I’ve worked with “design systems” since we called them “swatches” and “style tiles” Currently in Design Engineering at Indeed, a job that comes with the greatest laptop sticker
  3. WHAT IS A DESIGN SYSTEM?

  4. None
  5. Organizations which design systems … are constrained to produce designs

    which are copies of the communication structures of these organizations." CONWAY’S LAW
  6. Your website is a manifestation of your organization’s problems “UNCLE”

    DAVE RUPERT’S LAW
  7. None
  8. WHAT ISN’T A DESIGN SYSTEM?

  9. A FIGMA LIBRARY

  10. WHAT ISN’T A DESIGN SYSTEM?

  11. A REACT COMPONENT LIBRARY

  12. WHAT ISN’T A DESIGN SYSTEM?

  13. AN EXTERNAL WEBSITE PROMOTING YOUR DESIGN SYSTEM

  14. THESE ARE ARTIFACTS - NOT THE SYSTEM

  15. SO… WHAT IS A DESIGN SYSTEM?

  16. AN AGREEMENT ON HOW DIGITAL PRODUCTS ARE MADE

  17. DESIGN SYSTEM AGREEMENTS User Interface Design: how a digital experience

    looks Interaction Design: how a digital experience feels Content Strategy: how a digital experience sounds Documentation: how a digital experience is crafted
  18. ⌛ DESIGN SYSTEMS TAKE TIME

  19. None
  20. ⌛ DESIGN SYSTEMS TAKE TIME AND THEY TAKE MONEY

  21. WHY BOTHER WITH A DESIGN SYSTEM?

  22. DESIGN SYSTEMS ARE ALL ABOUT SCALE Interface Design at scale

    Interaction Building at scale Content Creation at scale
  23. DESIGN SYSTEMS ARE ALL ABOUT SCALE When everyone on your

    team knows how a thing should be built, they can just build it.
  24. DESIGN SYSTEMS ARE ALL ABOUT SCALE When everyone on your

    team knows how a thing should be built, they can just build it. #1 Support Request: How do I do X?
  25. DESIGN SYSTEMS ARE ALL ABOUT SCALE When everyone on your

    team knows how a thing should be built, they can just build it. #1 Support Request: How do I do X? #2 Support Request: Why do I do X?
  26. A DESIGN SYSTEM IS A SERVICE NOT A PRODUCT

  27. YOU NEED TO ANSWER QUESTIONS, NOT WRITE CODE

  28. None
  29. IF YOU ONLY HAVE THE TIME OR THE MONEY FOR

    ONE ARTIFACT, WRITE DOCUMENTATION
  30. DESIGN SYSTEM DOCUMENTATION If a Design System is made up

    of agreements, you need to write those agreements down.
  31. DESIGN SYSTEM DOCUMENTATION If a Design System is made up

    of agreements, you need to write those agreements down. If you have the budget, hire a Service Designer.
  32. DESIGN SYSTEM DOCUMENTATION If a Design System is made up

    of agreements, you need to write those agreements down. If you have the budget, hire a Service Designer. Should change as often as necessary.
  33. DESIGN SYSTEM HELPS EVERYONE

  34. ACCESSIBILITY AT SCALE Buttons that work as buttons

  35. ACCESSIBILITY AT SCALE Buttons that work as buttons Links that

    work as links
  36. ACCESSIBILITY AT SCALE Buttons that work as buttons Links that

    work as links Animations that respect prefers-reduced-motion
  37. ACCESSIBILITY AT SCALE Buttons that work as buttons Links that

    work as links Animations that respect prefers-reduced-motion INCLUSION AT SCALE
  38. ACCESSIBILITY AT SCALE Buttons that work as buttons Links that

    work as links Animations that respect prefers-reduced-motion INCLUSION AT SCALE Form fields that accept accented characters
  39. ACCESSIBILITY AT SCALE Buttons that work as buttons Links that

    work as links Animations that respect prefers-reduced-motion INCLUSION AT SCALE Form fields that accept accented characters Right-to-left text presentation that just works
  40. IF YOU DO NOTHING ELSE

  41. WRITE DOCUMENTATION

  42. HIRE A SERVICE DESIGNER WRITE DOCUMENTATION

  43. DESIGN SYSTEMS ARE HARD

  44. DESIGN SYSTEMS ARE HARD AND THAT’S THE WORK

  45. - Why Every Design System Needs a Service Designer -

    Conway’s Law / Uncle Dave's Law - Anatomy of a Design System - Design System Checklist - How the Right Design System Streamlines a Large Organization’s Digital Development RESOURCES