Wireframing for Mobile with Balsamiq

There are many wireframing tools out there. I’ve been working with Balsamiq Mockups for a few years now and it became my favorite tool for the job. The software is easy to learn, incredibly fast and offers just the right amount of functionality for developing wireframes and low-fi prototypes. Balsamiq’s sketch-style controls help you to focus on content and interaction rather than getting lost in the details. In this blog post I’ll share some of my best-practices when wireframing for mobile with Balsamiq.

Update (December 2013): Balsamiq put a link to this tutorial on their website. Thanks!

Additional Interface Libraries

By default, Balsamiq only offers iOS interface elements. Luckily there’s Mockups To Go – a community-contributed site for interface libraries and templates that can be used as symbols in Balsamiq. From this site you can download controls for Android, WindowsPhone7, Blackberry, Nokia and others as well as various device mockups. Import the bmml-File into the “Assets” folder of your Balsamiq project and you’re good to go. Of course you can also use symbols in Balsamiq to build your own library. For more info on how to work with symbols check out this tutorial: http://support.balsamiq.com/customer/portal/articles/110439

Hide Device Frame for Viewing on a real Device

I usually design mobile apps within a device frame. It helps me to get the dimensions right and keep the context of use in mind. Plus, if I use the wireframes for presentations, they help customers and non-designers to better understand the design. However, when you export the Balsamiq wireframes including the device frames, they’re practically unusable for viewing and testing on a real mobile device. Keeping two files – one with the device frame and one without – is very cumbersome. Balsamiqs markup functionality offers a solution to this problem. Elements like comments, callouts etc. are declared as “markup” by default and can be shown or hidden via the “Show/Hide Markup” button in the upper right corner. In addition, you can define any other element as markup such as a device frame. Just right-click on the element and select “Treat As Markup”. If you then hide all markup and export your wireframes, only the UI of the app itself is exported and can be viewed and tested on a mobile device.

User Testing via LinkViewer App

In Balsamiq you can easily produce a click-dummy by linking your wireframes together. These low-fi prototypes can be exported as interactive PDFs and used for testing purposes on desktop PCs and mobile devices. For iOS there’s a simple app called Link Viewer which is essentially a chromeless PDF viewer. It let’s you click through your prototype without any distractions such as menus, statusbars or other PDF-related features. This makes it especially usefull for usability testing.