Page 1
WireframingHow a Napkin Can Save You a Million Bucks
Page 2
You have an awesome website idea.
You want somebody to build it.
You tell them what you want.
Page 4
Because developers aren’t normal. (And neither are clients.)
Page 5
Words are ambiguous.
Page 6
GALLERY?
POP-UP?DATE PICKER?
LIGHTBOX?
LANDING PAGE?PROFILE?
SLIDESHOW?
Page 7
...and nobody reads them anyway.
Page 8
Fixing defects is expensive.
Page 9
Relative Cost to Fix Software Defects
0
25
50
75
100
Design Implementation Testing Maintenance
1X 6.5X15X
100X
SOURCE: IBM SYSTEMS SCIENCES INSTITUTE
Page 10
So what’s the solution?
Draw a picture. That’s a wireframe.
Page 12
Wireframes come in different degrees of fidelity.
Page 14
Keep it low-tech to start. Napkins and beer coasters
Post-Its
Whiteboards
Paper and pen
Page 16
Medium weight tools:Balsamiq Mockups
wireframes.cc
Microsoft Visio/PowerPoint
ProtoShare
Adobe Fireworks
Page 18
High end wireframing tools:Axure RP
OmniGraffle
Microsoft SketchFlow
justinmind Prototyper
Page 20
Thank you!EMAIL: [email protected] : @WEB_GODDESS
FLICKR IMAGE CREDITS: ROSS CATROW, BLUEKDESIGN, ACTIVESIDE, JKING89, YANDLE, RAYMOND LAROSE, SCOSCHIE, MEZZOBLUE, DANNOHUNG, WIERTZ SÉBASTIEN, FEATHEREDTAR, THE ENGLISH ELECTRIC COMPANY OF AUSTRALIA LIMITED