T H E P R E A M B L E
Interactive
T H E P R E A M B L E
My first time
T H E P R E A M B L E
He’s a freak of nature
T H E B A S I C S
. NYC . SD . SFSTL
An Eng{eering}lish Degree
T H I N G S YO U M I G H T N OT K N OW
I don’t write code
T H I N G S YO U M I G H T N OT K N OW
T H I N G S YO U M I G H T N OT K N OW
In spite of all that…
I T ’ S I R O N I C LO O K I N G B AC K
Tools were my first introduction to a hobby that turned into a passion
that has become an obsession
I T ’ S I R O N I C LO O K I N G B AC K
Tools have been influencing me from the first time I sat in front of a
computer in elementary school
MY F I R S T I N S T I N C T
What it’s like to work with an engineer, from a
designers perspective
WO R K I N G T I T L E
Things Engineers Hate About Working With {Me}
a Designer…
D I R EC T F E E D B AC K
It’s a bit tongue & cheek
D I R EC T F E E D B AC K
Be honest & vulnerable
D I R EC T F E E D B AC K
He was spot on, 100%
D I R EC T F E E D B AC K
Engineers {my friends} have enabled me
A M O M E N T O F D O U BT & C L A R I T Y
I scrapped everything
A M O M E N T O F D O U BT & C L A R I T Y
A better story emerged
A M O M E N T O F D O U BT & C L A R I T Y
Tools have had a massive influence on me…
A M O M E N T O F D O U BT & C L A R I T Y
Prototyping {in particular}
A R E A L I Z AT I O N C A M E OV E R M E
Tools are everywhere
A R E A L I Z AT I O N C A M E OV E R M E
And we don’t appreciate them nearly enough
A R E A L I Z AT I O N C A M E OV E R M E
I went from microfiche…
A R E A L I Z AT I O N C A M E OV E R M E
to…
B AC K I N T H E DAY
Spreading the Word
FA S T F O R WA R D 2 0 Y E A R S
FA S T F O R WA R D 2 0 Y E A R S
B AC K I N T H E DAY
Synthesize & Tabulate
FA S T F O R WA R D 2 0 Y E A R S (AG A I N )
S L AC K C A M E C A L L I N G
John Maeda & Khoi Vinh
I WA S O N TO S O M E T H I N G , B U T
K H O I V H I N : D ES I G N TO O L S S U RV E Y 2 0 1 5
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
44TO O L S I U S E D TO C R E AT E T H I S TA L K
TO O L S I U S E D TO C R E AT E T H I S TA L K
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
I N S I D E T H E N U M B E R S
107 4
6,601
participants continents words
T H E S K I L L S W E P O S S ES S
H OW LO N G W E ’ V E B E E N D ES I G N I N G
W H E R E W E ’ R E D ES I G N I N G
R O L E & R ES P O N S I B I L I T Y
T H E M E D I U M S W E WO R K I N
T H E TO O L S W E A R E D ES I G N I N G W I T H
OV E R C O M E W I T H C O M P L AC E N C Y
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
P L AY I N G T H E H A N D W E ’ D B E E N D E A LT
Photoshop is amazing, but…
P L AY I N G T H E H A N D W E ’ D B E E N D E A LT
Illustrator is amazing, too…
A R E V I VA L
The Birth of Sketch
A F U N E R A L
The Death of Flash
WO L F I N S H E E P ’ S C LOT H I N G
G O O D D ES I G N
Requires empathy
Pleasurable
Provides context
Simple & focused
Meticulous
T H E D E V I L I S I N T H E D E TA I L S
Details are not the details. They make the design. -Charles Eames
F O R M A N Y Y E A R S W E D ES I G N E D
{primarily} static experiences with an extremely limited tool set
E X P EC TAT I O N S H AV E C H A N G E D
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
TO DAY W E A R E D ES I G N I N G & B U I L D I N G
Highly interactive experiences with a plethora, and at times intimidating, sets of tools that work seamlessly
across platforms & devices.
REQUEST FLOWERS PROVIDE LOCATION SELECT BLOOMS
SELECT DATE SELECT RECIPIENT ADD DETAILS
ADD A NOTE SUBMIT ORDER TIMELY CONFIRMATION
T H E P R O C ES S H A S C H A N G E D
The days of designing, building and shipping in a vacuum are gone
DATA D R I V E N , C R O S S F U N C T I O N A L C O L L A B O R AT I O N
Today, teams rapidly design, prototype, test and iterate before
shipping to customers
T H E D ES I G N S P R I N T
Understand the Problem
Sketch a variety of solutions
Vote for the best idea
Build a prototype
Test with customers
P R OTOT Y P I N G & T ES T I N G
The adoption of prototyping & user testing has produced radically better outcomes for teams and stakeholders
T H E Y C A N AT T ES T TO I T
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.
T H E Y C A N AT T ES T TO I T
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.
W H AT D O ES I T M E A N ?
We’re learning earlier in the process what does &
does not work. Saving time, money & resources
B I C YC L E 🚀 F O R T H E M I N D
...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
B I C YC L E 🚀 F O R T H E M I N D
Today’s tools feel more like a self driving car than a bicycle
B I C YC L E 🚀 F O R T H E M I N D
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.
M O S T P O P U L A R P LU G I N S
F R O M … TO
Content Generation
MY F R I E N D M O R G A N
F R O M … TO
Styles & Assets
O N E - C L I C K S T Y L E G U I D ES
M E A S U R E M E N T S M A D E E A SY & M U C H , M U C H M O R E
F R O M … TO
Inline Calculations
1226 + 44 x 4 = 1402
BY E BY E T I - 8 2 "
F R O M - TO
File Sharing
O P P O R T U N I T Y & N E E D
All these efficiencies have left time for…
S U R P R I S E 🎉
Prototyping
B E F O R E TO O L S W E R E P E RVA S I V E
What did we do?
😞
We didn’t prototype
A S H I F T I N G M I N D S E T
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.
T H E TO O L S W E A R E P R OTOT Y P I N G W I T H
P I C K I N G T H E R I G H T TO O L
What do you need to communicate Cross-functional utility Learning curve {e.g., code required?}
P I C K I N G T H E R I G H T TO O L
Patient Zero
P I C K I N G T H E R I G H T TO O L
Early adopters often impact your team’s tools & work flow.
D E V E LO P I N G D ES I G N E R S
L E V E R AG I N G C O D E
The new wave of tools do not {easily} support building out micro-interactions & animations like typing indicators.
Sometimes code is just easier & faster.
T I M E S P E N T P R OTOT Y P I N G
A T R E N D I S E M E R G I N G
B U T, W H Y P R OTOT Y P E ?
Gain clarity faster Design holistic solutions Clear & efficient communication
F E W E R M E E T I N G S 🎉
A prototype is worth a thousand meetings.-Paul Stamatiou
-Paul Stamatiou
F R O M A PRINT D ES I G N E R
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.
T H O U G H T F U L D ES I G N
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.
T H E DATA S U P P O R T S I T
S H OW D O N ’ T T E L L
Static screens don’t communicate ideas or
intentions well
S H OW D O N ’ T T E L L
Worse yet, they only tell part of the story
S H OW D O N ’ T T E L L
A personal anecdote from Operator
I H AV E A P H I LO S O P H Y
Proactive v Reactive UI
I H AV E A P H I LO S O P H Y
Conversations are a mixture of questions & answers and their affordances should be placed in the UI accordingly…
I N S I D E T H E K E Y B OA R D 🤔
I H AV E A P H I LO S O P H Y
…when responding to a question from Operator {reactive} I believed the affordances should live inside the channel, not the keyboard…
I N S I D E T H E C H A N N E L 🚀
P OW E R OR LACK THERE O F P E R S UA S I O N
It was an uphill battle
P OW E R OR LACK THERE O F P E R S UA S I O N
One that needed the assistance of a prototype
How are they {customers} going to
know that it’s tappable?
P OW E R OR LACK THERE O F P E R S UA S I O N
I LO O K B AC K & L AU G H
This should have been a 5 minute exercise
I LO O K B AC K & L AU G H
But it took days
I LO O K B AC K & L AU G H
T H E C H A L L E N G E
How to {lose a guy} prototype in ten days
E VA LUAT E T H E TO O L S
Perceived learning curve Relevant features Documentation & tutorials Active community Friends using it
A N D T H E F I N A L I S T S W E R E …
F L I N TO F O R M AC P R I N C I P L E F O R M AC
D E F I N E A N E X E R C I S E
Almost instantly I knew what I wanted to build
A S I D U G I N TO I T
F L I N TO F O R M ACP R I N C I P L E F O R M AC
A N D N OW
B U T WA S I T A F LU K E
S H A P I N G T H E R O L E
S H A P I N G T H E M
The process of prototyping itself has shaped me more than the tools.
S H A P I N G T H E M
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.
A S H I F T
We’re seeing change that goes beyond the desired
skill set of a designer
A S H I F T
The perception of the value designers bring to the table
has changed, too
A C O N V E R G E N C E
The line between designers & engineers is
blurring, but our crafts are decisively unique
A C O N V E R G E N C E
I don’t think designers need to be able to code…
W H E N H I R I N G A D ES I G N E R
A PA R A D OX
I hate not being able to build my own ideas.
A C O N V E R G E N C E
We do, however, need to be able to communicate
with {you} engineers
And the responses are a clear indication of this trend
A C O N V E R G E N C E
We’re collaborating like never before
A C O N V E R G E N C E