Wednesday, August 5, 2009

I like Balsamiq Mockups

There are few tools more flexible than a pencil and pad of paper. Great boot time, decent UI. When I'm having to sketch a diagram of any sort, the diagram almost always starts out as a sketch on paper, and then transposed to whatever media it needs to be delivered in. It's a pain to transpose a pencil mockup to something like Visio, but I've done it.

I'm skeptical of things that purport to allow me to toss the pencil/paper step. The demo pitch goes something like "just click, click, drag, presto, you're done." I wish it were that easy.

My boss sent me a link to Balsamiq Mockups (www.balsamiq.com), a UI design and mockup tool. Sure enough, their demo video goes something like "click, click, drag, presto" while they draw a mockup of an existing application that you probably know very well. I rolled my eyes and thought "here we go again," but I played with the online version for a few minutes, and it seemed straightforward enough.

I'm working on a particular project and need to start sketching some ideas for it, and I instinctively reach for my pencil. I decide that to be fair to the product, I should at least try it (without using the pencil/paper), and we have an eval version of Mockups wired into Confluence. So I click the "Add UI Mockup" link on the wiki page, which takes me to the mockup editor. I want a dialog box. So I drag one off the bar on the top, on to my workspace. Now I want a list. How a button here. No that's not right; there that's better. Click, click, drag, presto, and I had something I liked. They even let me export it to PNG if I want (although embedding directly into the Wiki page was much quicker).

I like the Sticky Notes, and all the icons. I like how the properties boxes are handled. I like that it's extensible. I like how easy it is to add data to UI elements like list boxes. In short, I like Balsamiq Mockups.