How Tools Have Shaped the Role of the Designer

T H E P R E A M B L E

Interactive


My first time

https://youtu.be/TzbUPfoveok?t=16s


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



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


Be honest & vulnerable


He was spot on, 100%


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 better story emerged


Tools have had a massive influence on me…


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


And we don’t appreciate them nearly enough


I went from microfiche…


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

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


Today’s tools feel more like a self driving car than a bicycle


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?}


Patient Zero


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


Worse yet, they only tell part of the story


A personal anecdote from Operator

I H AV E A P H I LO S O P H Y

Proactive v Reactive UI


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 🤔


…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


One that needed the assistance of a prototype

How are they {customers} going to

know that it’s tappable?


I LO O K B AC K & L AU G H

This should have been a 5 minute exercise


But it took days

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


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.


We do, however, need to be able to communicate

with {you} engineers

And the responses are a clear indication of this trend


We’re collaborating like never before


How Tools Have Shaped the Role of the Designer

Design

Transcript of How Tools Have Shaped the Role of the Designer