I’ve been working on a new web site for a while now, and finally got to the point where I need to make it look a little better. Figuring out page layouts is far from my strong suit, so I was looking for something to help make it easier.

I’d tried a couple of free applications, and either found them too limited or too complex for my needs. I think that Mockingbird probably came the closest to what I was looking for, but the interface was just a bit clunky. Most of the commercial applications I’d come across were quite pricey, at least for what I was willing to sink into tools for a hobby project. Some chatter about Balsamiq came across on the twitters so I figured I would check it out.

Looking at their product overview I quickly became interested. It had the “rough” look that I liked about Mockingbird, but the interface seemed a bit cleaner. I wasn’t sure if the demo would really do what I wanted, but $79 doesn’t seem like too bad a price to me, especially for something so potentially handy. I also saw a note on their site encouraging bloggers to request a license to use in evaluating the software (for the purpose of reviewing it). I sent an email, and Balsamiq graciously obliged. So here we are.

Lets start out with a screenshot of Mockups in action (I used a one of my favorite posts from onpnt as the basis for the mockup, but may or may not have taken some liberties with its’ content :P):

It doesn’t look nearly as good as tarwn’s finished product, but I think it does a decent enough job conveying the spirit of the page. And it took about ten minutes to put together.

My problem with most of the different tools I’d used was that they were too awkward to use. Most seem to work more like image or document editors, they produce good looking documents but can be very cumbersome to use. I’ve always found that some of my best ideas ended up “documented” using restaurant napkins, backs of receipts, or whatever paper I had laying around at the time (I’ve even used a dollar bill before) and I think there’s a good reason for this. Its’ easy for me to get bogged down in the process of creating something, and too much process seems to get in the way of thinking it through. Writing on whatever is available is fast, and almost mindless, so it allows me to focus on what I’m thinking about. The informal medium seems to also prevent me from wasting any brain cycles trying to get it “just right”.

The Balsamiq Mockups application really brings the best things about scrap paper to my computer screen. It works fast (nearly as fast as pencil / paper) and the sloppy look of it keeps me from getting bogged down in the intricacies of making the layout look perfect too early in the design process. These two features combine to create an environment where there are no inhibitions about tearing what I’ve got down and starting over, something that I find absolutely essential for getting page layouts right. If I was using a tool like Visio and had spent +/- 15 minutes getting a certain section of the page just right, I would be far more reluctant to blow it up and start from scratch.

The application expands on the great features it borrowed from napkins by making it very easy to share your mockups with others. Because it is built on Adobe’s AIR runtime it should run on most platforms (I tested it on Ubuntu Jaunty, Vista and Windows 7, and it ran great on all three). The rough look of the mockups seemed to help people that I showed them to focus on the “big picture” and not get caught up with the little niggling details that people like to focus on – I don’t think the value of this can be overstated. Once the mockup is ready you can also export to a .png image to share with people who don’t have the Mockups application, or to include in presentations / design documents / etc… For inclusion in other documents, you can even export straight to the clipboard, which is very handy. This will make showing the mockups to others much easier – I don’t know about you but its’ normally frowned upon when I pass around a napkin in a meeting. Especially if it has a ketchup stain on it or something!

One of the things that I thought was kind of weak at first was the lack of a rich editor for text areas – I thought if I wanted some plain text and then some bold and then back to plain I would need to create three elements and edit them separately, but it seems there is a markdown-type syntax being used to designate *bold text* and other such things. Its somewhat limited but it should fit the needs for these kind of sketches well.

Another complaint I had was about the different “tab” style controls. It was difficult to tell which was the “active” tab, so I had been including an asterisk to let me know which it was. But I checked Balsamiq’s blog this morning and saw that this had been addressed in their latest weekly release. Its’ always nice to see something fixed before I even get a chance to complain! It’s very encouraging to see a company that focused on customer satisfaction.

I also think the widget library could be expanded, but this is only about ¹⁄₂ a complaint. You can paste images from the clipboard to your mockup, effectively enabling you to create your own widgets. However, it would be very nice if these custom widgets could be made available directly in the application for drag / drop use.

My final complaint is that IT USES COMIC SANS 88|. Just kidding, I actually like Comic Sans (I might be the only person). If you are one of those people with a deep seeded, irrational hatred for Comic Sans you probably ought to steer clear of this app, it might make your blood boil. The only easy option that I saw to get rid of this is under the view menu, there is an option for “Use System Fonts” that does get rid of the Comic Sans, but I don’t really like the look of the system fonts (the sketchy nature of the mockups is a perfect place to use Comic Sans, IMO).

All in all, I would say that if you’ve been waiting for napkin / envelope / dollar bill 2.0, it may have finally arrived. The application is working great for me right now, and from the looks of it the team has been working very hard to make it better. There is also a web app in the works that appears will support real-time collaboration on mockups, which I find very exciting.