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!

timgthomas

June 11, 2020
Tweet

More Decks by timgthomas

Other Decks in Design

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