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
   

   View Slide

2. Hi!
   @timgthomas
   timgthomas.com
   

   View Slide

3. Style Guides
   Documentation
   Guidelines
   Constraints
   Focus
   

   View Slide

4. View Slide

5. Living Style Guides
   Change
   

   View Slide

6. View Slide

7. Living Style Guides in Software
   Change
   Formalized visual styles
   Code examples
   User interactions
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. Choosing a Living Style Guide
    Every team is different
    Look at other documentation
    Decide between existing and new patterns
    Not all-or-nothing
    

    View Slide

16. Pros
    Documentation
    UX consistency
    Bootstrapping
    

    View Slide

17. Cons
    Curated
    Brittle
    Limits creativity
    

    View Slide

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

    View Slide

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

    View Slide

20. Demo
    

    View Slide

21. Responding to Change
    Accidental
    Purposeful
    Ongoing
    

    View Slide

22. Visual Testing
    

    View Slide

23. Responding to Change
    Accidental
    Purposeful
    Ongoing
    

    View Slide

24. Best Practices
    Include accessibility
    Start small
    Keep style guide components separate
    Adapt current practices, tools
    Make decisions as a team
    

    View Slide

25. Further Reading
    github.com/timgthomas/sketch-processor
    developer.sketch.com/reference/api
    yui.github.io/yuidoc
    primer.style
    

    View Slide

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

    View Slide