Tooling for Designer–Developer Collaboration

In search of better tools and process to enable team members to do better work.

Transcript

1. Tooling for Designer–Developer Collaboration ExplodeConf - 2016
2. Jeff Jewiss @jeffjewiss
7. The Goal Well designed websites and apps Works on necessary devices and screen sizes Bridge the gap between designers and developers
8. BFFs
9. Expectations Must solve a problem for users Design systems have the highest leverage The browser is the platform
11. Why is working together hard? Where to look for inspiration Tools of the trade (systems design) CSS as a collaboration medium
12. Why is this so hard?
23. We Need Boundaries
27. Role Models
37. Prototyping
38. Paper/rough sketches User Flows Proof of Concept Spike
40. Get to Code Faster Prototypes are amazing for communicating intent They rarely take into account constraints of the browser Creating a flow for every screen size is unrealistic
41. Grid Systems
47. http://philipwalton.com/articles/side-effects-in-css/
48. http://philipwalton.com/articles/side-effects-in-css/
49. http://philipwalton.com/articles/side-effects-in-css/
50. Flexbox
52. Styleguides
54. What makes a good styleguide? No elements left out Team buy-in Live – generated from code
58. https://github.com/chrislopresto/ember-freestyle/
59. CSS Is Hard
61. Deleting unused css is hard and time consuming. And more often than not - it’s not work people are excited to do. So what happens? People keep writing more and more css. http://mrmrs.io/writing/2016/03/24/scalable-css/
63. http://thesassway.com/beginner/the-inception-rule
64. thesassway.com/beginner/the-inception-rule
65. CSS COMPONENTS
66. BEM OOCSS SMACCS ITCSS SUITCSS
69. CSS STATS
76. CSS FUNCTIONAL
78. http://philipwalton.com/articles/side-effects-in-css/
79. http://philipwalton.com/articles/side-effects-in-css/
81. Writing new css should be the exception, not the rule. http://mrmrs.io/writing/2016/03/24/scalable-css/
89. Recap Set boundaries Find role models Leverage design systems and process Get to code, write CSS at scale
90. THANK YOU! Jeff Jewiss @jeffjewiss
91. Q & A