Tools of the Trade: Balsamiq Mockups
June 9, 2009 // design stuff // 2 Comments

I recently had a chance to try out Balsamiq Mockups; an easy to use mockup/prototyping tool for Web sites and software developers. Balsamiq allows users to quickly and easily create mockups of screenshots and applications using a simple user interface. I think this is a great tool for those inexperienced and experienced to mock-up new projects (i.e. Web sites, iPhone apps, software apps, etc.).
To put the product to the test, I tried creating a home page for a new Web site. The great thing about Balsamiq is that I didn’t have to worry about colors (though it does do colors) or being exact — I can just throw pre-fabbed elements on the page, drag and resize, and be done! Overall, I found almost everything I would want to put on a Web site in the elements pool. It’s really great that they came pre-made with random text (like the tag cloud in the screenshot). I put a video player in the middle, a little audio player below that, and an aggregrate of Twitter posts. On the right I put a tag cloud, calendar, and some icon/links for contacting me (email, phone, etc). I left the left side open for some text, maybe blog posts or announcements.
I’d really recommend this product for someone who’s looking to do mockups and not have to worry about the detailed design of the product. Balsamiq is great for a quick and dirty shot at what you want a page or application to look like (including iPhone apps – they have various iPhone elements to use). At the end of the process, you could easily take a Balsamiq mockup (exported easily as a png) to a graphic designer to have them build a PSD with colors and graphics or take a copy the Balsamiq mockup to a developer to begin to build out the features required for the page. Check out their other examples of how to use Balsamiq.
One area I think Balsamiq can use some more work on is to continue to diversify their element pool. Once and a while I was looking for a certain icon or element and couldn’t find what I wanted (e.g. YouTube or TV logo.) To Balsamiq’s defense, they do offer Mockups To Go, a place where users can upload new elements and UI designs for people to use. Some are just groupings of new elements while others are full mockups ready to download and adjust as needed.
Balsamiq Mockups provide a great launching point for designing and developing Web sites and applications. Balsamiq runs on Adobe AIR and you can try it out online for free. You can purchase a copy for $79, but Balsamiq offers MANY free licenses. (Full disclosure: I received a copy in exchange for a review). Try it out and post in the comments your thoughts.
Jesse said...
Very cool. I may have to use this in my Systems Analysis and design classes. Have you tried the Pencil plugin for Firefox (www.evolus.vn/pencil/) or Creately.com? Both are fee drawing tools that are great for UI mock-ups.
January 20th, 2010
matthewvb said...
The people over at Balsamiq are very good about giving away educational licenses – I’m sure they’d hook up your class. I haven’t tried the Pencil plug-in, but am downloading it now. Thanks for the tip!
January 20th, 2010