Review: The best wireframing tool yet?

When there are so many wireframe tools that help plan your website, finding the right one can be challenging. However, I think I have found a real gem.

Maybe your wireframe needs to be more interactive. Maybe you just want it to look more impressive for the client. Whatever the case, there are no shortage of tools that will do the job.

From web apps like Balsamiq and Mockingbird to desktop software like Omnigraffle or even Powerpoint, there is no shortage of ways to wireframe.

Each have their pros and cons but all seem to fall down in one fundamental way – It is hard to share your wireframes with the client. For example Mockingbird is a great wireframing tool, but clients who use IE cannot view them. Balsamiq suffers from a similar problem where wireframes can only be shown as images.

Balsamiq

These tools are all great for internal development. However, as a communication tool with the client they fail miserably.

However, while at SXSW I ran into a chap who has built a tool that overcomes this problem. The app is called Flairbuilder.

Present your wireframes to clients with ease

Like Balsamiq, Flairbuilder is an Adobe Air application. This means it is cross platform unlike many of my previous software recommendations.

Building in Flairbuilder is similar to other wireframing tool. It is quick, easy and fairly intuitive.

Flairbuilder

Things get interesting when you have finished and want to show the client. At this point you have a couple of options.

You can email the saved file to the client and tell them to open it using the Flairbuilder online viewer.

Flairbuilder free view application

Alternatively you can upload the finished wireframe to your own server and send the client a URL which automatically loads that file into the viewer. e.g.

http://www.flairbuilder.com/viewer/?url=http://www.boagworld.com/sample.fbp

Because the viewer is built in flash it is accessible to anybody with the plugin and provides a consistent viewing experience independent of browser or operating system.

However it isn’t just Flairbuilder’s sharing capabilities that makes it so good. It is also the functionality of the application itself.

Everything you would expect and more

Flairbuilder does everything you would expect from a wireframing application. You can add, edit and remove pages. You can insert boxes, text, form elements and other screen objects. These can be dragged around the page and edited to your hearts content.

However, Flairbuilder is not designed primarily as a static wireframing tool. It is designed as a powerful prototyping application. Elements are not static. You can add events to them in order to make them interactive.

We are not just talking about linking pages together either. In Flairbuilder it is possible to…

  • Show and hide elements
  • Display popup windows
  • Create carousels and slideshows
  • Build working tabs
  • Insert usable accordions

The list goes on.

In short Flairbuilder is the most powerful wireframing tool I have yet to encounter.

A reasonable price

What makes it even more amazing is the price. Admittedly it cannot compete with Mockingbird which is currently free. However, for the additional functionality you get over something like Balsamiq (priced at $79) the $99 price tag seems very reasonable.

Any drawbacks?

With me heaping all of this praise on Flairbuilder you might be under the impression I am being paid for this review. I am not. The creator did give me a free copy, but he did so without ever asking for anything in return. The reason I am writing this review is because I am honestly impressed with the product.

However, it does have one drawback. It can become slow when dealing with large wireframes. When you start adding in a lot of imagery (not something one often does with wireframes) it seems to slow the whole system down considerably. This can prove very frustrating at times.

An image heavy wireframe

That said, a recent update seems to have gone some way to improving the problem and I am sure more updates will follow shortly.

Finally, if I was being super picky I would say the application has a small learning curve when you start. This is hardly surprising with so much power under the hood. However, this could prove problematic if you are new to such tools.

Do I recommend Flairbuilder?

So do I recommend this application? Absolutely. At least, I do if you want a tool that can build complex wireframes and prototypes that need to be viewed by a wide range of people.

If on the other hand you just need something simple for your own reference then a free product like Mockingbird maybe the way to go.

  • http://www.digital-results.com Charles

    Flairbuilder certainly looks like something to consider but I just can’t stop loving Omnigraffle (and the Wireframe UI stencils!) enough to try anything else! I understand the ‘sharing with clients’ element but I just do a screen share with our clients and have Omnigraffle up on the screen with them watching. Works a treat!

  • http://twitter.com/emrenusret Emre Nusret

    I cant afford paying to a wireframing tool. Cacoo http://cacoo.com/ a new wireframing tool by japanese friends, looks awesome. My favorite.

  • http://twitter.com/cschneider Chris

    Check out the Moodboard iPad app if you happen to have an iPad. It’s not a wireframing app, but it’s a moodboard app, and makes it great when you are sitting with a client going over ideas! Great article!

  • http://cyrill.tumblr.com Cyrill

    I like Mockflow http://mockflow.com/ and iPlotz http://iplotz.com/ too…

  • http://www.crystal-asia.com Ryan

    I swear by Unify Eightshapes which uses Indesign. Sure you need to pay for indesign, but it’s worth it! The text handling capabilities, automarkers, no limit to it’s elements and it’s packaging, guides and everything else.

    When you’re done, drag them into the deliverables and document your page. Wouldn’t use anything else unless it was for fun!

    In saying that, a client of mine used Balsamiq and it looked pretty good, but I found the interface required learning… a bit too much.

    Cheerio!

  • John Zimmatore

    Looking at JustInMind right now…not a bad tool, and they have a service for testing online. This looks promising though.

  • http://vasily.posterous.com Vasily Myazin

    This looks great! Thanks for sharing.

    Also, be sure to take a look at an excellent wireframing tool called Mockflow at http://www.mockflow.com.

  • http://www.pixelclub.be Nico

    thanks for the tip, i’m testing it out right now.

  • http://rypearts.com Ryan Putnam

    I’ll have to check this out!

    Lately I have been going back and forth with web apps, OmniGraffle, and Illustrator. For now, Illustrator gives me the most control.

    With Illustrator, I have a library of common web elements as Symbols and Styles, similar to OmniGraffle’s Stencils. To proof, I will save as a PDF and in Adobe Acrobat I can link pages together by the Linking Tool for some basic navigational interaction. Once the wireframe is approved by the client, it is easy to export the Illustrator file into Photoshop with all the correct layers and objects.

    Work great for now, but I might need a tool with a little more interactivity like in Flairbuilder.

  • http://blog.mintek.com chris kluis

    I’ve used flairbuilder in the past and thought it was really good.

    Depending on the technology stack you are prototyping for Microsoft Expression Blend’s Sketchflow may be the best solution (if you are considering Silverlight development).

    Otherwise I highly recommend flairbuilder.

  • http://www.looktouchfeel.com Rick ONeill

    Couldn’t agree more Paul, been using this for a few months now and really impressed. However, I’m frustrated that they don’t seem to have enquiry forms in their library? Can one download further libraries, or make suggestions to the creators??

  • http://www.freeweird.com gsarig

    Αxure is also a great tool for wireframing and prototyping. It can easily produce interactive html prototypes, with annotations and even specs on each particular component.

    Furthermore, it gives you the option to export the specs in a .doc format.

    The drawback is it’s price. I don’t remember the exact amount right now, but it’s expensive…

  • http://messagefirst.com Todd Zaki Warfel

    You might also be interested in watching a few time lapse videos a few friends and I put together showcasing a few different wireframing/prototyping tools. I did a time lapse video using Fireworks and you can see the rest in the Right Way to Wireframe Playlist on Youtube.

    • http://twitter.com/kelter Kel

      Oh, and I really have to agree with Todd here, Fireworks rules most of my day. Too bad about that Adobe thing :( I don’t foresee Fireworks staying around very long.

  • http://twitter.com/kelter Kel

    I just tweeted about this… Recommend checking Axure – (now on Mac too) http://www.axureformac.com/

  • http://www.pixelrockit.com Bartosz Oczujda

    Why most of these wireframe tools make wireframes look like the have been drawn by a 5 year old? I really don’t like that hand drawn effect.

    Do you know any good wireframing tool that will make my wireframes look more professional? More like a website than a child drawing?

    • http://www.digital-results.com Charles Southey

      I don’t really like the child look either. I think clients often think that the wireframes are the end product!

      Obviously this is down to bad communication whereby the designer hasn’t briefed the client about what they’re about to receive. If I was a client and I received something by email to look at and it was a load of boxes with unformatted text all over the place I reckon I would panic!

      I personally don’t like revealing anything to clients without doing a screencast to explain all the key elements. This works really well to remove the suprise factor, allow us to justify our decisions, iron out any instant ‘gut feel’ rejections and has significantly reduced the approval time for each phase of the project.

  • http://www.tekture.com Nathan Sudds

    FlairBuilder looks interesting, I will have to check it out more — the interactions specifically. It seems that I have tried many wireframing tools out there but always come back to Balsamiq — I still feel it’s the best all around. I do agree they all have their pros and cons, and a lot of personal preference is involved — for instance I prefer the sketch look of Balsamiq. And not just for myself, but also for how the client looks and interacts with the wireframes. Anyone else see positive benefits to the sketch drawings with their clients vs ‘professional’ more standard wireframe designs?

    My main reason for responding here was to mention that Balsamiq have also been working on a hosted app version called MyBalsamiq, It’s currently in closed beta testing but you can still check out the tour: http://www.balsamiq.com/products/mockups/web

    Also you have the added bonus of being able to switch back and forth between the Desktop app and the webapp… giving you the ability to work without an internet connection when you need to but have the sharing capabilities too.

    Unfortunately it’s closed beta right now, but signup because knowing Peldi and the team at Balsamiq once they get the app where they want it, it will be well worth the wait… I say that because I see their dedication to improving the UI. And you’ll see even in their development of the product, they are using Balsamiq to allow user input on how the product develops. http://www.balsamiq.com/blogs/mike/2010/03/next-steps-for-mybalsamiq/

    Thanks for sharing your thoughts and the links above, it’s always great to try out new products and hear other people’s thoughts on the topic.

  • http://www.aljiro.com Aljiro

    Flairbuilder is awesome! I just got a copy and I will be reviewing it in my blog.

    Thanks for pointing me in the right direction I was looking for the best wireframing tool and I think I found it.

  • http://www.animaltrapperstampa.com Jose

    I don’t see anyone mentioning HotGloo which has almost the exact features of Flairbuilder. You should check it out.

  • http://tamedmedia.com Keith

    +1 for HotGloo. It’s bloody fantastic. Really, Paul, check it out.

  • Harry

    Nobody mentioned ForeUI? It is the best wireframing tool I’ve tried.

  • http://www.thereadaloudcreative.com Richard

    I think this is a great tool. But seriously….. What happened to Pencil & Paper? The more developed Wireframing software gets, the more it tries to mimic hand drawn.

  • http://twitter.com/mockuptiger Mockup Tiger

    Can you please check out MockupTiger?

  • http://twitter.com/mockuptiger Mockup Tiger

    Can you please check out MockupTiger?

  • http://twitter.com/mockuptiger Mockup Tiger

    Can you please check out MockupTiger?

  • http://twitter.com/patrickrushton Patrick Rushton

    Another Fireworks user here. @0c6984ba12b2390ef213965e7741bb2a:disqus : the videos you mentioned don’t seem to be available on Youtube. Is there any other way I can find them?

  • Adam Burton

    The video is marked as private…

    • Anonymous

      That is a shame :( Looks like the owner has changed its status. I have removed from the blog post.

  • http://twitter.com/stooni stooni
  • http://twitter.com/CarrieBotello Carrie

    Very
    interesting! I haven’t looked in FlairBuilder very much, but I found this
    article really helpful:
    http://www.greenhatwebs.com/mockflow-vs-axure-vs-balsamiq. It compares a lot of
    the features of three of the top wireframing tools in an easy-to-read chart.

  • Imane

    Very Interesting article. I have recently discovered a wire-framing tool called Visual Spec. It makes the whole design process a lot simpler. Its absolutely free at http://www.visualspec.co.k

Headscape

Boagworld