A few weeks ago I had the opportunity to deliver a talk at Shift in Split, Croatia. Shift is a developer conference, so initially, I thought it would be entertaining to talk about what it’s like to work with an engineer, from a designers perspective. The working title of the talk was Things Engineers Hate About Working With (Me) a Designer. I was going to share the mistakes I’ve made, and learned from, along the way. A manifesto of what not to do when working with an engineer. However, feedback included phrases like “it’s a bit tongue & cheek” and the best talks are ones that are “raw, honest and vulnerable.” You don’t write code, but you’ve been successful in spite of it. The lines are blurring between design & engineering. Why not talk about how tools have helped bridge that gap? There was something more interesting to talk about. I realized that I didn’t write code because I didn’t need to. For years I’d been spoiled, and to some extent enabled, by a handful of incredibly talented iOS engineers. The realization didn’t sit well with me. I scrapped everything and went back to the drawing board. Tools were my first introduction to a hobby  that turned into a passion  that has become an obsession  They have been steadily influencing and shaping me as a designer from the first time I sat in front of a computer in elementary school. I would not realize how much they’d impact my life until much much later. Tools have had a massive influence on me and my work, but had they on others?

2. THE PREAMBLE
Interactive

3. THE PREAMBLE
My first time

5. THE PREAMBLE
He’s a freak of nature

8. THE BASICS
. NYC . SD . SFSTL

9. An Eng{eering}lish Degree
THINGS YOU MIGHT NOT KNOW

11. I don’t write code
THINGS YOU MIGHT NOT KNOW

12. THINGS YOU MIGHT NOT KNOW
In spite of all that…

13. IT’S IRONIC LOOKING BACK
Tools were my first introduction to
a hobby that turned into a passion
that has become an obsession

14. IT’S IRONIC LOOKING BACK
Tools have been influencing me
from the first time I sat in front of a
computer in elementary school

16. MY FIRST INSTINCT
What it’s like to work with
an engineer, from a
designers perspective

17. WORKING TITLE
Things Engineers Hate
About Working With {Me}
a Designer…

18. DIRECT FEEDBACK
It’s a bit tongue & cheek

19. DIRECT FEEDBACK
Be honest & vulnerable

20. DIRECT FEEDBACK
He was spot on, 100%

21. DIRECT FEEDBACK
Engineers {my friends}
have enabled me

22. A MOMENT OF DOUBT & CLARITY
I scrapped everything

23. A MOMENT OF DOUBT & CLARITY
A better story emerged

24. A MOMENT OF DOUBT & CLARITY
Tools have had a massive
influence on me…

25. A MOMENT OF DOUBT & CLARITY
Prototyping {in particular}

26. A REALIZATION CAME OVER ME
Tools are everywhere

27. A REALIZATION CAME OVER ME
And we don’t appreciate
them nearly enough

28. A REALIZATION CAME OVER ME
I went from microfiche…

31. A REALIZATION CAME OVER ME
to…

34. BACK IN THE DAY
Spreading the Word

35. FAST FORWARD 20 YEARS

36. FAST FORWARD 20 YEARS

37. BACK IN THE DAY
Synthesize & Tabulate

38. FAST FORWARD 20 YEARS (AGAIN)

39. SLACK CAME CALLING
John Maeda & Khoi Vinh

40. I WAS ON TO SOMETHING, BUT

41. KHOI VHIN: DESIGN TOOLS SURVEY 2015
2015 Subtraction.com Design Tools Survey
{4000} participants shared the
tools they were using to design
Brainstorming & Ideation . Wire framing . Interface design . Prototyping . Project management . Version control & File management

42. 44
TOOLS I USED TO CREATE THIS TALK

43. TOOLS I USED TO CREATE THIS TALK
Quip
Keynote
Twitter
Facebook
Messenger
Linkedin
Principle
Flinto
Sketch
Photoshop
Illustrator
Spotify
Dropbox
Fount
Design Hunt
Chrome
Google Forms
Inbox
Sheets
Typekit
Font Manager
Image Capture
AirDrop
Snapchat
Mirror Sketch
Flint Preview
Principle Mirror
Image Capture
Photos
Craft
Zeplin
SMS
Caffeine
Bartender
Slack
FaceTime
Phone
Notes
Flux
Calculator
Safari
Vimeo
Spaces
FastestTube
Preview

