Developer Toolbox - Mockups w/ Balsamiq

Bookmark and Share

Balsamiq is a really cool application that allows you to easily mock up page layouts.

Mockups feels like you are drawing, but it’s digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting.

What’s neat about Balsamiq is that’s it’s built on AIR.  So installation is just a simple click, and you are up and running, and it’s cross platform.

I like the pencil sketch elements which hopefully will keep people for focusing in on colors and other design elements during initial layouts.  The sample screenshots give you an idea of what can be created.  You can export as PNG or as XML so other Balsamiq users can import your sketches.

I only ran into a few glitches - some of the elements seem to be transparent while others are not so you run into some weird overlap issues.  It would be nice to have a control to flip the transparent state on/off.  Another useful addition would be the ability  to create your own ‘libraries’ of elements to use.

Sample Balsamiq Mockup

Sample Balsamiq Mockup

Balsamiq is not freeware - he’s asking $79 with a few options to get it for free.  Considering the amount of time you would have to spend in Photoshop to do the same thing - I think it’s a bargain if you do a lot of these types of mockups.