WireframingHow a Napkin Can Save You a Million Bucks

You have an awesome website idea.

You want somebody to build it.

You tell them what you want.

(REALITY)(VISION)

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

Words are ambiguous.

GALLERY?

POP-UP?DATE PICKER?

LIGHTBOX?

LANDING PAGE?PROFILE?

SLIDESHOW?

...and nobody reads them anyway.

Fixing defects is expensive.

Relative Cost to Fix Software Defects

0

25

50

75

100

Design Implementation Testing Maintenance

1X 6.5X15X

100X

SOURCE: IBM SYSTEMS SCIENCES INSTITUTE

So what’s the solution?

Draw a picture. That’s a wireframe.

Wireframes come in different degrees of fidelity.

Keep it low-tech to start. Napkins and beer coasters

Post-Its

Whiteboards

Paper and pen

Medium weight tools:Balsamiq Mockups

wireframes.cc

Microsoft Visio/PowerPoint

ProtoShare

Adobe Fireworks

High end wireframing tools:Axure RP

OmniGraffle

Microsoft SketchFlow

justinmind Prototyper

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