Slides from our rockin' presentation w/@zakiwarfel and @russ on the Right Way to Wireframe (first session).

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