Design Systems: when and how much?

2d84f9cec8c91449388bfb2b8078ef28?s=47 Diana
April 27, 2017

Design Systems: when and how much?

Design systems are an investment. It takes time and resources to build and maintain them. When your team is small, investing in design systems can seem unnecessary or feel like a luxury you can't afford. Many companies don't employ people to focus on design systems until the inefficiencies of not having one become too painful to bear.

This talk shares examples from building design systems at GitHub, shows you how this can improve the design and development workflow, and help you to understand when you need to start building design systems and how much of a system you might need.

2d84f9cec8c91449388bfb2b8078ef28?s=128

Diana

April 27, 2017
Tweet

Transcript

  1. Design Systems When and how much? Diana Mounter | @broccolini

  2. Design Systems at GitHub !

  3. What is a design system?

  4. None
  5. None
  6. None
  7. Style guide, pattern library, CSS framework, or design system? ht

    @jonrohan
  8. None
  9. ! Design Systems at GitHub

  10. Rules, constraints, and principles, implemented in design and code.

  11. Color Rule: must pass minimum color contrast ratio of 4.5:1

    Constraint: number of colors in the palette Principle: color should be used in a meaningful way
  12. None
  13. .utilities {…} .Components {…} .custom-styles {…} $foreground $background $border

  14. Typography Spacing Color Parts of a system

  15. Typography Spacing Color Components Page layouts Parts of a system

  16. Typography Spacing Color Components Page layouts Interaction models Voice &

    tone, words, 
 grammar & mechanics Parts of a system
  17. Interrelated independent parts

  18. Button Component Interaction model Component Page layout

  19. GitHub Design System Documentation (style guide) Prototyping tool Primer CSS

    Sketch UI Kit
  20. GitHub Design System Documentation (style guide) Prototyping tool Primer CSS

    JS code style Brand guidelines Sketch UI Kit Email toolkit Native 
 UI kit
  21. GitHub Design System Documentation (style guide) Prototyping tool Primer CSS

    JS code style Brand guidelines Sketch UI Kit Email toolkit Native 
 UI kit
  22. Why

  23. None
  24. primercss.io github.com GitHub app More CSS Primer modules No docs

    }
  25. Systems weren’t clearly defined 
 (in code or design)

  26. 2,449
 hex values

  27. Improve the workflow for designers who code & engineers who

    build UI
  28. Introduce utilities based on systems

  29. <div class=“p-3"> .p-1 { padding: $spacer-3; } $spacer-3: 16px;

  30. 8 breaks down, and adds up to whole numbers more

    easily 16 16 16 16 16 16 16 16 32 32 32 32 64 64 32
  31. Typography

  32. Behind every part of the system is a micro-system

  33. 7 different box styles

  34. // block .Box {…} // elements .Box-header {…} .Box-body {…}

    .Box-footer {…} // modifiers .Box-header--blue {…} .Box--large {…}
  35. "If I’m reading html, I want to know what the

    css is going to do.” Adam Morse, CSS and Scalability
  36. <div class="Box Box--large”> <h2 class="text-center text-green"> 
 Saved!</h2> </div>

  37. Documentation

  38. Feedback loop HTML CSS I want to make a change!

  39. Feedback loop HTML CSS I want to make a change!

  40. A good system empowers 
 designers to code, and empowers

    engineers to design.
  41. • Highly reusable and flexible styles • A clear and

    consistent naming convention • Up-to-date and well written documentation
  42. “I feel like I have super powers and don’t want

    everyone else to realize that I’m totally faking.”
  43. Scaling the system

  44. What if you didn’t have to write all that markup

    either?
  45. Primer CSS New 38% .erb files using Primer on dotcom

  46. GH

  47. GH R J R J J J J R R

    R J J R R R J
  48. GH R J ? J ? J J R ?

    R J J R R R J
  49. System Code Design programs Documentation

  50. Source of truth Code Design programs Documentation

  51. Distill the system into it’s 
 purest form

  52. When and how much?

  53. When? No System It really hurts not having one

  54. No system Material Design We need a design system! Started

    to get painful
  55. “…the inefficiencies that a medium [sized] team can roll with

    are catastrophically wasteful to a team of our size” Jon Gold, Painting with Code
  56. This should be solved once Component Interaction model Component Page

    layout
  57. You can start with systems

  58. Design systems should be 
 built for change.

  59. When? Now! How much? As much as you need!

  60. Thank you Diana Mounter | @broccolini