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

Building design systems at GitHub

Diana
December 15, 2016

Building design systems at GitHub

A lightning talk for the Design Systems Coalition NYC meetup covering where we started and some of the lessons learned this year.

Diana

December 15, 2016
Tweet

More Decks by Diana

Other Decks in Design

Transcript

  1. Problems • Piles and piles of CSS that does the

    same thing • Inconsistent styles • Inconsistent naming conventions
  2. This made our CSS: • Hard to maintain • Hard

    to de-bug • Hard to design & prototype with
  3. Which led to: • Bugs in production • Lengthy design-to-development

    times • Inconsistencies in the user experience
  4. Custom CSS Re-usable CSS Custom CSS Custom CSS Custom CSS

    Custom CSS Custom CSS Custom CSS Custom CSS Custom CSS Re-usable CSS Re-usable CSS
  5. Custom CSS Re-usable CSS Custom CSS Custom CSS Re-usable CSS

    Re-usable CSS Re-usable CSS Re-usable CSS Re-usable CSS
  6. 16 breaks down 8 8 4 4 4 4 2

    2 2 2 2 2 2 2 Spacing scale
  7. 16 breaks down, and adds up to whole numbers more

    easily. 32 32 32 32 32 32 32 32 64 64 64 64 128 128 64
  8. Adam Morse CSS and Scalability "If I’m reading html, I

    want to know what the css is going to do.”
  9. “Design decisions run all the way through a product, like

    mould in a good cheese” Cenny D What design sprints are good for
  10. Figma Sketch Pen & paper Prototyping in code Production implementation

    Photoshop Usability testing Where does design happen? Prototyping in InVision