4. “The way we work at Apple is
that the complexity of these
products really makes it critical
to work collaboratively, with
different areas of expertise. I
think that’s one of the things
about my job I enjoy the most. I
work with silicon designers,
electronic and mechanical
engineers, and I think you would
struggle to determine who does
what when we get together.
We’re located together, we share
the same goal, have exactly the
same preoccupation with
making great products.”
Sir Jonathan Ive
8. by the power of grayskull by Speculum Mundi
http://www.flickr.com/photos/speculummundi/4569110353/in/photostream/
9. user study & requirements analysis
interaction & information design
visual design & graphics production
UI prototyping & implementation
functional testing
usability evaluation
authoring of user guides & training materials
by the power of grayskull by Speculum Mundi
http://www.flickr.com/photos/speculummundi/4569110353/in/photostream/
10. Tight Integration
the board is misleading by snickclunk
http://www.flickr.com/photos/snickclunk/4119284398/in/photostream/
11. Memory Lane by physiognomist
http://www.flickr.com/photos/davidmican/315728765/
12. Memory Lane by physiognomist
http://www.flickr.com/photos/davidmican/315728765/
it hasn’t always been that way
13. Fort Pitt Tunnel by ellenm1
http://www.flickr.com/photos/ellenm1/4320606426/
14. Driving through the Squirrel Hill Tunnel by Jason Pratt
http://www.flickr.com/photos/jasonpratt/912324482/
15. Wrong Way by KungPaoCajun
http://www.flickr.com/photos/begnaud/243996426/
16. Pizza boxes by Marc Wathieu
http://www.flickr.com/photos/marcwathieu/5395466993/
31. Identify
technologies
The cup that can only be half-full. by vrogy http://www.flickr.com/photos/vrogy/511644410/
32. Identify
technologies
The cup that can only be half-full. by vrogy http://www.flickr.com/photos/vrogy/511644410/
33. Estimate Time
& Effort
By eflon http://www.flickr.com/photos/eflon/5079163335/
34. Estimate Time “Ideally, the developers and I are to work
& Effort closely together during the design
phase... but it typically works out that
they gloss over the document or attend
a few meetings and get a basic
understanding of what we are planning
on doing, but never pay attention to the
full details. Then they tend to come to
me with questions or ‘are you crazy? I
can’t do that!’ when it’s time for them to
put together a timeline for their
development assessment. After a few
times of close calls, they are beginning
to pay more attention to the pencil
sketches and overall workflows we put
together for them.”
By eflon http://www.flickr.com/photos/eflon/5079163335/
35. Estimate Time
& Effort
By eflon http://www.flickr.com/photos/eflon/5079163335/
36. Estimate Time
& Effort
By eflon http://www.flickr.com/photos/eflon/5079163335/
37. Estimate Time
& Effort
By eflon http://www.flickr.com/photos/eflon/5079163335/
38. Estimate Time
& Effort software bill of materials
By eflon http://www.flickr.com/photos/eflon/5079163335/
39. Estimate Time
& Effort
How can we best prioritize
our work to support the
developers’ schedule?
By eflon http://www.flickr.com/photos/eflon/5079163335/
40. Use their
tools
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
41. Issue Tracking
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
42. Issue Tracking
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
43. Issue Tracking Create items for each of your
design tasks.
Developers can subscribe to the
ones that relate to their own tasks.
Your estimates can be calculated
in the chartboard, or not.
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
44.
45.
46. Wiki
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
47. Wiki Subscribe to see what the
developers are thinking.
Document your own thinking so
it is available to them.
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
51. Design
Documentation
One size fits all…. By The Candid Street
http://www.flickr.com/photos/haddadi/5971508861/
52. Design
Documentation
One size fits all…. By The Candid Street
http://www.flickr.com/photos/haddadi/5971508861/
53. Design
Documentation
One size fits all…. By The Candid Street
http://www.flickr.com/photos/haddadi/5971508861/
54. Design
Documentation
One size fits all…. By The Candid Street
http://www.flickr.com/photos/haddadi/5971508861/
55. Design
Documentation
Design the documentation
for those that will wear it.
One size fits all…. By The Candid Street
http://www.flickr.com/photos/haddadi/5971508861/
56.
57.
58. “The developers really appreciated it, because they
could just look at it, and they didn’t have to wonder
if the designer had forgotten something.”
Bill Scott
59. Documentation
is part of the
design process.
One size fits all…. By The Candid Street
http://www.flickr.com/photos/haddadi/5971508861/
60. Documentation
is part of the
design process.
You learn a lot by
describing your design.
One size fits all…. By The Candid Street
http://www.flickr.com/photos/haddadi/5971508861/
61. building blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/
Implementation
62. “I get most frustrated when, after providing a
pixel-perfect mockup, I see the finished
implementation during the testing phase, and it’s
drastically different than what I spec’d (fonts,
colors, sizes, spacing, alignment, positioning, etc).”
63.
64.
65.
66.
67. Admiral Ackbar vs. Admiral Kirk (58/365) By JD Hancock
http://www.flickr.com/photos/jdhancock/4393509633/
68. Admiral Ackbar vs. Admiral Kirk (58/365) By JD Hancock
http://www.flickr.com/photos/jdhancock/4393509633/
fight!
69. “If you’re in a room filled with designers, bring up the topic of
whether it’s valuable for a designer to also code. Immediately,
the room will divide faster than Moses split the Red Sea. One
side will tell you coding is an essential skill, while the other will
vehemently argue how it dilutes the designer’s value.”
Jared Spool
An Event Apart 2010: San Diego - Jared Spool By peterjhart
http://www.flickr.com/photos/40054618@N03/5139909661/
73. Tasked with coding instead of design
“I found that when I tried to be both a designer and
engineer/coder, I ended up doing a lot more
engineering and a lot less design than I wanted to
do. I think part of the problem is that engineering
skills are, in the end, valued more than design skills.”
Jennifer Tidwell, author of Designing
Interfaces: Patterns for Effective Interaction
Tent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
74. Tasked with coding instead of design
Limit Creativity due to knowledge of difficulty
Tent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
75. Tasked with coding instead of design
Limit Creativity due to knowledge of difficulty
Tent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
76. Tasked with coding instead of design
Limit Creativity due to knowledge of difficulty
Marginalize design skills to add coding skills
Tent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
77. Designer
Soup
Mighty Elixir By Robert S. Donovan
http://www.flickr.com/photos/booleansplit/2220774911/
78. Designer
Interaction Design Skills
Soup
Visual Design Skills
Implementation Skills
Business Skills
Mighty Elixir By Robert S. Donovan
http://www.flickr.com/photos/booleansplit/2220774911/
79. Designer
Soup
Mighty Elixir By Robert S. Donovan
http://www.flickr.com/photos/booleansplit/2220774911/
80. Designer
T Soup
M
Mighty Elixir By Robert S. Donovan
http://www.flickr.com/photos/booleansplit/2220774911/
81. Perceived
Benefits
Mighty Elixir By Robert S. Donovan
http://www.flickr.com/photos/booleansplit/2220774911/
82. Mighty Elixir By Robert S. Donovan
http://www.flickr.com/photos/booleansplit/2220774911/
83. Calling BS on coders
Mighty Elixir By Robert S. Donovan
http://www.flickr.com/photos/booleansplit/2220774911/
84. Calling BS on coders
Respect & credibility
Mighty Elixir By Robert S. Donovan
http://www.flickr.com/photos/booleansplit/2220774911/
85. Calling BS on coders
Respect & credibility
Speaking their language
Mighty Elixir By Robert S. Donovan
http://www.flickr.com/photos/booleansplit/2220774911/
86. Calling BS on coders
Respect & credibility
Speaking their language
Knowledge of capabilities & difficulty
Mighty Elixir By Robert S. Donovan
http://www.flickr.com/photos/booleansplit/2220774911/
87. Calling BS on coders
Respect & credibility
Speaking their language
Knowledge of capabilities & difficulty
Participation in evaluation & selection of technology
Mighty Elixir By Robert S. Donovan
http://www.flickr.com/photos/booleansplit/2220774911/
88. Calling BS on coders
Respect & credibility
Speaking their language
Knowledge of capabilities & difficulty
Participation in evaluation & selection of technology
Better able to create prototypes
Mighty Elixir By Robert S. Donovan
http://www.flickr.com/photos/booleansplit/2220774911/
89. Calling BS on coders
Respect & credibility
Speaking their language
Knowledge of capabilities & difficulty
Participation in evaluation & selection of technology
Better able to create prototypes
Participation in
implementation
Mighty Elixir By Robert S. Donovan
http://www.flickr.com/photos/booleansplit/2220774911/
90. “Coding and designing are collections of
skills. What we’ve learned is teams with a
better distribution of skills, not segmented
by roles, produce better results.”
An Event Apart 2010: San Diego - Jared Spool By peterjhart
http://www.flickr.com/photos/40054618@N03/5139909661/
91. “Coding and designing are collections of
skills. What we’ve learned is teams with a
better distribution of skills, not segmented
by roles, produce better results.”
An Event Apart 2010: San Diego - Jared Spool By peterjhart
http://www.flickr.com/photos/40054618@N03/5139909661/
93. Participation in
building blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/
Implementation
Less documentation is
required when you
implement your own
design.
94. Participation in
building blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/
Implementation
Less documentation is
required when you
implement your own
design.
Get everything perfect
the first time.
95. Use their
tools
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
96.
97. Working in the
Production Code
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
98. Working in the I don’t have to ask permission to
make changes or ask someone
Production Code else to make them for me.
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
99. Working in the I don’t have to ask permission to
make changes or ask someone
Production Code else to make them for me.
I know that the final product will
be the one that I designed.
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
100. Working in the I don’t have to ask permission to
make changes or ask someone
Production Code else to make them for me.
I know that the final product will
be the one that I designed.
With great power comes great
responsibility.
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
101. rainbow sprinkle donut By tommy.chheng
http://www.flickr.com/photos/tommychheng/3226662528/
102. With great power comes great
responsibility.
rainbow sprinkle donut By tommy.chheng
http://www.flickr.com/photos/tommychheng/3226662528/
106. Functional Testing
Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii
http://www.flickr.com/photos/ogwrnsk/5020082786/
107. Designers make
great testers
Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii
http://www.flickr.com/photos/ogwrnsk/5020082786/
108. Designers make Detail oriented
great testers
Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii
http://www.flickr.com/photos/ogwrnsk/5020082786/
109. Designers make Detail oriented
great testers Use the system more like a user
Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii
http://www.flickr.com/photos/ogwrnsk/5020082786/
110. Designers make Detail oriented
great testers Use the system more like a user
Know better than anyone how the
thing is supposed to work
Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii
http://www.flickr.com/photos/ogwrnsk/5020082786/
111. Use their tools
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
112. Use their tools Participation is power.
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
113. Use their tools Participation is power.
Gives you the opportunity to
record usability issues to be fixed
prior to usability testing.
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
114. Use their tools Participation is power.
Gives you the opportunity to
record usability issues to be fixed
prior to usability testing.
Don’t abuse it—follow the rules.
A successful tool is one that was used to do something undreamed of by its author. by katerha
http://www.flickr.com/photos/katerha/5746905652/
117. it works both Have developers participate
in field trials.
ways
118. it works both Have developers participate
in field trials.
ways They will gain a better
appreciation of the users’
concerns.
119. it works both Have developers participate
in field trials.
ways They will gain a better
appreciation of the users’
concerns.
Other developers will listen
when one of their own is as
adamant about usability
concerns as you are.
121. DO Not
v2.19: March 19th (Pirate Socks) by Phoney Nickle
http://www.flickr.com/photos/mslivenletlive/427537759/
122. DO Not Critique engineering prototypes
on aesthetics or interaction
design.
v2.19: March 19th (Pirate Socks) by Phoney Nickle
http://www.flickr.com/photos/mslivenletlive/427537759/
123. DO Not Critique engineering prototypes
on aesthetics or interaction
design.
Force your process on the
developers.
v2.19: March 19th (Pirate Socks) by Phoney Nickle
http://www.flickr.com/photos/mslivenletlive/427537759/
124. DO Not Critique engineering prototypes
on aesthetics or interaction
design.
Force your process on the
developers.
Expect developers to make
changes at the last minute
because you haven’t been
involved until the end.
v2.19: March 19th (Pirate Socks) by Phoney Nickle
http://www.flickr.com/photos/mslivenletlive/427537759/
125. DO Not Critique engineering prototypes
on aesthetics or interaction
design.
Force your process on the
developers.
Expect developers to make
changes at the last minute
because you haven’t been
involved until the end.
Expect developers to have the
same visual sensibilities you have.
v2.19: March 19th (Pirate Socks) by Phoney Nickle
http://www.flickr.com/photos/mslivenletlive/427537759/
126. Yes Please
v2.19: March 19th (Pirate Socks) by Phoney Nickle
http://www.flickr.com/photos/mslivenletlive/427537759/
127. Yes Please Position your involvement as
something that makes your
developers’ job easier.
v2.19: March 19th (Pirate Socks) by Phoney Nickle
http://www.flickr.com/photos/mslivenletlive/427537759/
128. Yes Please Position your involvement as
something that makes your
developers’ job easier.
Be inclusive. It’s not our
responsibility to make decisions
so much as to offer options.
v2.19: March 19th (Pirate Socks) by Phoney Nickle
http://www.flickr.com/photos/mslivenletlive/427537759/
129. Yes Please Position your involvement as
something that makes your
developers’ job easier.
Be inclusive. It’s not our
responsibility to make decisions
so much as to offer options.
Find opportunities to educate.
v2.19: March 19th (Pirate Socks) by Phoney Nickle
http://www.flickr.com/photos/mslivenletlive/427537759/
130. Yes Please Position your involvement as
something that makes your
developers’ job easier.
Be inclusive. It’s not our
responsibility to make decisions
so much as to offer options.
Find opportunities to educate.
Dare to compromise.
v2.19: March 19th (Pirate Socks) by Phoney Nickle
http://www.flickr.com/photos/mslivenletlive/427537759/
131. Yes Please Position your involvement as
something that makes your
developers’ job easier.
Be inclusive. It’s not our
responsibility to make decisions
so much as to offer options.
Find opportunities to educate.
Dare to compromise.
Be social - Jenna Bilotta says,
“Drink a beer with your engineer.”
v2.19: March 19th (Pirate Socks) by Phoney Nickle
http://www.flickr.com/photos/mslivenletlive/427537759/
132. Four Storms And A Twister by JD Hancock
http://www.flickr.com/photos/jdhancock/3842546304/
133. Four Storms And A Twister by JD Hancock
Conclusion
http://www.flickr.com/photos/jdhancock/3842546304/
134. Tight Dev Team
Integration
Four Storms And A Twister by JD Hancock
http://www.flickr.com/photos/jdhancock/3842546304/
135. Tight Dev Team
Integration Participate in the entire
development process
Four Storms And A Twister by JD Hancock
http://www.flickr.com/photos/jdhancock/3842546304/
136. Tight Dev Team
Integration Participate in the entire
development process
Tailor documentation to be
developer-friendly
Four Storms And A Twister by JD Hancock
http://www.flickr.com/photos/jdhancock/3842546304/
137. Tight Dev Team
Integration Participate in the entire
development process
Tailor documentation to be
developer-friendly
Use the developers’ tools
Four Storms And A Twister by JD Hancock
http://www.flickr.com/photos/jdhancock/3842546304/
138. Tight Dev Team
Integration Participate in the entire
development process
Tailor documentation to be
developer-friendly
Use the developers’ tools
Learn implementation skills
Four Storms And A Twister by JD Hancock
http://www.flickr.com/photos/jdhancock/3842546304/
139. Tight Dev Team
Integration Participate in the entire
development process
Tailor documentation to be
developer-friendly
Use the developers’ tools
Learn implementation skills
Be respectful / Be social
Four Storms And A Twister by JD Hancock
http://www.flickr.com/photos/jdhancock/3842546304/
140. for success
jump for joy by Tinou Bao http://www.flickr.com/photos/tinou/506361030/
142. Suggested Reading
• How designers and engineers can
play nice (and still run with
scissors) by Jenna Bilotta
• Concept to Code - Code Literacy
in UX by Ryan Betts
• Owen Otto’s response to “How do
UI designers work with engineers
to ensure their vision is achieved?”
on Quora
• 3 Reasons Why Learning To Code
Makes You A Better Designer by
Jared Spool
143. Credits
Typefaces: Blanch, by Atipus
Myriad Pro, by Adobe
Survey visualizations created with
Parallel Sets by Robert Kosara.
144. Thank you
Jack Moffett | @jackmoffett
Senior Interaction Designer, Inmedius
jmoffett@inmedius.com
designaday.tumblr.com
