Mind the Gap: Bringing Designers and Developers Together

Developers and designers rarely speak the same language. As wireframes turn into web pages, points become pixels, HSB colors are coerced into RGB hex values... It's no wonder a schism exists between these two essential disciplines, but it doesn't have to be that way. In this session, we'll cover a number of techniques to reduce context switching—and increase understanding—across the design/code boundary. You'll find it's not too tricky to take that first step into more efficient collaboration...provided you mind the gap!

Transcript

1. Mind the Gap:
   Bringing Designers and
   Developers Together
   Tim G. Thomas
   

   View Slide

2. View Slide

3. HI!
   Tim G. Thomas
   @timgthomas
   δ ζ
   

   View Slide

4. TOOLS
   

   View Slide

5. TOOLS
   !==
   δ ζ
   

   View Slide

6. COLORS
   Tip #1:
   

   View Slide

7. COLORS FOR DESIGNERS
   HSB
   δ ζ
   

   View Slide

8. COLORS FOR DESIGNERS
   Shades and tints
   δ ζ
   

   View Slide

9. COLORS FOR DEVELOPERS
   RGB
   #bada55
   δ ζ
   

   View Slide

10. BRIDGING THE GAP
    hsl()
    δ ζ
    

    View Slide

11. BRIDGING THE GAP
    Preprocessors
    $brand-blue: hsl(...);
    δ ζ
    

    View Slide

12. BRIDGING THE GAP
    Color Abstractions
    $brand-blue: hsl(...);
    $primary: $brand-blue;
    δ ζ
    

    View Slide

13. BRIDGING THE GAP
    Color Functions
    $hover: tint($normal, 10%);~
    $active: shade($normal, 10%);
    δ ζ
    

    View Slide

14. COLORS
    Demo:
    

    View Slide

15. FONTS
    Tip #2:
    

    View Slide

16. FONTS FOR DESIGNERS
    Points
    Named Weights
    Endless Typefaces
    δ ζ
    

    View Slide

17. FONTS FOR DEVELOPERS
    em/rem/px
    X00
    Er...Times New Roman?
    δ ζ
    

    View Slide

18. BRIDGING THE GAP
    :root Reset
    :root { font-size: 62.5%; }
    /* 1.0rem === 10pt */~~~~~~
    δ ζ
    

    View Slide

19. BRIDGING THE GAP
    CSS variables
    $light: 300; $regular: 500;
    δ ζ
    

    View Slide

20. BRIDGING THE GAP
    δ ζ
    

    View Slide

21. FONTS
    Demo:
    

    View Slide

22. DESIGNS
    Tip #3:
    

    View Slide

23. DESIGNS FOR DESIGNERS
    Photoshop
    Pixel-perfect
    δ ζ
    

    View Slide

24. DESIGNS FOR DEVELOPERS
    ???
    δ ζ
    

    View Slide

25. BRIDGING THE GAP
    Style Tiles
    δ ζ
    

    View Slide

26. BRIDGING THE GAP
    δ ζ
    

    View Slide

27. DESIGNS
    Demo:
    

    View Slide

28. LAYOUTS
    Tip #4:
    

    View Slide

29. LAYOUTS FOR DESIGNERS
    δ ζ
    

    View Slide

30. LAYOUTS FOR DEVELOPERS
    
    δ ζ
    

    View Slide

31. BRIDGING THE GAP
    SVG
    δ ζ
    

    View Slide

32. LAYOUTS
    Demo:
    

    View Slide

33. WRAPPING UP
    

    View Slide

34. TOOLS
    !==
    δ ζ
    

    View Slide

35. TOOLS
    ❤
    δ ζ
    

    View Slide

36. THANKS!
    @timgthomas
    

    View Slide