Reviewing Wireframing Tools: Your Free Online Options

So turns out I don’t have enough time to listen to the Enlightened Business Summit presentations, but I do recommend you to listen into it if you have the chance. Tomorrow’s schedule looks specially promising.

And since I’m setting the conference cycle aside, I wanted to move on to the next topic I have in mind: Wireframing tools.

You may recall a very old post about low fidelity wireframing exposing the use of the Balsamiq Mockups tool. Today I want to get more into detail about what our online options are and the differences that set each tool apart from the other.

And since I love it so much, I’ll start with

Balsamiq Mockups

The online demo can speak for itself. Totally sketchy. No straight lines whatsoever. Which, by the way, I think is a great pointer because I completely agree with what this article about wireframes has to say. And I know that article focuses on hand-drawn wireframes, but the sketchy style can work for the purpose of differentiating the stages in the design process, as to not start wireframing with the cool, straight lines.

Additional good mentions:

  • Great easy-to-use interface and elements
  • It has a lot of different elements to choose from
  • It provides some mobile design elements too
  • It has easy saving options (and enough formats to choose from)

Disadvantages:

  • It can only produce low fidelity wireframes
  • It is a demo version (a modal window will be nagging you every five minutes telling you to buy it)

Mockingbird

This tool serves for a higher fidelity wireframing process. The lines are straight, alright. And the elements provided are more complex than those provided by the balsamiq tool, although it provides less markup elements. It’s also not as intuitive as Balsamiq, but it is fairly easy to use. It has a very clean design, too. So, to sum up:

Advantages

  • More complex elements
  • Higher fidelity, supports later stage of the design process
  • Good interface design

Disadvantages

  • Less markup elements
  • No sketchy elements – doesn’t support a lower fidelity wireframing stage
  • Doesn’t provide mobile elements

Mockflow

This one has a lot more options and it looks a lot more neat than both of the last ones. It gives a great variety of elements and has a very clean interface, too. The problem is that the elements aren’t classified like in the other tools, so it difficults its use.

Good things

  • Great variety of elements
  • Very clean and professional look
  • Higher fidelity wireframing support
  • Provides a lot more options for wireframing (mobile, facebook app, iPad app, among others).
  • Provides a downloadable desktop version
  • Supports saving various pages.

Bad things

  • It doesn’t support the low fidelity wireframing stage of the process
  • It doesn’t provide markup elements
  • It has no element classification (gives them in a long list)

Gliffy

Gliffy isn’t an essentially wireframe-dedicated tool, but it has wireframing elements for your use. It is, nonetheless, a minimized version of Microsoft Visio, since it has its elements divided by type of diagram they work for.

Advantages:

  • It can serve for creating other kinds diagrams
  • It is fairly easy to use

Disadvantages:

  • It has very few wireframing elements
  • It doesn’t support low fidelity wireframing
  • It is classified by diagram and not type of element
  • Doesn’t provide mobile elements

Pencil Project

Pencil is one of the most complete wireframing tools I’ve tried, although I found its interface to be a little cluttered for the same reason. It might, however, be due to the way the elements are presented.

Advantages:

  • Supports both low fidelity wireframing and a higher fidelity wireframing stage, since it provides straight-lined elements and sketchy elements.
  • Has a great variety of elements to choose from.
  • Provides a downloadable desktop version.
  • Provides some markup elements.
  • Provides Windows XP elements.
  • Supports saving various pages

Disadvantages:

  • Doesn’t support mobile wireframing

iPlotz

I really liked the variety of elements that can be used in this wireframing tools, it had a lot that I hadn’t seen in the others. I found its interface to be very cluttered with stuff, though. It supports saving various pages, though, which is a very good aspect.

Good stuff:

  • Has a great variety of elements to choose from and implement
  • Low fidelity wireframing
  • Can save various pages

Bad stuff:

  • Cluttered interface
  • Doesn’t provide markup elements
  • Doesn’t provide mobile design elements

So which one will you use? Still, if you need any more tools (not many of them provide mobile design elements, for example) you can always use one of the following sources:

Not enough wireframing tools? Here are some useful listings you can reach out for

And if your project is essentially iPhone app design, you can always use this cool app to get the job done.