A comparison of online wireframing / prototyping tools

Wireframing is an important aspect of web development. A decent wireframe developed at the start of a project can really help to reduce development times further down the road. There are loads of tools that are commonly used for this including OmniGroup's Omnigraffle, Microsoft's Visio, Adobe's Illustrator, and even PowerPoint (yuck!). However, as I have recently found, there are actually plenty of better offerings from web based products. What follows is a brief description of the online wireframing tools that I have tried to date.

Features Overview

Most of the packages offer a fairly similar user experience with a slick web based interface.

Detailed Analysis

Lets take a more detailed look at each of the offerings...

Hotgloo

Hotgloo is a visually appealing, intuitive, easy to use, web based application for for creating website wireframes. Signing up is a doddle, and you get your own custom hotgloo URL from where you can create your wireframes and showcase them to your clients (eg. kirkdesigns.hotgloo.com). Features include grid + snap to grid, layers and a decent size archive of preset elements. You can set up interactions between elements, allowing you to create fully interactive wireframes.

Hot gloo is still in Beta and there are several bugs tat I noticed with the user interface straight away. I believe they will be launching the service for real in early 2010, and assuming they can get the little glitches ironed out I think it is going to be a very appealing product.

iPlotz

With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project.

With IPlots you cam add, delete and rename multiple pages for your sitemap, drag and drop components onto a resizeable page, link them or add hotspot links to other pages or external web pages, upload and drag and drop your own images onto a page, and export pages as png, jpg or pdf. IPlots has a huge range of default elements that you use to build your wireframes and additional elements can be imported from elsewhere (some are available on the IPlots website).

Jumpchart

Jumpchart seems a little different from the rest of the wireframing tools in this review, in that I don't really see it as a complete wireframing tool but more or a tool for bnuilding a site map. Its feature set is quite limited, only allowing you to create very basic layouts (1 column or 2 columns).

As far as I could tell, you can't really use Jumpchart to create complex layouts and are instead limited to putting basic elements on to a page and linking them to other pages. Good for brainstorming and working out your site map, but not for much more than that. In its favor, it does have a fairly nice and intuative interface.

Justproto

JustProto is another web based wireframing tool that allows standard prototyping features such as pages and page masters, standard form elements, snap to grid etc. Basic event handling is also provided, allowing easy cross linking between pages. It also features an immediate previewing facility which gives the ability to preview changes done to prototype in real time via an html version. Also included is multiuser collaboration - the ability to change one element by 2 users in real time. Justproto is fairly simple and easy to use, fast and reliable.

Out of all the wireframing tools I have looked at this one feels like the most polished and 'desktop-like' application.

Mockflow

Mockflow presents a large selection of preset elements and a nice drag n' drop interface that can be used to create website wireframes with relative ease. I'm not keen on some of the slow jQuery animations used in the top menu, and it seems to be lacking a snap-to-grid feature. You can invite people to view the prototype and can engage in real time chat with them directly through the interface.

Pidoco

Another well polished product that enables the creation of beautiful wireframes. A decent selection of preset elements including several commonly used icons, layers, snap-to-grid functionality, plain and sketch view modes and live chat support with the Pidoco team make this a good offering. They also include a fairly decent interactive tutorial to get you up to speed with the facilities on offer.

Pricing Overview

Pricing varies a far amount between the different products depending on your requirements. Most of them offer either a free trial period or unlimited use of a restricted version of the software. Restrictions on the free versions vary from limited feature sets (often, export facilities are disabled) to limits on the number of users or projects that can be created.

Summary

What I was hoping to find is that one product particularly shines above the rest. However, what I actually found is that each product seems to have its own advantages and disadvantages, and personal preference will probably play as big a part in the decision of which one to use as the products' feature set themselves.

I like the interface of Podoco, the 3 different render modes and the Adobe AIR desktop version iPlotz has to offer, the robustness of Justproto... I think I'll continue using all of the tools until my free trial runs out, at which point I think the price tag may become the deciding factor.