Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Empowering Designers to Code, Diana Mounter


Published on

Taken from the Future of Web Design, San Francisco 2015 and New York.

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.

Published in: Design
  • Be the first to comment

Empowering Designers to Code, Diana Mounter

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