Wireframing Web applications

* A look at wireframing applications: Balsamiq Mockups, Gliffy Online, iPlotz

Designing Web applications is complicated and one area in particular where painstaking, expensive, iterative development occurs is user interface design. Get it right and your Web application will stand or fall due to its underlying functionality. Get it wrong and it doesn't matter how good the underlying service is, the chances of success will be seriously reduced if not short-circuited altogether.

In Web design circles they talk of “wireframing” or as it is sometimes called “Web wireframing” – that’s the technique of graphically depicting a user interface layout so that those involved in approving the design can reach agreement on direction and style.

Typically, the wireframing process begins on a white board for the initial “blue sky” thinking and then gets formalized using an application such as Microsoft Visio (if you’re looking for a Web wireframing stencil library for Visio check out the Visio Wireframe Toolkit for Download). Note that the wireframes you create with this toolkit will have a Microsoft Internet Explorer “look.”

As good as this toolkit is, not everyone likes Visio so these dissenters have two choices: Either use another desktop-based wireframing tool or use one provided as a Web application. In this newsletter I have, for your delectation, one offline only application, one online-only application, and one that is both online and offline.

Balsamiq Mockups is wireframing application written in Adobe Flash that uses a Flash projector (essentially a wrapper that embeds a Flash movie in an executable file) to create a desktop application for Macs, Windows, and Linux.

Mockups uses the “sketch” style of depiction rather than an exact representation of UI components along with import, export, and sharing features. This is, without doubt, one of the slickest tools I’ve seen for wireframing and the fact it works cross-platform is really impressive and a testament to the power of Flash. At $79 Balsamiq Mockups is excellent value.

My online-only pick is Gliffy Online another Flash-based wireframing system. Gliffy uses a depiction style that is much less “sketchy” than Mockups but still manages to not look like the output of a specific browser.

Actually, Gliffy is really very much an online analog of Visio without the “smart” shapes so it not only produces wireframes but also other types of diagrams such as floor plans, flow charts, network diagrams, UNL diagrams, and so on. Gliffy provides collaboration features including support for up to 1,000 users with admin and user access levels and the ability to blog your diagrams.

Gliffy is priced at $5 per month for single users while business accounts are priced starting at 10 users for $25 per month (in case you wondered, a 1,000 users account is priced at $875 per month). Educational discounts are available.

The support of a wide range of diagram types makes Gliffy a compelling corporate diagramming solution and extremely competitive with Microsoft’s Visio where the latter’s programmability and “smart” shapes aren’t required.

My pick that does both online and offline service is iPlotz, another online, Flash-based wireframing system that, like Gliffy, provides collaboration features, but unlike Gliffy creates mockups that are more “sketchy” and that are also “navigable,” that is, you can link controls and pages so that the “flow” of user interface interactions can be modeled.

I really like iPlotz – it has that “designer” feel and the addition of linking pages makes it very easy to demo UI concepts. iPlotz is free for a single project limited to five wireframe pages, while $15 per month or $99 per year gets you unlimited projects with 1GB of storage. The desktop version is priced at $75.

It is hard to choose between these products and services. Some are stronger in look and feel (though not by much and your preferences in visual style may be different from mine), some are better for collaboration (iPlotz stands out here), while desktop or Web support may be the deciding factor for your environment. What’s great is that the tools are available, they work amazingly well, are mature, and are very reasonably priced.

Join the Network World communities on Facebook and LinkedIn to comment on topics that are top of mind.
Must read: 10 new UI features coming to Windows 10