1. Wireframing
How a Napkin Can Save You a Million Bucks

2. You have an awesome
website idea.
You want somebody to build it.
You tell them what you want.

3. (REALITY)(VISION)

4. Because developers
aren’t normal.
(And neither are clients.)

5. Words are ambiguous.

6. GALLERY?
POP-UP?
DATE PICKER?
LIGHTBOX?
LANDING PAGE?
PROFILE?
SLIDESHOW?

7. ...and nobody reads them anyway.

8. Fixing defects is expensive.

9. Relative Cost to Fix Software Defects
0
25
50
75
100
Design Implementation Testing Maintenance
1X
6.5X
15X
100X
SOURCE: IBM SYSTEMS SCIENCES INSTITUTE

10. So what’s the solution?
Draw a picture.
That’s a wireframe.

12. Wireframes come in
different degrees of fidelity.

14. Keep it low-tech to start.
Napkins and beer coasters
Post-Its
Whiteboards
Paper and pen

16. Medium weight tools:
Balsamiq Mockups
wireframes.cc
Microsoft Visio/PowerPoint
ProtoShare
Adobe Fireworks

18. High end wireframing tools:
Axure RP
OmniGraffle
Microsoft SketchFlow
justinmind Prototyper

20. Thank you!
EMAIL: KRIS.HOWARD@GMAIL.COM
TWITTER: @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