Anaara Media LLC

The short and sweet: Balsamiq Mockups offers a way for folks to quickly throw together wireframes – no experience necessary. You don’t need to be a wizard with Fireworks, for example, to quickly create and edit a wireframe in front of a client. It took me, as a ‘first time ever’ user of Balsamiq, about two hours to complete a wireframe I had sketched up on paper in a few minutes. That’s a plus – I doubt anyone besides myself can read the wireframe I sketched by hand, much less make heads or tails of it, while the one I made with Balsamiq is quite legible, while still lo-res such that it should impress upon the client that this is indeed a mockup not meant to communicate any sense of the look & feel of the application. My other thoughts for this particular wireframe were to do it either in FIreworks or in Flash Catalyst. The benefit of doing it in Catalyst was that the end result is actually an interactive motion wireframe. The downside of using Catalyst, though, was that (a) its still very much in the raw beta stage, and (b) the time to develop the interactivity in a way that would justify using Catalyst in the first place, would have also been much greater. For example, if you want to edit the text in a label, something you take for granted in most other applications that can be done simply by double-clicking on the text, in FC you must click on the label, and then edit the text in the property inspector rather than directly. This and other quirks are part of the beta nature of Catalyst – it just isn’t fully baked yet, which is to be expected for a beta. We’ve been waiting eagerly for Catalyst since it was first announced at MAX ‘07, and are still quite eager for a release version.

Back to the topic of Balsamiq – one feature I found I would have really liked would be the ability to create my own components – currently you can only use the ones that are given by Balsamiq – or even to have more control of the customization of the existing components. To their benefit, though, they do offer to make more if the use is general enough, if you just ask, and they say they update the application (which is an Adobe AIR app, btw) on a weekly basis. I think I would have also liked a freehand draw tool – I use a Wacom and would have liked the luxury of being able to write on top of the mockup as I wished. On the other hand, Balsamiq exports and saves to an XML format – so I can see the need to limit components to a pre-defined set of components. You can also re-use user defined components, which are really just Balsamiq Mockups themselves. The place to get those is Mockups to Go. I’m not sure if it was just the time I happened to be trying to access that site, but it seemed incredibly slow to me. Three of the ‘portlets’ on the right side of my wireframe are sourced from there…that definitely saved me a bit of time.

The best intro to Balsamiq I can recommend is to watch the intro video on their site, where they quickly make a mockup of iTunes. There is also an application called Napkee that lets you turn your Balsamiq Mockups into an interactive flex app – I guess that would kind of be on par with Catalyst, except you wouldn’t get the kind of round tripping you get between the CS4 suites and Catalyst. I didn’t play with Napkee but I get the impression it can’t export to the FXP format that is standard in Catalyst, Flex 4 and CS4.

Other features I would like to see implemented in Balsamiq:
-double-clicking on a group should let me edit the group. I guess that’s something I’m used to seeing from some of the Adobe apps such as Flash. A little irritating to me to find that doesn’t work here
-ugh! that purple color when I select a group – is there a way to customize the color prefs? It hurts my eyes…
-I would like the ability to zoom in and out of the mockup. There are no resolution settings, rulers, or guides. So you can imagine that a wireframe done quickly on a 30″ cinema display doesn’t always make for easy viewing on a 15″ MPB screen…or in an Adobe Connect Session, for that matter, where everyone’s got a different screen resolution
-’icon’ assets in Balsamiq can’t be resized by dragging resize handles – they can only be set to one of a few preset sizes (L, M, S, XS…). This really breaks when an icon is in a group – if you resize the group, the icon doesn’t resize with it.

Finally, I found this review of Balsamiq was also helpful. Coincidentally I reviewed iPlotz a while back here