45. INSIDE THE NUMBERS
107
4
6,601
participants
continents
words

46. THE SKILLS WE POSSESS

47. HOW LONG WE’VE BEEN DESIGNING

48. WHERE WE’RE DESIGNING

49. ROLE & RESPONSIBILITY

50. THE MEDIUMS WE WORK IN

51. THE TOOLS WE ARE DESIGNING WITH

53. OVERCOME WITH COMPLACENCY
Just a decade ago, competition among the tools for digital
designers was muted, at best. Today new applications and
utilities debut seemingly every other week.
-Khoi Vinh, Subtraction

54. PLAYING THE HAND WE’D BEEN DEALT
Photoshop is amazing, but…

56. PLAYING THE HAND WE’D BEEN DEALT
Illustrator is amazing, too…

57. A REVIVAL
The Birth of Sketch

58. A FUNERAL
The Death of Flash

59. WOLF IN SHEEP’S CLOTHING

61. GOOD DESIGN
Requires empathy
Pleasurable
Provides context
Simple & focused
Meticulous

62. THE DEVIL IS IN THE DETAILS
Details are not the details.
They make the design.
-Charles Eames

63. FOR MANY YEARS WE DESIGNED
{primarily} static experiences with an
extremely limited tool set

65. EXPECTATIONS HAVE CHANGED
Scope has grown enormously. Many
years ago, you could make a fancy
design and call it a day – after you had
exported some assets, perhaps.
-Pieter Omvlee
Founder Bohemian Coding

66. TODAY WE ARE DESIGNING & BUILDING
Highly interactive experiences with a
plethora, and at times intimidating,
sets of tools that work seamlessly
across platforms & devices.

67. REQUEST FLOWERS PROVIDE LOCATION SELECT BLOOMS

68. SELECT DATE SELECT RECIPIENT ADD DETAILS

69. ADD A NOTE SUBMIT ORDER TIMELY CONFIRMATION

70. THE PROCESS HAS CHANGED
The days of designing, building and
shipping in a vacuum are gone

71. DATA DRIVEN, CROSS FUNCTIONAL COLLABORATION
Today, teams rapidly design,
prototype, test and iterate before
shipping to customers

72. THE DESIGN SPRINT
Understand the Problem
Sketch a variety of solutions
Vote for the best idea
Build a prototype
Test with customers

73. PROTOTYPING & TESTING
The adoption of prototyping & user
testing has produced radically better
outcomes for teams and stakeholders

74. THEY CAN ATTEST TO IT
Interactive prototypes allowed me to express micro-
interactions and workflows in a way that made sense
to stakeholders, which improved my ability to
communicate design tremendously.
Additionally, it allowed me to bring user research into
the core of my practice.

75. THEY CAN ATTEST TO IT
Because prototyping allows me to simulate the actual
intent of the experience much closer than static
comps, I get to observe customers interacting with my
concept or flow.
I get to learn whether my design is resonating with
customers much quicker.

76. WHAT DOES IT MEAN?
We’re learning earlier in
the process what does &
does not work. Saving
time, money & resources

78. BICYCLE 🚀 FOR THE MIND
...the computer is the most remarkable
tool that we've ever come up with. It's
the equivalent of a bicycle for our
minds.
-Steve Jobs

80. BICYCLE 🚀 FOR THE MIND
Today’s tools feel more like a
self driving car than a bicycle

81. BICYCLE 🚀 FOR THE MIND
Newer tools have provided more specialized solutions
for designing for specific platforms.
This specialization has cut design time significantly. It
has also armed me with a way to communicate my
ideas better and more effectively.

82. MOST POPULAR PLUGINS

83. FROM… TO
Content Generation

84. MY FRIEND MORGAN

85. FROM… TO
Styles & Assets

86. ONE-CLICK STYLE GUIDES

87. MEASUREMENTS MADE EASY & MUCH, MUCH MORE

88. FROM… TO
Inline Calculations

89. 1226 + 44 x 4 = 1402
BYE BYE TI-82 "

90. FROM - TO
File Sharing

92. OPPORTUNITY & NEED
All these efficiencies
have left time for…

93. SURPRISE 🎉
Prototyping

94. BEFORE TOOLS WERE PERVASIVE
What did we do?

95. 😞
We didn’t
prototype

