Rapid Wireframes, Rapid Prototyping, Rapid Results

How many times have wireframes taken longer than you originally thought? Despite all the careful planning and estimation, things can go wrong and if you don’t have some buffer to play with, you might end up doing a lot of late nights trying to get those wireframes delivered. Enter Balsamiq, a wireframe sketching tool. I remember using the online trial version for some interaction design assignments at university a few years ago and thinking at the time it was clunky to use. After I handed in my assignment, I didn’t even bother to take another look. Fast forward a few years and I decided to give it another go. I was pleasantly surprised by how things had changed.   

Anyone who knows how to use a computer should be able to use Balsamiq straight out of the box with a few minutes of tinkering around. So you don’t need to be a designer or a developer to use it. Business stakeholders can quickly mockup sketches to convey their ideas to the team. We all know that when it comes to wireframing, things take time, especially if you are new to a wireframing tool. I remember the steep learning curve I had to go through to learn Omnigraffle while the client was knocking at the door!  And when I did deliver the wireframes, we spent more time discussing pixels, fonts and colours than the actual concept and interaction.

Balsamiq helps conceptualise design ideas fast without worrying about the pixels and the fonts since they look hand drawn and use the Comic Sans font which simulates hand drawing. This is especially good if you’re like me and prefer drawing on a computer screen than on paper. Balsamiq certainly makes your sketches look cute, especially if you have trouble making sense of your own hand-drawings. Also, you can’t really copy and paste on paper, can you? So when you have several wireframes with shared elements, drawing on Balsamiq can be much faster than on paper as you won’t have to draw the same objects over and over again. Balsamiq also has a large collection of assets in its UI library which you can save time thinking how a calendar control looks like, for example. 

The wireframes drawn on Balsamiq are very high-level prototypes with no unnecessary details to distract your clients in the earlier stages of the UCD process. Having said that, the wireframes can even be used to brief your designers and developers. This is made much easier by the rapid prototyping features of Balsamiq to make the wireframes clickable and interactive. You can add links to elements on the wireframes which helps you demonstrate the user journey easily and even do some pretty comprehensive user testing. There is also a markup layer where you can add comments and notes to explain your wireframes. The layer can easily be toggled on or off. 

Now onto some bits I found annoying or lacking in Balsamiq. It’s not really efficient for low level prototyping with a lot of detail in the wireframes. This is made more difficult by the lack of shared layers. Hence, every wireframe acts as an independent entity with it’s own markup file (.bmml), Balsamiq’s XML file. When you start adding more and more wireframes with a common element, say a navigational menu, and then afterwards you realise that you need to add another item to the menu, you will need to change every wireframe individually. There is no search and replace all feature to make the job easier for you. However, you can do it by opening the .bmml files in Textwrangler, Notepad++ or any other text editor. All you need to do is search for the right tags. Another way to do it is to make the required changes to one wireframe on Balsamiq and copy those changes from the .bmml file to other .bmml files.  Having said that, it can be bit tricky especially if you’re unfamiliar with XML.

Coming from a programming background and being accustomed to a proper IDE (Integrated Development Environment) layout, I’m used to moving windows within an application around to my liking. I prefer having the file window on the left hand side. But in Balsamiq, it’s permanently snapped to the bottom of the window. All you can move is the project assets window to 3 pre-defined positions – top, left or right. When you have a lot of wireframes in your project, it gets more difficult to read the filenames and open the right wireframe. The issue still persists on a widescreen 23 inch monitor with a resolution of 1920×1080 as you can see in the screenshot below (the file window has been highlighted with a red box and a big red arrow):


Another thing I found strange was when you drag your mouse over the elements you want to select and if your cursor goes beyond the canvas boundary at the bottom, then instead of selecting the elements you selected, it selects the elements above it, leading you to utter a swear word. The ability to link elements is great but don’t expect miracles with every kind of project element e.g. a table which cannot be linked. If you really want to add links to a table, you need to add other elements to it which can be linked.

To wrap it up, I’m in love with Balsamiq! It’s made my life a lot easier, saved me a lot of time and made our clients very happy. There is definitely some room for improvement which I can live with until the team at Balsamiq gets them fixed. If you’re not using it already, I highly recommend it, even if you’re not a UX designer. Do you have your own experience with Balsamiq or a similar tool that you would like to share?

1 thought on “Rapid Wireframes, Rapid Prototyping, Rapid Results

  1. Yeah, I didnt want to go into it all on your blog and I'm rather agnostic which tool i use but i do find Iplotz very effective.<div>When I sit down with a client and use the preview feature to step through every page of a proposed website (all copy, links, forms, actual/proposed images) just mocked up in iplotz it really clarifies things before the expensive processes start.</div> <div>Dont know if its the same on Balsamiq but every link can be made clickable so you can mimic user experience very well.</div><div>I'm using it for SEO work quite a lot now so I can outline all proposed changes and new content (I'm a whitehat SEO guy and focus on content) so it really helps explain to the client what needs to be done and the webdev guys love it because there is no confusion about what they are designing/building.</div> <div>Regards</div><div>To James, Kylie and the gang.</div><div>Doug</div>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s