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
3. HI! Tim G. Thomas @timgthomas δ ζ
4. TOOLS
5. TOOLS !== δ ζ
6. COLORS Tip #1:
7. COLORS FOR DESIGNERS HSB δ ζ
8. COLORS FOR DESIGNERS Shades and tints δ ζ
9. COLORS FOR DEVELOPERS RGB #bada55 δ ζ
10. BRIDGING THE GAP hsl() δ ζ
11. BRIDGING THE GAP Preprocessors $brand-blue: hsl(...); δ ζ
12. BRIDGING THE GAP Color Abstractions $brand-blue: hsl(...); $primary: $brand-blue; δ ζ
13. BRIDGING THE GAP Color Functions $hover: tint($normal, 10%);~ $active: shade($normal, 10%); δ ζ
14. COLORS Demo:
15. FONTS Tip #2:
16. FONTS FOR DESIGNERS Points Named Weights Endless Typefaces δ ζ
17. FONTS FOR DEVELOPERS em/rem/px X00 Er...Times New Roman? δ ζ
18. BRIDGING THE GAP :root Reset :root { font-size: 62.5%; } /* 1.0rem === 10pt */~~~~~~ δ ζ
19. BRIDGING THE GAP CSS variables $light: 300; $regular: 500; δ ζ
20. BRIDGING THE GAP δ ζ
21. FONTS Demo:
22. DESIGNS Tip #3:
23. DESIGNS FOR DESIGNERS Photoshop Pixel-perfect δ ζ
24. DESIGNS FOR DEVELOPERS ??? δ ζ
25. BRIDGING THE GAP Style Tiles δ ζ
26. BRIDGING THE GAP δ ζ
27. DESIGNS Demo:
28. LAYOUTS Tip #4:
29. LAYOUTS FOR DESIGNERS δ ζ
30. LAYOUTS FOR DEVELOPERS <div> δ ζ
31. BRIDGING THE GAP SVG δ ζ
32. LAYOUTS Demo:
33. WRAPPING UP
34. TOOLS !== δ ζ
35. TOOLS ❤ δ ζ
36. THANKS! @timgthomas