Empowering Designers to Code

If you're a designer who wants to code, you can learn a lot from online tutorials, side-projects, and contributing to Open Source. However, unless you get to work on something with a significant user base, you're unlikely to get exposed to the experiences that will help you write production-level code. For most designers the best way to learn serious front-end development is on the job. Many companies want to attract designer-coders, but they need to back this up with a culture that embraces them, and supports designers with training, tooling, and documentation. In this talk you’ll learn how you and your team can build a designer-friendly coding environment to improve design workflows, team collaboration, and product design decisions.

Transcript

1. <Empowering designers 
 to code /> Diana Mounter Senior Product Designer at Etsy
2. Diana Mounter @broccolini
4. <Empowering designers 
 to code />
5. This is not about whether designers should code or not
6. Or how to make designers code if they don’t want to
7. This is about ways you can empower designers to code, and some of it's benefits
8. The first website I built as part of my job was 10 years ago.
9. Etsy is the first place where I’ve really felt empowered to code.
10. My boss didn’t know what I was doing and just wanted the website built (for free) Started at Etsy
11. Setup dev environment? Git commit what?! How to push O_o Where is all the code? How to run tests?
12. Designers who could code,
 but don’t as part of their job Companies want designers who can code
14. Where to start?
15. <Start with onboarding />
16. Set up development environments from the beginning
17. Ship something
20. To deploy you have to: Install text editor Setup aliases in terminal Virtual Machine Authenticate SSH keys with GitHub Setup Bash files Know how to run tests Know the IRC commands for deploying
21. ? D E P L O Y I N G The first push program demystifies the process. Anyone can push code, given the right support.
22. The first push program demystifies the process. Anyone can push code, given the right support.
23. The buddy system
24. Build relationships during onboarding and training
25. <Build confidence />
26. Give designers a safe way to practice with production code
27. Teach designers to use Git
28. Git is an empowering tool for designers to learn
29. Teach designers about branching
30. Encourage code reviews
31. Collaboration feels great
32. Prototyping (with production code)
33. Code gives engineers a better idea of your intent (even if it’s not production code)
34. Prototypes are used in usability testing
35. Designing in the browser
36. <Document everything />
37. Documentation allows people to be autonomous
38. There’s no silver bullet to keeping documentation up-to-date
39. BUT THAT’S IMPOSSIBLE!
40. Keep documentation where the code is, if you can
41. Use routine events to review documentation
42. <Improve workflows with tooling />
43. Tooling can make designing in code much more enjoyable.
44. Make it easy to see how code impacts the user experience
45. Robots are better at testing than humans
46. Reduce the feedback loop
49. <Culture />
50. Make coding part of your design culture
53. <What happens when designers code? />
54. They build a new style guide
56. It means engineers can get further without designers
57. 699 deletions
58. Designers collaborating to make a global font update
59. Designers Engineers
60. Start with onboarding Build confidence Document everything Improve workflows with tooling Made coding part of design culture
61. True collaboration isn’t throwing designs over the wall
62. It’s sharing the responsibility with your team to build a quality product
63. Thanks!