Noah Blumenthal's Blog

January 13, 2009

Review: Balsamiq Mockups

Filed under: Uncategorized — noahblu @ 4:11 pm

I’m not a designer, I can barely dress myself.  However, it is sometimes often necessary to create a UI mockup in order to communicate with the client.  We’ve all been there — the client gives you a pretty clear picture of how they want a widget to function and then they are disappointed when you build it to spec.  I think it’s usually that the client doesn’t have a clear vision, but let’s be nice and call it a problem with communication.  Creating UI mockups is a great way to show the client, in clear imagery, how exactly this widget will behave.

People typically do mockups in one of three types of applications — a drawing application (like Photoshop, Gimp, Paint.NET and a ton of others), a diagramming tool like Visio, or a tool specifically for UI design of which there are very few.  My feeling is that Photoship and its ilk are mad overkill for this type of thing and you need to do too much work to get anything worthwhile: how long does it take to create a tab bar in photoshop?  Now add another tab, how long did that take?  Well, you get the point.  Same goes for Visio.

I recently downloaded Balsamiq Mockups (http://www.balsamiq.com/) and have worked with it for a couple weeks.  Before this I was working with a 30 day trial of Mockup Screens (http://www.mockupscreens.com).  Overall I think it’s a Balsamiq is a terrific tool and it’s now my defacto UI mockup app. I have to give a disclaimer that I got a free license and so I have a monetary interest in using Balsamiq over Mockup Screens, but I really am being honest that it’s a sweet toy.

First let me introduce you to UI mockup applications in general, and then I’ll talk about what I like and dislike about Balsamiq vs Mockup Screens which seem to be the only 2 contenders in the inexpensive (less than $100) UI mockup space (both Balsamiq and Mockup Screens sell for $79).  The awesome thing about using either of these programs is that you can just drag and drop items (window, button, textbox, label) right into your design space.  From there you can re-size them and change their text.  Things like tables are handled very well in both programs where you can just type free-form text separated by a tab into it and the text will automatically be laid out as a table — what would this require in Photoshop?

Now onto the differences.  I really like the Balsamiq UI — it seems based on the idea that UI design is really easier done on paper.  The window has all the tools on top and then what looks like a pad of paper upon which you drag the UI elements:

Balsamiq UI

Balsamiq UI

(Image taken from their website)

Mockup screens is more computer-program-ish with a work area in the center, commands on top, UI elements on the left and element properties on the bottom:

275screen3small(Image taken from their website)

I found Balsamiq to be smoother and more natural to work with.  Mockup Screens is a little clunky in the way it organizes your mockups too.

One thing I find a little annoying about Balsamiq though is that it doesn’t have any right-click functionality (yet?).  In order to modify layers (move one back, etc) you have to mouse on over to your floating properties dialog.  That’s more mouse moving than I really want to do — give me right-click please!

Anyway, I would highly recommend either of these programs to any developer or designer.  They both have free trials so you can give them a try and see which one you like the most.  They are inexpensive and can save tons of time interacting with clients.  Now when a client asks me for a quote on a widget, I first send them a mockup before doing anything else.  There is inevitably something missing or not as they expected.

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: