Business BootStrapping Tips – 05. Wireframing 101

Business BootStrapping Tips – 05. Wireframing 101

Business BootStrapping Tips – 05. Wireframing 101

This article originally appeared in issue 213 of .net magazine – the world’s
best-selling magazine for web designers and developers.

Affordable online and offline wireframing

If you covet Adobe Illustrator or Fireworks for wireframing, realize that
there are better, more affordable alternatives out there

With web designers and developers increasingly understanding the value and
importance in quickfire prototyping regarding a site’s structure and architecture,
robust wireframing tools are key. The cheapest is pencil and paper, wryly recommended
by Nikolas Head, tech lead for We Love. He says nothing beats it for rapidly getting
layout and functionality ideas down, enabling fast iterative wireframing.

For the next step – sharing and updating – getting online is the best bet.
Google Docs now includes Drawing, which is free and offers sharing, and
Morten Just has created useful templates to speed things along
(googledocs.blogspot.com/2010/05/rapid-wireframe-sketching-in-google.html).
SlickPlan is also handy for creating site maps and flow charts.

For more emphasis on interactivity, try Mockingbird
(from $9 per month for two active projects), Jumpchart (free for a single 10-page project,
then from $5 per month) and HotGloo (from $7 per month for one project). On the desktop,
things are pricier, with OmniGraffle (£59.99, Mac OS X) and Balsamiq Mockups
($79, requires Adobe AIR) being firm favorites, despite the latter’s penchant for Comic Sans.
However, bargains also exist, including open source vector editor Inkscape (Mac and Windows),
Apple Keynote (£11.99 from the Mac App Store) and iMockups for iPad (£5.99),
which UX designer Aral Balkan considers a “pure joy”.