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