An interesting discussion has been generated around Balsamiq Mockups on Andy Budd‘s Blog. His blog post stands up as an in doubt review (see Peldi’s response here) of a tremendously successful piece of software. Lots of people seem to like Balsamiq Mockups for certain reasons. Few don’t get it and very few that don’t like, at least initially. I’ve been following the project for quite a while and have been impressed about everything around Mockups: its user community, the product itself, the ease of use, the success and the potential recipe behind that success.
Here are few points that Andy makes in his Mockups critique:
Balsamiq tries to capture the sketchiness of a hand draw wireframe by using artificially wavy lines, comic icons and hand drawn fonts— in this case Comic Sans.
The Comic Sans issue that Peldi had to answer way too many times. Maybe it’s time for him to buy another font and stop all these discussions. 
The logic is obviously to make the wireframes seem hand sketched so people don’t become too obsessed by the visual representation and focus on the content, hierarchy and functionality instead. Unfortunately the design for me had completely the opposite affect. Instead of feeling rough and hand drawn, these wireframes felt incredibly stylised — just not in a good way.
I decided to simply put in here a piece of wireframe made with Mockups (from MockupsToGo.net ). It’s up to you to decide how exactly the wireframe looks like. Is it too noisy? Is it OK? Does the font really bother you? Is there a confusing caused by “looks like paper but doesn’t feel like”? Or does it really feel like paper to you? Or simply sketchy, easy to produce and fast to throw way? Do you see the content or the thick lines? I know: questions, questions, questions! Peoples, opinions, differences! 
Andy goes forward and points out the purpose that, in his perception, wireframes have:
The purpose of a wireframe is essentially threefold.
1. As a visual tool for exploring content, hierarchy and interaction problems.
2. As a tool for sharing and communication possible solutions to stake holders.
3. As a tool for envisioning and testing the proposed experience.Now I fully believe that the first purpose is the most important and that wireframes should be used as an ideation tool before a communication tool.
A very interesting point that Andy makes about advanced and specialized tools like Visio or OmniGraffle is that “they are a bit of a halfway house between sketched wireframes and a fully interactive prototype.” And he explains why is that: “We occasionally use them but more often than not we’ll start with hand sketched wireframes and then move onto HTML/CSS wireframes if we need to envisage or test complicated interactions with real users, which is actually quite often.”
Now, here is where I wonder where does FlairBuilder fit in in all this discussion. Is FlairBuilder a tool that may stand up against DHTML/CSS for really interactive prototypes? I personally, when it comes to testing with real users, I do not see a real advantage in presenting to users something that might later be reused, I mean, reusing the code. The real purpose is to have something that mimics as much as possible not the look’n’feel to which most people are agnostic to some extend, but the behavior and, more or less, the positioning and dimensions.
Do subtle gradients and color palette choices matter in application design? Maybe, although most of the time many applications fail in providing a really good looking design. Does the page flow, the choice of on page controls and UI elements matters? A lot!
Clearly DHTML/CSS offers you the best experience that a prototype may offer. That’s because it gives you the real meat, the real stuff. A button is a button, a link is a link and behaves accordingly. While there a lots of Ninjas outthere doing Ruby and HTML and JavaScript in vi or in TextMate or, the initiated, in Notepad, in seconds, most of us need more time to style and align stuff in HTML. The good ol’ drag’n’drop that most of the presentations emphase in the first minute as a top feature, it just works better for most of us. And I think that here’s where FlairBuilder fits in. Its drag’n’drop (shame on me!!! ) driven interface, with plain old good absolute positioning and a few other “designy” features, make it easy to prototype sufficiently complex application interfaces really fast. It doesn’t beat jQuery in some of the most coolest stuff outthere but, hey, it’s almost ready to be released at its 1.0 version. How much can you ask from a 5 months old tool? I really believe it does enough, maybe too much for an unreleased piece of software… But what can I say, I’m a bit of perfectionist myself too.
PS: I coudn’t help myself from making the above mockup in FlairBuilder. It took few minutes and here’s the result.
We’ll get there though…
