Yesterday I came across a post over at Inside RIA (probably the best place to keep up on RIA ) about a handy new mockup Tool called Balsamiq Mockups.  In the past, I’ve used a lot of Viso and PowerPoint with various templates for doing mockups, so I’m always interested in tools that help me with quick and dirty screen design to communicate concepts.  I’m even more interested in tools that are built in cross-platform tool kits that can perform this.

This post isn’t only about about screen mockup software (though a brief review with follow), it’s about the power of Adobe AIR and the Flex platform.  Its been awhile since I’ve seen some exciting AIR work (I know it probably exists), so I thought I’d write some of my thoughts out…

Since AIR hasn’t been around very long, there’s not a very long list of applications that really shine and show it off (Twhirl, FCG, DestroyFlickr are really good ones, though).  Most, though, that I’ve looked at are semi-finished, with minimal polish.  But thats OK, it takes time to build a properly polished desktop application, and I’m sure a lot of the applications were built to play around with the new toolkit.  But none have really held merits on their own as just being must-have applications.  99% of every AIR application I’ve tried has been uninstalled because either they weren’t very polished, only performed a subset of what they’ll do (early betas), or there’s nothing extra that they do that the versions running as Flex applications inside a browser can do, or that even a regular web application can perform.  And I always say, if it can run in the browser, don’t make me install an application to my machine.

I think this is where Balsamiq Mockups really shines.  Its a tool that no matter what it was written in (it happens to be Adobe AIR) that I feel I could finally keep on my desktop, and not just to tinker with because I work with AIR and Flex.  It shows off a rich UI that is well thought-out and very user intuitive.  Flex is being shown off here, too.  The Flex graphics apis are one of my favorite parts of the toolset, and Balsamiq really shows off how nice of a layout engine can be designed (theres other Flex apps, too, that do mind mapping, etc. that I’ve seen, I just don’t have the links handy).  When dragging components onto the canvas, the hinting for aligning with other objects is superb and so simple.   One of my favorite things about Flex and AIR is ability to build modern UIs as Balsamiq Mockups demonstrates. 

Nevermind that they already have an upgrade path to Linux for when the AIR runtime is released.   AIR has the potential to huge for Linux desktop application development.

Things that make Balsamiq Mockups a great little application:

1)  The layout engine and ability to aline things simply

2)  The little iconwidget that lets you explore their library for little icons

3)  Super simple to use

Here’s a little mockup I made of Eclipse with Flex Builder in debug mode:

Its nothing fancy, but it did only take me about 15 minutes to put together, and that’s including the time needed to explore all the available mockup compoents, different properties they support, etc….Notice how easy things more the most part align.  It was really quite easy.

Some features I’d like to see implemented:

1)  A library of other screen elements that you can browse online and import into the application.  Maybe even have an API so third-party devs could build these UI components and publish them to this browsable repository.  After all, Adobe AIR is about connected applications.

2)  Ability to adjust the font size of screen elements.  Some of the elements, like the Link Bar allow changing the font sizes), but I’d like to see this extended to some of the other elements, like the Tabs Bar.

3)  A tree mockup component.  UPDATE: Found it in the component finder called “Tree Pane”

4)  A vertical Button Bar.  In fact, just make a Button bar that’s either horizontal or vertical, and make it really easy to add either icon buttons, text, or both!

5)  A mockup Grid component.   UPDATE: Found the DataGrid, had to type it in the component finder in the top (I didn’t see it in the component bar)

6) an online Flex version with saving PNG files locally via proxying through the server.  (Hey, what can I say, I’m a bit adverse to installing software, when a simple software link could do the trick.)  I understand though, the perceptions of paying money for software and having a nice desktop download, and not having to wait for all the graphical assets to load, though…just thinking outloud.

That’s about it as far as what I have to say about this usefully simply screen mockup tool.  Though the tool costs money, it’s actually useful and pretty polished, so its probably worth the $80 or so.

About cross-platform development in general:

In the past I’ve looked at a lot of cross-platform toolkits, like QT, wxWindows (and wxPython bindings for wxWindows), and java toolkits such as Swing and QT’s Jambi.  I think AIR has the potential to really help in cross-platform application development, because I have some issues with all the prior one’s mentioned (I’ll write about that later).  My only hope is that Adobe releases other security settings so that you can run AIR applications as full local applications with full access to the operating system and other applications (this is AIR’s biggest downfall at the moment).  This is needed to get the hardcore desktop developers interested in building software that integrates with other services (Yeah, I know about the Merapi project, but if I’m going to have to maintain and ship the java JRE with my AIR application, I’d seriously have to consider not using AIR and instead settle for QT’s Jambi…actually I’d probably still prefer the AIR and Flex toolkit and deal with shipping the java runtimes…).

Anyway, keep up the good work building these tools and these applications.  Get enough kickin’ applications written in AIR, then it wont matter what operating system the user wants to use they’ll be able to use your application.