Review: The best wireframing tool yet?
Posted in Boagworld Bites, Reviews on: Thursday, April 15, 2010 by Paul Boag
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.
Podcast: Play in new window | Download (Duration: 11:08 — 7.8MB)
This review is brought to you by Web Directions @media. Bringing together world experts in design and development, over 2 days of conference and 2 days of workshops, Web Directions @media continues to be the web professionals networking event of the year. It also includes the Boagworld Big Breakfast so don’t miss out.
Subscribe to Boagworld Bitesize
Wireframes are absolutely crucial to any web project. Most of the time these can be as simple as a hand drawn sketch. However, there are occasions when you want something a little more sophisticated.
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.
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.
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.
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.
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.
This review is brought to you by Web Directions @media. Bringing together world experts in design and development, over 2 days of conference and 2 days of workshops, Web Directions @media continues to be the web professionals networking event of the year. It also includes the Boagworld Big Breakfast so don’t miss out.
22 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
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!
I cant afford paying to a wireframing tool. Cacoo http://cacoo.com/ a new wireframing tool by japanese friends, looks awesome. My favorite.
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!
I like Mockflow http://mockflow.com/ and iPlotz http://iplotz.com/ too…
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!
Looking at JustInMind right now…not a bad tool, and they have a service for testing online. This looks promising though.
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.
thanks for the tip, i’m testing it out right now.
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.
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.
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??
Α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…
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.
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.
I just tweeted about this… Recommend checking Axure – (now on Mac too) http://www.axureformac.com/
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?
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.
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.
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.
I don’t see anyone mentioning HotGloo which has almost the exact features of Flairbuilder. You should check it out.
+1 for HotGloo. It’s bloody fantastic. Really, Paul, check it out.
Nobody mentioned ForeUI? It is the best wireframing tool I’ve tried.