The document discusses the importance of showing work in design through tools like wireframes and prototypes, highlighting that these are merely communication tools. It emphasizes the necessity of beginning with research and using personas to tell a story. Additionally, the text includes various stakeholders' frustrations and preferences regarding design processes and tools.

1. the right way to
todd zaki warfel | messagefirst

2. no one shows their
work.

3. have you ever seen a
wireframe from JJG,
Peter Morville, or Jared

4. the wireframe vs.
prototype debate.
choose a side.

5. what’s the best tool?

6. if you’re still arguing
about wireframes and
prototypes, you are

7. they’re just
communication tools.

8. 4 designers. 1
problem.

9. oh, and 2 caveats.

10. no talking.

11. everyone uses a
different tool.

12. meet tori tuncan and
lend4health.com.

13. show your work.

14. nut up or shut up.

15. under the covers.
@zakiwarfel

16. it always begins with
research.

18. tell the story through
personas.

19. !"#$%&'()*'(+,-')./'0$
Nicole
“FootPrints works but I get tired of
5 5
setting things like the date every
time. Can’t they have defaults?”
4 4
3 3
"#$%&'()%*+,()#-.(/(-'/0(%1(-)%(%-.'*(,'*2#$'(/3'4-,(-%(0/4/3'(/5%6-(/(.647*'7(
-#$+'-,(/(7/89(:5%6-(./&1(%1(-.','($%0'(#4(-.*%63.(-.'()'5(1%*0,9(;.'(*',-(/*'(-#$+<
2 2
'-,($*'/-'7(1*%0(=.%4'($/&&,(/47('0/#&,9(>%%-?*#4-,(./,(0/7'(#-('/,#'*(-%(0/4/3'(
-#$+'-,@(56-('4-'*#43(-#$+'-,($/4(,-#&&(5'(/(=/#49(;.'*'A,(/(&%-(%1(B'&7,(/47(,.'(-8=#$/&&8(
%4&8(7'/&,()#-.(C<!(%1(-.'09(
1 1
D.'(&#+',(-.'(0%*'('1B$#'4-(&%%+(%1(-.'(4')(-/55'7(#4-'*1/$'@(56-(3'-,($%416,'7(
).'4(-.'(-/5,(E60=(/*%6479(D.'(/&,%(,-*633&',()#-.(,%0'(%1(-.'(=6&&7%)4(0'46,(
Knowledge Activities and Interest
-./-(./2'(&%-,(%1(%=-#%4,(-%($.%%,'9(D.'(E%-,(4%-',(%4(=/='*@(5'$/6,'(-./-A,(1/,-'*( Knowledge Activities and Interest
pe e
r
pe e
r
ow e
e
el
ps
Re ng ion
ow e
e
in
l
dg ch
Ti epo e
t
sig Cre g
Pr a T t
Pr t S t
ec tup
in
el
ps
Re ing tion
l
dg h
Ti epo e
t
sig Cre g
g ket
t
tA p
ai
ai
-./4(E6,-('4-'*#43(-.'0(#4-%(-.'(,8,-'09(
se
se
Es ing icke
e
e
Es ing icke
oj icke
nc
nc
Ex dg
Ex dg
Kn dg
s
Kn dg
s
le arc
n
et rtin
u
te Exc
te Exc
dm
dm
ck
oj ick
Ba
Ba
Em
Em
Ap
Ap
ar
rti
et
ow
ow
c
at
e
rie
rie
le
le
gy wle
gy wle
a
la a Ti
la a Ti
ow Se
ow Se
Pr t S
aT
aT
aT
e
e
tA
al
al
Br
Br
ec
ec
rn
rn
o
o
ec
g
"#$%&'(3'-,(1*6,-*/-'7().'4(-.'(,/0'(='%=&'($/&&(5/$+('2'*8()''+@(/47(,.'()#,.',(
eb
eb
no Kn
no Kn
R
R
le
As et
tin
tin
oj
oj
ni
ck
ck
W
W
lv
n
lv
Pr
In
In
in
in
so
so
-./-(-.'*'()/,(/4('/,#'*()/8(-%(./47&'(-.'09(;.'8(-*#'7(=6--#43('F-*/()%*+(#4-%(-.'(
Te ma
Te ma
ca
ca
Kn
Kn
lo
lo
As
Do
Do
G4%)&'73'(H/,'(56-(.'*($6,-%0'*,()%4A-(6,'(#-(5'$/6,'(-.'8(-.#4+(#-(#,(-%%(,&%)9
ch
ch
I.'4(-.#43,(3'-(.'$-#$(/-(-.'(J'&=(K',+@("#$%&'()/4-,(-%(0/+'(,6*'(-./-(,.'($/4(
Lifecycle +''=(-*/$+(%1(/&&(%1(-.'(-#$+'-,(/,,#34'7(-%(.'*()#-.%6-(./2#43(-%(.64-(-.'0(7%)4@( Lifecycle
Jan Jul Dec Month
*#3.-(4%)(>%%-?*#4-,(7%',4A-(.'&=(.'*(/-(/&&@(#-(E6,-(&#,-,(-.'09(D.'(-.#4+,(#-()%6&7(5'( Jan Jul Dec Month
3*'/-(-%(/77(,%0'-.#43(-%(.'&=(.'*(3'-(.'*(E%5(7%4'('/,#'*(-.#,()/89
1.0 Irregular Customer 2.0 Agent
1'2)!34(4-$'(,#$,-# 7%48# :0;"'0-'(# >("#$(4$,%0#)?)@4,0)@%,0$#
L( M'05'*(%1(,6==%*-(,-/119 L( ?*%2#7'(R6/&#-8(,6==%*-9 L( ;#0' L( O'='-#-#%4(%1()%*+().'4($*'/-#43W'7#-#43(-#$+'-,9
L( J/,($6,-%0'*($%4-/$-(%4(/(*'36&/*(5/,#,9 L( M''-(.'*(DS:(3%/&,9 L( N11%*- L( X-.'*(='%=&'()%*+#43(%4(08(-#$+'-,9
L( N4-'*,(-#$+'-,(1*%0($6,-%0'*($%4-/$-(2#/(=.%4'(%*( L( N4-'*(-#$+'-(7/-/(1/,-'*9 L( O'='-#-#%4 L( M#,,#43(/4(#0=%*-/4-(4%-#$'(%4(/(-#$+'-9
'0/#&9 L( M/4/3'(.'*(-#$+'-,9 L( V6,-%0'*(D/-#,1/$-#%4( L( M#,,#43(DS:,(76'(-%(64#4-'4-#%4/&&8(.#7#43(/(=#'$'(%1(
L( :,,#34,(-#$+'-,(-%(%-.'*(0'05'*,9 #0=%*-/4-(#41%(#4(-.'(-#$+'-(R6'6'9
L( O',%&2',(&%)<&'2'&(#,,6',9( L( "%-(5'#43(/5&'(-%('4-'*(-#$+'-,(R6#$+&8('4%63.(/47(
9"'#$,%0# <$3'().==8,-4$,%0# ./2#43(-%(-/+'(4%-',(#4(/(=/='*(E%6*4/&9(
L( I.#$.(-#$+'-,(4''7(08(/--'4-#%4(4%)T( L( I'5(5*%),'*
5'#,/0)!%0#,6'(4$,%0# L( J/2'(-.'*'(5''4(/48(6=7/-',(-%(08(-#$+'-,T L( N0/#&
L( :77(/4(#,,6'(-%(-.'(G4%)&'73'(H/,'(PGHQ9 L( :*'(-.'*'('/,#'*()/8,(-%(3'-(-.#,(7%4'T L( U4-'*4/&(:==&#$/-#%4,
L( O'R6',-(GH(6=7/-'(5/,'7(%4(#,,6'9 L( I./-(-#$+'-()/,(-.'(%4'(U(4''7'7(-%(B47T L( >%%-?*#4-,
L( S#2'(,'/*$.(%1(GH().#&'()%*+#43(%4(-#$+'-9( L( J%)($/4()'(3'-(-.#,(*',%&2'7(1/,-'*T
L( ?/*/0'-*#$(4/2#3/-#%4(1%*(GH9 L( K#7(U(B&&(#4(/&&(-.'(B'&7,(U(4''7(-%T
!

20. explore concepts
through sketching.

21. SKETCHING

22. PITCH
&
CRITIQUE

23. CRITIQUE

24. from sketching
straight to prototyping
in html.

25. @zakiwarfe
l
buy the
book bit.ly/
protobk