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

Living Style Guides: Bringing Designers and Developers Together

Living Style Guides: Bringing Designers and Developers Together

Developers and designers rarely speak the same language. As wireframes turn into web apps, points become pixels, hues are coerced into hex values…it's no wonder a schism exists between these two essential disciplines! Fortunately, it doesn't have to be that way. In this session, we'll dive into the world of living style guides: the perfect pairing of design and code. We’ll explore how to architect your apps to make use of style guides, make design apps work for you and your design team, and reign in your varying component styles, all while providing your users a more consistent and refined experience!


June 11, 2020

More Decks by timgthomas

Other Decks in Design


  1. NDC Oslo 2020 Living Style Guides Bringing Designers and Developers

  2. Hi! @timgthomas timgthomas.com

  3. Style Guides Documentation Guidelines Constraints Focus

  4. None
  5. Living Style Guides Change

  6. None
  7. Living Style Guides in Software Change Formalized visual styles Code

    examples User interactions
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. Choosing a Living Style Guide Every team is different Look

    at other documentation Decide between existing and new patterns Not all-or-nothing
  16. Pros Documentation UX consistency Bootstrapping

  17. Cons Curated Brittle Limits creativity

  18. Ingredients Team buy-in Sources of truth Hosting Change process Core

  19. Core Concepts Colors Branding Typography Icons Layouts + units of

  20. Demo

  21. Responding to Change Accidental Purposeful Ongoing

  22. Visual Testing

  23. Responding to Change Accidental Purposeful Ongoing

  24. Best Practices Include accessibility Start small Keep style guide components

    separate Adapt current practices, tools Make decisions as a team
  25. Further Reading github.com/timgthomas/sketch-processor developer.sketch.com/reference/api yui.github.io/yuidoc primer.style

  26. Thanks! #conference-room-2 @timgthomas