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!

Transcript

1. NDC Oslo 2020 Living Style Guides Bringing Designers and Developers Together
2. Hi! @timgthomas timgthomas.com
3. Style Guides Documentation Guidelines Constraints Focus
5. Living Style Guides Change
7. Living Style Guides in Software Change Formalized visual styles Code examples User interactions
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 concepts
19. Core Concepts Colors Branding Typography Icons Layouts + units of measure
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