Wireframing Tools for Fun and Profit

Wireframing provides us a powerful tool that allows us to pre-conceptualize our design ideas and eventually make them rock solid. Often coming up with a crude version of the solution first gives us a lot of valuable information and helps us to come up with better results.

At the simplest level you require just a pen, a piece of paper and a bit of imagination. Fortunately there are some more high-tech yet still quite light tools available that offer some nice benefits. In this post I'm going to discuss some of these tools in more detail.

Besides "pen and paper" I'm going to cover iMockups, Balsamiq and FlairBuilder. iMockups is available only for iPad while the latter two are meant to be used on your desktop computer. I'll also discuss some other alternatives briefly.


Pen and Paper

"Pen and Paper" by LucasTheExperience

This is pretty much as low-tech as you can get. Just pick a piece of paper and let your imagination flow. Compared to other tools it provides some interesting benefits. It definitely won't crash! Your pen might run out of ink or something, though. It also won't require electricity. What you put on the paper stays there till you erase it or get rid of the paper somehow.

Traditional media has its downsides of course. It's pretty hard to share your creations. You'll need some kind of a camera or a scanner to get the creations digitized and online. There's also no undo. Life would be too easy if there was one.

Despite these drawbacks I believe pen and paper still work well at least for the initial concepts. After that you can always go digital if you feel like it. If the concept has been designed just for your consumption only, there might be no reason to go digital at all.

iMockups

Sample output. Flickr.

Endloop Studios' (now Endloop Mobile) iMockups is probably the next step from pen and paper. It provides you a set of predefined widgets that you may use to compose your actual mockup. Sadly there's a price to pay for this. You'll pretty much lose the freeform nature of casual sketching. It can be tough to draw things if there doesn't happen to be a pre-made widget available.

The application complements traditional tools well. Once you've nailed the basic concept on the paper, it's relatively easy to redraw it using the app and continue to develop it further in a more formal manner. It is possible to share the work easily simply by emailing it either as a project file (requires the app), pdf, bmml (Balsamiq format) or as a zip containing jpgs.

I think the app would be a lot better if they made it possible to define some kind of a "master" layer that remains behind each defined screen automatically. That would make it easier to share common elements between views. I would also appreciate freeform sketching related functionality (separate sketch layer?).

Balsamiq Mockups

Balsamiq Screenshot by ZhangYining

Balsamiq Mockups is apparently the state of art. It's a well-known and used application. There are a large amount of Mockups related resources out there. As you can see you get kind of a sketchy output from it just like in the case of iMockups. The desktop version of the application supports masters and page linking. Given there's a demo version of the application available, there's no good reason not to give it a go.

They're apparently developing a cloud-based version of the solution. This should make it easier to collaborate over the web. They're entering a crowded space given there are at least a few services like this out there already. I'll get into these in a bit.

FlairBuilder

FlairBuilder output. Flickr.

In addition to things allowed by Balsamiq Mockups, FlairBuilder allows you to do quite a bit more. The coolest thing about this application is that allows you to mock out interactivity. You can also share your work easily thanks to online viewer. All you need to do is to provide a link for your client and wait for some feedback after that. It is possible to attach annotations to your work so it's easier to justify your design choices.

Other Alternatives
There are a set of tools that go way further in some ways that the ones discussed. Of these I would like to mention Jumpchart, ProtoShare and InVision in particular. These applications move wireframe development to the web (cloud!). This makes it easier to collaborate with your team. It may also allow new ways to develop projects to emerge.

I'm particularly enticed by the approach used by ProtoShare. You can start out with a low-fi version and then iterate it with your client till you end up with a high fidelity result. I also like the fact that you have access to actual markup and styling. This can be a particularly powerful feature.

Conclusion
I touched just the tip of an iceberg in this post. You might want to check out the "Ultimate Guide to Website Wireframing" for a more comprehensive discussion on the subject. You'll find more alternatives there. I'm really curious to hear about what tools you use by the way!

The method and application you should use depends always on your situation. If you are planning something just for yourself, pen and paper will probably do just fine. If you need to collaborate on a higher level, you might find particularly the new cloud based solutions interesting.

I think we'll see more and more solutions that bridge wireframing, prototyping and actual development work in a more concrete manner. Applications such as ProtoShare already do this to some extent. It looks like it's an exciting time to be a web developer.