9 Comments

Summary:

The practice of wireframing is common to most web production professionals. Oddly, there’s no clear market leader or category-defining product in this space; even solutions such as Adobe’s Creative Suite lack dedicated wireframing or rapid prototyping tools. There are, however, a number of useful smaller options. […]

The practice of wireframing is common to most web production professionals. Oddly, there’s no clear market leader or category-defining product in this space; even solutions such as Adobe’s Creative Suite lack dedicated wireframing or rapid prototyping tools.

There are, however, a number of useful smaller options. Late last year,  Mike Gunderloy evaluated the popular Balsamiq Mockups and its deliberately sketchy wireframes. I recently discovered FlairBuilder, another up-and-coming wireframing tool which, like Balsamiq, is based on the Adobe AIR platform.

While lacking Balsamiq’s cutesy, sketchy style, FlairBuilder has a number of interesting features useful for wireframing:

  • A tabbed interface, enabling users to work on multiple projects and pages, along with tools to create “master” templates for a number of pages within a particular project.
  • A pretty comprehensive gallery of components, segmented into palettes, along with a nifty search-as-you-type tool to help locate individual components.
  • Integration with web applications, including Google Maps, Vimeo and YouTube, allows live content from third-party services to be incorporated into a wireframe layout.
  • An online viewer allows non-FlairBuilder users to open and view projects created within the app, which is great for working with clients.

At $99, FlairBuilder is inexpensive enough for most web design or development professionals to take a chance on — in fact, it’s only marginally more expensive than Balsamiq.

Both Balsamiq and Flairbuilder do a reasonable job at a low cost. Personally, I use a combination of MindNode for high-level site structure and OmniGraffle-based wireframing templates to put together information architectures. But I can’t help thinking there’s great potential in an application or service that’s more integrated into the workflow of other common design tools such as Dreamweaver, Illustrator and Photoshop, or that’s oriented around web-based collaboration like Google Docs.

Incidentally, there’s a great unsung blog called Wireframes that’s worth adding to your feed reader.

What wireframing tools, methodologies and practices do you use?

By Imran Ali

You're subscribed! If you like, you can update your settings

  1. Hi, Imran! Thank you so much for your review! I must say that you’ve caught perfectly the essence of what FlairBuilder does as a wireframing and prototyping tool.

    FlairBuilder targets the kind of wireframes in which the content and layout is much better defined, up to a higher level of detail. Therefore the straight lines and, generally, the non-sketchy look that it has, as opposed to Balsamiq Mockups. See here my thoughts on FlairBuilder and Balsamiq mockups: http://www.flairbuilder.com/flairbuilder-or-balsamiq-mockups-which-is-it-going-to-be/.

    FlairBuilder is a prototyping tool and its price will go higher as the product will evolve. As a matter of fact, the current $99 price tag is actually the result of 50% discount I made in the first month after the launch and the discount is about to expire.

    There are many exciting features coming up soon and I’m very happy to see such a positive feedback coming up from the community. I’m very open to any critics or suggestions for how to improve the product.

    Thank you so much once again,
    Cristian

    Share
  2. Hi Christian,
    I am a seasoned Flash/Flex/Air Application developer and currently I am doing all wireframing with Flex Builder.
    Could you please give some advice about whether and why it could still make sense to me to buy FlairBuilder on top ?
    And when yes – is there an option/plan to import FlairBuilder’s code into Flexbuilder where the Wireframe can be morphed into a final application ?

    Greetings from Switzerland
    René

    Share
  3. Hi René! Thank you for your comment and question.

    To put it simple, I try to move away from any particular platform in the sense that I want the wireframes to be technology agnostic. Nevertheless, it’s still possible to generate code for any technology you’d like to.

    In a couple of versions from current one I plan to have some sort of pluggable system for all kind of stuff, code generation being one of them. So stay tuned!

    Cheers,
    Cristian

    Share
  4. Dan Strohschein Monday, June 1, 2009

    Hi Imran,

    Also coming out with Blend 3 in July from Microsoft is SketchFlow, a product specifically designed for similiar purposes of mockups and prototyping, but based on the Microsoft web platform (Silverlight, .NET). You can read more about it here http://electricbeach.org/?p=145

    Just for those who want to be multi-platform :P

    Share
  5. Erick Jacobs Monday, June 1, 2009

    Hey guys,

    What about Axure RP Pro? Looks useful and amazing! I’m waiting for the osx version. What do you think about Axure?

    Cheers, Erick Jacobs

    Share
  6. Hi guys,

    Erick, if you’re looking for a OsX prototyper with plenty of resources, you should check JustInMind Prototyper. You can design a fully functional application wireframe and simulate it, and also publish online.

    For a tryout, visit our web or talk to me @ twitter

    Share
  7. [...] a nice touch that isn’t available in some of the other wireframing web apps like Balsamiq and FlairBuilder. However, if you’re doing a lot of web design work, you may need a more robust solution. If, [...]

    Share
  8. [...] covered various wireframing tools in recent months – including Balsamiq Mockups and FlairBuilder. In reviewing FlairBuilder, I lamented the lack of dedicated wireframing and prototyping tools [...]

    Share
  9. Hi,

    I’d like to let you know about Justinmind Prototyper another player in this market.

    Justimind Prototyper lets you go extremely far in the prototype creation. You can, of course, create basic wireframes and stop there but we think the real point in creating a software prototype is letting someone experience instead of merely telling your ideas.

    Justinmind let’s you create really complex interactions: things like performing calculations in your prototypes, simulating with real data, implementing dynamic behaviour. So you can end up having prototypes with working forms and datagrids, animations, dynamic elements… You can even turn you prototypes to HTML code or generate automatically functional specs from them.

    If you want to go further in your prototypes, you should check it. This fidelity degree is definitely unvaluable when selling your ideas. See the video of our latest realease: http://bit.ly/bXJBmp

    Cheers,
    Dan
    @Justinmind

    Share

Comments have been disabled for this post