Review: Balsamiq Mockups

How do you design the layout of a website? My favorite way is with Balsamiq Mockups, which I first heard about at Ajaxian. Why Balsamiq?

  • Very short learning curve. Anyone on the team can make changes to the layout or leave notes on it.
  • The mockup looks like a mockup, so no client or team member carries around the assumption that the work is already done.
  • Designs take just a couple of minutes, so no one moans when a change is made.
I’m going to time myself making a mockup of the coverflow iTunes page in Mockups to show you how fast it really is. OK. Launching the program…now! (1:18PM.)
Balsamiq Mockups

Balsamiq Mockups

OK. I’m back. 1:31PM. It took me 13 minutes. My take on iTunes isn’t perfect, but it’s a good start, and the team can talk about whether this is really the way we want this.

I used the desktop version. It’s $80 for one user.

http://www.balsamiq.com/products/mockups/desktop

Nice!

Balsamiq is well thought out. As you drag content around it snaps to likely places to help you line items up with other items. The snaps are not hard, though — you can drop anything anywhere. You can even overlap items.

Also nice is the ability to group and ungroup items. You can drop a window in, fill it with smaller items, then group the window and its objects together and move them around as a group.

You can also duplicate items or groups.

Snags?

Balsamiq works pretty much the way I want it to. There are a couple quirks I noticed as I started working, though.

When I’m working in the extreme right top corner, opening the options menu blocks my view of the object I’m modifying. I got in the habit of dragging things out of the corner before opening the options menu.

I looked for a way to import a jpg or png file so I could get a logo into the mockup. No luck.

I couldn’t figure out how to print a mockup directly. I had to export it as an image and print that image.

On the export to image, I wanted an option to keep the notebook background. I think the fake paper look enhances the idea that this is a mockup, and not the real thing. If you want to keep that look, you have to take a screenshot.

Future

I don’t know what Balsamiq has in mind for the product’s future. What I’d like to see is Mockups rolled into Google Apps. This would be a perfect tool for collaborative app interface design.

I spent a lot of time exporting images and pulling them into a Google Presentation. Google, buy this company!

Advertisements

2 Comments

  1. December 15, 2008 at 1:51 pm

    Hi there, thanks for the review!

    A couple of notes:
    – the floating palette (what you refer to as the “options menu”) is draggable, just move it out of the way and it will stay where you last left it
    – importing images is coming in 1.5, a free upgrade coming out very soon. You can try it here: http://www.balsamiq.com/products/mockups/desktop/next and the feature design discussion is here http://getsatisfaction.com/balsamiq/topics/help_me_design_the_import_image_feature
    – Printing directly from the app is also coming in 1.5
    – No option to keep the notebook during PNG export, you’re right. But taking a screenshot is a great workaround, good idea!
    – Google Apps integration: I’m thinking about it…so much to do, so little time! 🙂

    And for the “Google, buy this company!”, thanks for the thought, but I’m not for sale! 🙂

  2. Lori King said,

    February 6, 2009 at 2:31 am

    I’ve very excited to start using this for my as-yet-undetermined-clients. What a great find! And thanks Peldi for developing it.


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

%d bloggers like this: