Balsamiq Mockups Review

April 23rd, 2010 • 3 comments Articles, Reviews
Tags: gui, wireframing

I was looking for a tool to separate two concerns: How a website looks, and what it does. These two are often mixed up, and that especially hurts large projects.

The Tools

Wireframing tools take away the looks and replace it with hurried sketches. By tools I mean anything from a napkin and thick ball pen, storyboards with post-it notes, to complex pieces of software that require prior training.

The problem with drawing websites on napkins is that you can’t easily simulate what happens when somebody clicks on a button or writes the wrong text. It is possible, but you’ll have to stress your imagination skills, which would take away a tiny, precious part of your brain.

Although nothing is as intuitive as your pen and throw-aways, the added bonus of a nearly functional sketch tips the scale for me towards software. There’s a sense of accomplishment when a project starts to make sense, and all that’s left is to dress it in silk and gold.

I had to choose one of these tools and stick to, and since this is a Balsamiq Mockups review, I’ll brief you quickly on each:

Pencil

This is a nifty Firefox addon. Pencil runs like a separate application. It’s pretty capable, but it seems to be geared towards sketching desktop applications. It’s also lacking on the that side since there’s no snapping, no grid, no easy alignment and distribution. The stencil library is ok, but it barely has more than a few Windows and Linux GUI widgets.

Denim

Denim tries to be your digital napkin. It’s just a large canvas that you’re free to draw anything on. This is great for jotting down a sitemap, a flowchart for interactions, but leaves you wanting when you want to take things a step further.

The cool thing about Denim is that you can create interactions and link multiple pages from a sitemap togther. On the other hand, I’ll need to buy a tablet if I want to make the most out of Denim. My hand drawing is ugly enough, and mouse make my drawings even worse.

MockingBird

This is my second favorite piece of software. It has a nice library of widgets that look half-done, it’s very simple to use and you don’t even need to install it. The best and worst thing about it is that it’s completely online. So there’s no need to download or install anything, but without internet, you’re stuck. You also need to register to save your projects.

Projects are useful, and it’s one of the few things missing in Balsamiq. You can link to widgets to different pages by a simple drag and drop, and once you save a project you can share with a team of collaborators.

Balsamiq Mockups

Often mistakenly called Balsamiq. It’s very similar to MockingBird. But while the latter is built entirely with JavaScript, Mockups is built on Flash, so you can use it both online and from the confines of your desktop

Like MockingBird, Balsamiq Mockups has a large library of widgets, but unlike MockingBird you can extend it, either with your own, or from Mockups To Go. Balsamiq can also import and export your designs to PNG, PDF and copy it to clipboard.

Disclosure

I chose Balsamiq Mockups. Not only because I could write a keygen for it in 10 minutes, but precisely because I didn’t need to. Balsamiq sent me a free license, one that even they can’t revoke. I felt so special, until I found out that Balsamiq give away free licenses left and right. Non-profits, bloggers and reviewers, all can get a license.

Their philosophy is: If don’t want to buy the software, you never will. You’ll pirate it, hide it from friends and family and live years of shame, but you wouldn’t spend a dime. On the other hand, if you really like the product, the company or the team behind either, you’ll probably shell out this money with a smile, even if the product is free in the first place.

Balsamiq make you like them, even if that costs them $49 in Mockups revenue.

The Greeting

Balsamiq Mockups is pretty simple. You get a white canvas with a grid, and a tabbed bar filled with icons. If you know how to drag and drop, you already are a Mockups expert.

Mockups doesn’t bother you with constant nagging about registration. It’s mostly free. You only need to register when you want to link multiple mockups, or when you want to save your work in Mockups’ native format. You can still export and import your work in the unregistered version, but that’s a hassle.

The Goodies

Most wireframing tools have a separate pane to edit widgets’ properties. Like changing the text on a button, or the colors of your widget borders. Balsamiq saves precious workspace and uses a tiny floating window that only shows when you move your mouse over a widget.

The library is extensive, and it hits that spot of looking rough, but not ugly. The collection includes almost everything under the sun: Big pie charts, navigation menus, buttons, lists, checkboxes, date and color pickers, scroll bars, tabbed windows, even iPhone controls. In addition to that, you get mark up widgets for your designs, like sticky notes, arrows and a picture to scratch out unwanted elements (I’ve used this to scratch out the EQ from the iPhone draft below).

Editing widgets is a breeze. Mockups uses plain text for most widgets to modify what they display. See for example how the iPhone menu below is generated. I didn’t have to select each menu item, go to a properties window and select how I want it to look like or what’s written in it. All I did was edit the text.

Mockups can link multiple pages together. This is an advantage over napkin drawings. You can create a fully interactive, nearly functional design to demonstrate, and get a feel of how the final project will act. Remember, Mockups are all about action and preliminary layout. At this stage, how your project looks, styling and colors are irrelevant. Most elements can be linked to other pages, as long as all pages (Mockups files) are in the same folder.

The fun begins when you’re done editing, laying out and linking pages together. That’s when you get to show off your skills and crazy ideas. Mockups’ full screen mode has a huge blue mouse cursor that’s impossible to miss, and there’s a button to hide your little comments and sticky notes.

The Badies

Let’s start off with the obvious one. Mockups is built with Flash, and Flash sucks. I know that I’m going to raise an entire crowd of “Flashists” against me, but there are only so many things you exclusively need Flash for, and applications isn’t one of them. I could partially justify it if Mockups was an online-only service and it was impossible to implement otherwise, but MockingBird proves that assumption wrong.

As for the desktop version, Flash is even a worse excuse. Nothing beats native applications, no matter how close you come. I don’t care how you build, what tools you use, but it has to look and act like everything else on my desktop. I expect the same shortcuts, the same behavior, the same dialogs and the same extensibility, especially on a Mac.

Another caveat is that Mockups’ thinks a project shouldn’t be more than a folder with a few mockup files in it. Mockups lets you create links only if the mockup files are in the same folder, and it turns a blind eye to files within subfolders. This it too simplistic an approach for large projects where things get hairy and organization is vital.

Speaking of links. I like MockingBird’s approach better than Balsamiq Mockups. Mockups makes me click on a widget, go to float properties window, then select a page from a drop down menu. It’ll be great if I could drag a page and drop it on the element to link them together. I don’t want to spend time hunting for anything in dropdown menu.

These are the biggies. The rest of the little bugs are easier to forgive. Like the useless grid that you can’t snap to. Mockups remedies that by snapping to existing objects, so you can center things and align them together. But the grid is ticking me off. If it’s there, I should be able to snap and resize my objects to it.

Keyboard navigation is only 80% where it should be. Since I’m not drawing anything, I want to be able to move through objects using a keyboard. Or navigate the widgets library. I want to use my Tab button to switch between selected elements. I add and place my widgets without having to resort to a mouse.

Conclusion

In a nutshell: Buy Balsamiq Mockups (or review it on your blog). It does exactly what you would need, and nothing more. This “nothing more” is what sold me on Mockups.