96. A SHIFTING MINDSET
The easier and faster it is to prototype, the more I'll do it.
If I know building a prototype is going to take a really
long time, I'll be more hesitant to prototype something I
probably should because I fear it'll keep me from the
other things I need to get done.

98. THE TOOLS WE ARE PROTOTYPING WITH

99. PICKING THE RIGHT TOOL
What do you need to communicate
Cross-functional utility
Learning curve {e.g., code required?}

100. PICKING THE RIGHT TOOL
Patient Zero

102. PICKING THE RIGHT TOOL
Early adopters often impact
your team’s tools & work flow.

103. DEVELOPING DESIGNERS

104. LEVERAGING CODE
The new wave of tools do not {easily} support
building out micro-interactions & animations like
typing indicators.
Sometimes code is just easier & faster.

105. TIME SPENT PROTOTYPING

106. A TREND IS EMERGING

107. BUT, WHY PROTOTYPE?
Gain clarity faster
Design holistic solutions
Clear & efficient communication

108. FEWER MEETINGS 🎉
A prototype is worth a
thousand meetings.-Paul Stamatiou
-Paul Stamatiou

109. FROM A PRINT DESIGNER
Being a print designer who moved to digital, tools like
Flinto, Invision & Atomic helped get my head around
flows and interactions that I didn't have a full
appreciation for when I was designing logos & posters.

110. THOUGHTFUL DESIGN
It's made me think more thoughtfully of the
construction of pages/screens/objects/interactions.
It's also allowed me to communicate my ideas in a
way I couldn't before.

111. THE DATA SUPPORTS IT

112. SHOW DON’T TELL
Static screens don’t
communicate ideas or
intentions well

113. SHOW DON’T TELL
Worse yet, they only tell
part of the story

114. SHOW DON’T TELL
A personal anecdote
from Operator

115. I HAVE A PHILOSOPHY
Proactive v Reactive UI

116. I HAVE A PHILOSOPHY
Conversations are a mixture of
questions & answers and their
affordances should be placed in the
UI accordingly…

117. INSIDE THE KEYBOARD 🤔

118. I HAVE A PHILOSOPHY
…when responding to a question
from Operator {reactive} I believed
the affordances should live inside the
channel, not the keyboard…

119. INSIDE THE CHANNEL 🚀

120. POWER OR LACK THERE OF PERSUASION
It was an uphill battle

121. POWER OR LACK THERE OF PERSUASION
One that needed the
assistance of a prototype

122. How are they
{customers} going to
know that it’s tappable?
POWER OR LACK THERE OF PERSUASION

123. I LOOK BACK & LAUGH
This should have been a
5 minute exercise

124. I LOOK BACK & LAUGH
But it took days

125. I LOOK BACK & LAUGH

127. THE CHALLENGE
How to {lose a guy}
prototype in ten days

128. EVALUATE THE TOOLS
Perceived learning curve
Relevant features
Documentation & tutorials
Active community
Friends using it

129. AND THE FINALISTS WERE…
FLINTO FOR MAC PRINCIPLE FOR MAC

130. DEFINE AN EXERCISE
Almost instantly I knew what
I wanted to build

131. AS I DUG INTO IT

132. FLINTO FOR MACPRINCIPLE FOR MAC

133. AND NOW

134. BUT WAS IT A FLUKE

136. SHAPING THE ROLE

137. SHAPING THEM
The process of prototyping itself has shaped me more
than the tools.

138. SHAPING THEM
It {tools} has made me think more thoughtfully of the
construction of pages, screens, objects & interactions.
It's also allowed me to communicate my ideas in a way
I couldn't before.

139. A SHIFT
We’re seeing change that
goes beyond the desired
skill set of a designer

140. A SHIFT
The perception of the value
designers bring to the table
has changed, too

141. A CONVERGENCE
The line between
designers & engineers is
blurring, but our crafts are
decisively unique

142. A CONVERGENCE
I don’t think designers
need to be able to code…

143. WHEN HIRING A DESIGNER

144. A PARADOX
I hate not being able to
build my own ideas.

145. A CONVERGENCE
We do, however, need to
be able to communicate
with {you} engineers

146. And the responses are a
clear indication of this trend
A CONVERGENCE

147. We’re collaborating like
never before
A CONVERGENCE