Wireframing and code generation
Balsamiq is a very useful tool for quickly wireframing designs. The application is written in Flex and is cross-platform. I’ve been experimenting with it on my Linux netbook, running Ubuntu 10.04. Here’s an example wireframe for a simple data entry screen created with the tool.
Balsamiq has a library of 70+ user interface controls, menus, and the like that can be dragged and dropped into place on the screen. The program comes with a number of tools that make it easy to align items, group them, etc. It actually makes wireframing designs pretty enjoyable. It has a number of features that speed up your work, including a wiki-like language for the user interface components. For example, the “Follow-up required?” check-box is comprised of two elements – a text/string element that is just “Follow-up required?” and a radio button group element that was created by double-clicking on the radio button group icon in the menu of available elements. The element was then dragged into place. Another double-click opens an edit box. In the edit box, you type:
(o) Yes ( ) No
This makes it extremely easy to make changes to user interface elements. The definition for a page is saved in an XML dialect call BMML, or “Balsamiq Mockups Markup Language.” The great thing about this approach is that the XML is then readable by other tools.
One of the tools that acts on BMML is Napkee, which reads the BMML file and then outputs either HTML/CSS/JS renditions of the page, or Flex3 XML code. I’ve only played with the Napkee output a little bit (and only the HTML, as I don’t do any Flex programming), but it seems like it will be a timesaver on our next projects. Here’s a screenshot of the Napkee-generated HTML version of the above prototype. The fun thing about the HTML version is that stakeholders or meeting participants can play with the checkboxes, drop-downs, etc. to get more of a sense of the way in which the application will eventually appear.
The cost for both products is remarkably reasonable: Balsamiq is $79 per developer, not per computer. This seems to me to be an extraordinary deal – I bounce back and forth between three OS’s and three computers every day. There is a seven day fully-functional trial period as well. The low cost of the product seems to have encouraged a really vibrant user community around the product. One of the best examples of this is the MockupsToGo community at http://mockupstogo.net, which shares additional designs and components for Balsamiq. They are also made available at no cost.
Napkee is similarly priced. It’s $79 (again per user, not per machine), if you want to be able to export to Flex and to HTML. If you only need one or the other, the HTML version is $49 and the Flex version is also $49. Napkee has a 15 day trial period.
So far, I’m impressed with both these tools. It seems like they will complement or perhaps even replace tools I’ve used in the past (like Mockingbird). Do you have any wireframe tools that you like or find yourself using frequently? Take a minute to share in the comments!