Canned Nerd

Now with extra sparkles.

balsamiq for wireframes

| 0 comments

Whenever you find yourself drawing the same wireframes over and over again, just to add another dialog to a workflow of to change the state in a sidebar’s badge, you should definitely give balsamiq a try. This small tool specializes in creating wireframes, and that’s where it is extremely good at.

The most often used screen elements are available via a top-toolbar  so you can simply create your screens by dragging them to the place you want. You can change displayed texts, sizes and colors and all the simple stuff you’d expect from a tool like this. But it’s real strength comes to play if you have more than just one screen.

  • Modules: Say you need to display a badge in several places, just the texts are a bit different. Normally you’d go and copy and paste that badge over and over again. And then, after the next discussion, you’d go to all the places and change them piece by piece.
    With balsamiq, you can simply make the badge a module and re-use it in different places. This way you can have several instances of that same badge. Changes can be incorporated on module or on instance level, so you can easily change the displayed text in one place and keep the general text in others. Or, if you want, you can change the module and have the adjusted text in all instances.
  • Linking: Customers never read the pages upon pages of concept papers you write, do they? So in my last project, we decided to not write a concept in the first place. We started by creating wireframes, which we presented to the customers and discussed them in great detail. This way, we came to an intimate understanding of their processes and could adjust the wireframes accordingly.
    To go through the workflows, we used balsamiq’s linking feature which allows you to reference  other pages at almost all screen elements, like a link or a button. In presentation mode, you’d simply click on a link and have the current wireframe replaced with the referenced one. That’s a great way to walk your customers through the wires in a way that represents a.) their expected workflow and b.) the application as it should become.
    Of course, in the end we did write that concept anyway, but it was the first time I’d write it when I already knew all those details that break your neck when you’re halfway through the project before you discover them.
    And yes, sure enough we dropped many of the intermediate wireframes, because once we settled on a workflow, they’re not so necessary anymore. But removing wireframes is simple, because creating them is simple:
  • Cloning: To reflect a workflow closely, you want to have many wireframes with just a small bit changed: there’s an overlay or some previously hidden text is visible. Consequently you just copy that original wireframe and adjust it in these tiny places. It is but a small thing, but the ability to simply click “Clone current wireframe” is a great example of how balsamiq pays attention to the small things that make you life a tad easier: you just get your current wireframe as a new, unsaved wireframe-document. Nice.

Like every other tool, balsamiq doesn’t solve all those problems without creating a few of it’s own…

  • Cruft: Because cloning is so easy, you want to remove some of the leftovers from time to time, so they won’t be given to the customer when you export all the wireframes as a PDF (yes, it can do that).
  • XML: On the one side, it’s nice to have a text based file format, but on the other side, it makes merging harder, when you cooperatively edit the wireframes and create conflicts. Especially since the modules are by default all in one file: if you change the header and you colleague changes a badges, you sure enough have some ugly conflicts to handle. (Yes, you can have multiple module-files, so the chance of a concurrent line change is less, but it is fugly and a bit incosistent for new modules).
  • Adobe Air: Argh, wtf? How could this happen? I know that you always choose the correct tool purely on it’s technical benefits, but please, Adobe Air? Of course, it’s available for Linux as well as for Mac and Windows and even with Gentoo you’d have no problem getting it to run, but still. Do these guys have no modesty? Ah well, so maybe I do have prejudices :)
    The only real bug I’ve encountered in this regard was a strange focus-flickering issue with xmonad: every tenth second or so, the focus would switch between two windows – yes, the keyboard focus, too. I could fix it, though:
    ?import XMonad.Actions.UpdatePointer
    main = xmonad {
    logHook = updatePointer (Relative 0.5 0.5)
    }
  • Not Free: Not a problem for me: if people choose to take money for their software, I’ll either pay for it, if it’s worth it, or I won’t use it. Sure enough, balsamiq is worth it’s money, but I’m not everybody and I know people who prefer to keep their cleanroom Gobuntu without blobs. If you’re just afraid of paying at all: don’t! You’ll pay no more than a mere 80 bucks per seat after having tested the application for seven days without any restriction. And that includes free updates till the end of time. If these seven days aren’t enough for you, it’s just the removal of a subdirectory in $HOME/.appdata to reset the time (I guess on windows it’d be some registry thing), so it’s obvious: these guys are not the bad ones. Support them if you like the software!

One of the most valuable hints for making wireframes is generally to use the fattest pen you can find, because you don’t do designs right now. balsamiq sticks to this rule as all lines have a handdrawn style (all wobbly and not straight at all) and texts are generally bold. And finally, this is the first use of Comic Sans I’ve seen  that’s completely correct: since no one in their right mind would ever, ever use this font on a professional website, application, poster or magazine, the use of it in balsamiq makes abundantly clear that this is not design. Nice pun.