Nov
05
2009

Balsamiq Mockups Review

by Naomi Niles

A few weeks ago... Er, more than a few weeks ago, I posted a blog post on why designers should use wireframes. I have always used Photoshop to do more formal wireframes for client sites, but wanted to give Balsamiq a try since I first heard about it. They were gracious enough to give me a copy to review. By the way, they are incredibly friendly and fast responding.

I was waiting to write this review until I could use it on an actual client site. But since, we are currently working on our own site redesign and I wanted to try it out on that, I decided to use it for our own home page and give you my initial impressions.

First of all, I really like how simple it looks when you first open it up. It’s very easy to see which tools are at the top in the toolbar with the visual icons and the names underneath.  One of the first things I did was change the setting to use system fonts. I can’t stand Comic Sans. I’m also not sure about the overall informal sketchy look, but we’ll get to that later.

I started off making a browser window. I have to admit that the biggest issue I had here is not being able to measure it exactly so I was kind of lost on how big to make it. They have an indicator of size, but the graph lines seem to be unrelated to that. It’d be that way if I drew it on paper, but for some reason I feel the need to have things neat and exact on the computer. This is obviously something I’ll just need to get over.

Getting the top menu in was no problem. I couldn’t figure out how to do a representation of the logo though. What do you use for that? A button, a container, or just text? I ended up just putting text although it doesn’t feel right.

I really like how everything snaps into place without having to put guides up everywhere. Adobe could take a hint from that feature for Photoshop.

Anyway, this is my first initial wireframe using Balsamiq. This took me about half an hour to do and I didn’t have any trouble implementing the rest of the features.

home

Likes:

  1. Ease of use.
  2. Simplicity of the program overall and in the main view. Not too many options or features to overwhelm you at first.
  3. The snap to grid feature and align with other elements feature.
  4. All the choices for icons.  I will have to resist the urge to use the cute smiley faces everywhere.
  5. The cute smiley faces!

Dislikes:

  1. The little overview edit box kept getting in my way when I was adding and editing elements near the bottom left.
  2. I couldn’t resize the playback control button. I think that has something to do with just that button though. Maybe I used the wrong one for this purpose.
  3. It’d be cool if you could just delete an element by clicking on it and hitting the backspace key rather than having to hover over the edit box and then click on the cut tool. This is not major, just habit for me.
  4. I’m not sure about the hand-sketched styling. I understand why Balsamiq made it this way, but I think I will still feel weird presenting it to the client. I guess I will have to wait and see what reaction I get from clients when the time comes.
  5. Although it was my first time using it, I felt it took me quite a bit longer than it would have than just sketching on paper. That said, it might have saved time from sketching on paper and then again in Photoshop.

Overall, I think this is a great product. I will definitely be using it again in the future although I think I will save it for more complex layouts so that I can make more use of the different icons and buttons. I also think it will save me time on more complex layouts, but on the simple ones I may get by with my old way of using graph paper and Photoshop.

For more info about Balsamiq, check out their website.

Comments

Paul
02/27/2010

I have used iPlotz and it was pretty intuitive.
Only critisim was that I wish they had more button graphics to chose
from but being a wireframe I suppose that shouldnt be a real criteria.

Good article here that lists a few other products.

http://www.tokyowebdesigns.com/advice/1487/wireframing-your-site-what-why-and-how/

Join the Discussion