iA


Wireframing tools

by rainwiz. Average Reading Time: about 4 minutes.

Nowdays I spent about 30% of my time wireframing.
A year ago it was close to 50%.
Two years ago it was over 60%.

It seem that wireframing is going out of fashion, isn’t it?
That’s a white lie.

I still wireframe, especially on paper during meetings. So the tool depends on your goals. Try to answer:

  • Who are you wireframing for?
  • Do you need to keep this documentation updated?
  • Do you need to collaborate with a tem of IA/UX?
  • Do you need to share it and collect feedback remotely?

So, now that you’ve a more accurate idea about your need, you can pick the right tool.

Balsamiq Mockups
I’ve been using or following Balsamiq for the past couple of years. I remember being glued to balsamiq web app (Adobe air) because it was the first of the applications I tried. What makes Balsamiq so valuable? Tons of free add-ons that can be downloaded at http://mockupstogo.net/. Furthermore the Midnight Coders have provided a conversion service that creates a full blown Flex application from your Balsamiq mockup. Cool stuff!

Mockingbird
Mockingbird is a cheap (9$ to 85$ monthly) web-based app to create, link together, preview and share wireframes of your project.
I really like the drag and drop user-friendly UI, the smart text resizing and the possibility to easily share wireframes with clients/ colleagues or stakeholders.

HotGloo
HotGloo is a very accurate web based wireframing tool. The prototypes it creates are fully interactive, and can be shared between clients and collaborators. It’s a brand new app ready to be the leader one.

Cacoo
Cacoo is a solid diagramming tool, with some unique features like the real time collaboration & chat.
I like it, especially for the wide stencil library, that contains every general type of UI component you would want to use. The weak point is the low developed community.

Lumzy
Lumzy is another diagramming web app. What’s cool? It’s 100% free.
I appreciate the “make it public” feature and the extended stencils library. On the otherside Lumzy hasn’t a good grid tool & a too flat masterpage management (single father & son).

Mockflow
I found MockFlow from a Google search for “wireframing toold” and having seen their landing page I had a negative connotation of that app. The truth is that mockflow is improving, month by month. Now is a complete tool with excellent design & team features, plus a store where you can buy new components. There’s no monthly fee, just yearly.

Pidoco
Pidoco is a german product. The general impression is that you’ve poor stencils & tools. It’s growing, and in the compaly plans you’ll also manage screenflows & usability tes in pidoco. Just wait.

Pencil
“The Pencil Project’s unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use”. I reused these words because Pencil is a project before tha an app. The GPL2 licence puts it in the free software family. Basically is a client tool (firefox plugin) to draw diagrams. It’s good for simple stuff, but it has a lot of limitations when you want more.

Axure RP
Axure is a client app that is specifically designed for creating web site wireframes & prototypes. As a result, all of the tool bar elements are strictly catered towards the web design world, but you can easily add new shapes & libraries (stencils). I used it for a year and half with a lot of success & fun.

Adobe inDesign
I have been using inDesign for the last three years. It’s a mature client application for desktop publishing, full of features, very flexible. It has a steep learning curve. In combination with Adobe illustrator you can create any design&wireframe&mockup you want, drawing reusable components and an extended masterpage management. The side effect is that you can’t directly share your project & that iit’s not web based, so you always need to install the software.

I’ve not considered Gliffy, Simplediagrams, Denim and… the back of the napkin, even if paper is a useful tool too.

Here’s a comparison table.

Platform Price Collaboration Export Rapidity Interactivity MasterPage Grid
Balsamiq Mockups
Web & Client 79 $ High PDF, PNG, XML High Medium Low
Mockingbird Web 9$-85$/monh High PDF, PNG High Medium
Hotgloo Web 14$-54$/month High PDF, PNG High High Medium High
Cacoo Web 5$-99$/month Medium PDF,PNG,SVG High Medium Low Low
Gliffy Web 4$-9$/month Medium SVG,JPG,PNG,XML High Low Low
Lumzy Web Free High JPG,PNG,PDF High Medium Low
Mockflow Web & Client 69$/year High PDF,XLS,PPT,PNG,XML High Medium Low Medium
Pidoco Web 9$-99$/month Medium SVG,DOC,PDF High Low Low Low
Pencil Client (Firefox plugin) Free HTML,PNG,DOC,PDF,SVG High Low Low
Axure Client (Mac&Win) € 439,00 Low HTML, PDF Medium High High High
inDesign Client (Win&Mac) € 1.027,00 PDF Low Low High High
Paper Free High High Low High

Do you want to know what I use now? HTML & custom CSS framework. This will be explained in another post.

4 comments on ‘Wireframing tools’

  1. Grazie, molto utile!

  2. Marco Parravano says:

    I inspired all this a bit…

  3. rainwiz says:

    That’s true! Look @ the datetime!

  4. WireframeSketcher is another rapid wireframing tool you should look at. It works as a plugin for any Eclipse IDE and also comes as a standalone version.

Leave a Reply