Taken from the Future of Web Design, San Francisco 2015 and New York. https://futureofwebdesign.com/san-francisco-2015/ https://futureofwebdesign.com/nyc-2015/ 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.

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

29. Teach designers about branching

30. Encourage code reviews

32. Prototyping
(with production code)

33. Code gives engineers a better idea
of your intent

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

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

47. Reduce the feedback loop

50. <Culture />

51. Make coding part of your
design culture

54. <What
happens
when
designers
code? />

55. They build a new style guide

57. It that means engineers can get
further without designers

58. 699 deletions

62. Start with onboarding

63. Start with onboarding
Build confidence

64. Start with onboarding
Build confidence
Document everything

65. Start with onboarding
Build confidence
Document everything
Improve workflows with tooling

66. Start with onboarding
Build confidence
Document everything
Improve workflows with tooling
Made coding part of design culture

67. True collaboration isn’t throwing
designs over the wall

68. It’s sharing the responsibility with
your team to build a quality product

69. Thanks!