Wireframing – Finding the Right Tool for the Job

One of the many hats I wear at Caxiam Group is documenting client processes and translating those into logical structures that we can turn into web application magic.  While I never tend to write any code (it makes the programmers nervous) I do my best to provide them with the best representation of how a proposed system of application feature should work and/or look.  What better to do that with than a picture?

Wireframing is a big part of our documentation process, but finding the right tool to create wireframes with has been a long and ongoing process.

Visio

Microsoft Visio was one of the first tools that I put into my wireframing belt.  I started out here because I was already familiar with Visio for documenting process flows and I liked the simplicity that it had for quickly mocking up basic page layouts and step-throughs of process flows.  I still think Visio is a great tool for quick mockups, but it has limitations that prevent it from being a tool we can all use.  For one, licensing would get expensive quickly for more than a handful of users.  Any wireframes that I created in Visio I could only share with clients or other team members by exporting an image format, or somehow convincing them to install the Visio reader plugin on their workstations.  Visio also did not support any interactive features and although I could save a grouping of shapes, say for a “header”, if I needed to make updates to the grouping the changes where not communicated out to the other pages of the wireframe without me manually copying/pasting.  Not incredibly efficient.

Axure

We purhased an Axure license to try and circumvent the problem of non-interactivity with our wireframes, which somewhat crosses the line into Simulation.  Axure was (and still is) a great product for creating interactive wireframe simulations of web pages/applications and allowing client review by providing the wireframe as a click-thru experience.   One of the best redeeming qualities of Axure was the ability to create re-usable “includes” for common page elements (like headers and footers) that would automatically propogate updates to the master includes out to the wireframes that referenced them.   The frustrating thing with Axure was that one of its greatest assets; the ability to export an HTML simulation, made it frustrating to use for pure wireframing and offline reference.  The wireframe/simulations that Axure creates have to zipped into a multi-file folder for distribution, and the end user must unzip them and know to click the index.html file to bring up the simluation.  It is not the most intuitive experience for the non-technically savvy.

And so, the journey continued…

iRise

I will be honest and say that I didn’t spend a lot of time with iRise beyond a few hours of evalution.  The software is vast and seemingly without end!  My one impression from the time I spent with it was that it was not the right tool for the job. Where I needed a simple phillips screwdriver, iRise was an entire store full of tools.  Perhaps I will revisit iRise in the future as needs dictate.

Balsamiq

Balsamiq has been an outstanding wireframing tool.  The interface is simple, the shapes available are logical and appropriate to web application development.  One of the great advantages of Balsamiq is that it is so easy to build wireframes with I can use it in real-time during a client meeting and still participate.  For this same reason, the entire team can use the same tool and the licensing is very reasonable.

Pencil and Paper

The old standbys are what I started with are still some of the best go-to tools in the belt.  Pencil and paper tend to be less obtrustive in a meeting that sitting and tapping away at a laptop, with the added benefit of being able to scribble random addenda in the margins as the flow of the meeting dictates.  Most of my pencil and paper wireframes end up being rendered out in Balsamiq for final presentation.