Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Empowering Designers to Code

November 04, 2015

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.


November 04, 2015

More Decks by Diana

Other Decks in Design


  1. <Empowering designers 
 to code /> Diana Mounter Senior Product

    Designer at Etsy
  2. Diana Mounter @broccolini

  3. None
  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

  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
  13. None
  14. Where to start?

  15. <Start with onboarding />

  16. Set up development environments from the beginning

  17. Ship something

  18. None
  19. None
  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


  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

  45. Robots are better at testing than humans

  46. Reduce the feedback loop

  47. None
  48. None
  49. <Culture />

  50. Make coding part of your design culture

  51. None
  52. None
  53. <What happens when designers code? />

  54. They build a new style guide

  55. None
  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!