Robert sent me a link last week to a new mockup tool called Balsamiq. At first, I didn't really see the point, but after using it for only a few minutes, I was totally sold.
What is it?
Have you ever tried to use Visio to mockup UI? It's a cumbersome process, and no matter what I do, the end result just always looks like a bunch of circles and squares and nothing like what I actually envisioned.
Balsamiq has some ready-made controls that you can easily drop onto your canvas. They look hand drawn, which is absolutely wonderful because then when I show people my mockups, there will be no doubt that they're simply looking at a mockup and not the final version.
Why is it useful?
I was just playing around with Balsamiq for a few minutes and made a quick screen showing a new feature we want to implement. I showed it to Robert, and we found out instantly that I was going about it the wrong way. Imagine if I'd mocked that up in HTML, or in Photoshop? It would have taken me a lot longer, and it would have been harder to modify after my initial mistake. Since I used Balsamiq, i was able to just move the controls around. So it saved me a lot of time and aggravation.
Another Example
We have to implement a way for color blind users to use our web application, so we've been asked to add "Color Schemes" to the User Settings. The user can have an underline or a box around particular fields on the form. The box background color or underline color is affected by changing color schemes.
At first, I thought, the simplest thing to do would be to simply provide a drop-down list of named color schemes with a preview below, so I mocked it up, and it looked like shit. Then I remembered the way Digsby and now the new Windows Live Messenger 9 Beta showed some of the custom UI settings, so I tried to emulate it a bit. (The horizontal rule control in Balsamiq isn't colorable yet, but the author says he's added to his upcoming feature list.)
Also, I just want to note that I've emailed the author twice, and he responded back within a few minutes each time. That's impressive.
Check it out:
