Azavea Labs

Where software engineering meets GIS.

Wireframing w/ Balsamiq – 5 Tips

I have been spending a lot of time pulling together new wireframes for HunchLab using Balsamiq over the past couple of weeks. In doing so I have learned a few tricks along the way.

5. Get Additional Controls

Looking for particular interfaces or additional controls, check out Mockups to Go. I was able to find a ribbon toolbar, iPhone interface and a series of pointers that I could bring right into the wireframes.

4. Change to System Fonts

While I understand the goal of the application to make things look sketchy so the reviewers can focus on functionality not on the particulars of the specifics of the UI. But I definitely believe there is a reason why Comic Sans has been identified as the worst font ever (link to Google search for some supporting details).

There are a couple of ways to do this, the first is the most straight-forward. Select ‘View’ from the toolbar at the top and then choose ‘Use System Fonts’.

Another (slightly more complicated method) is to edit the Balsamiq Mockups config file. Here are the detailed instructions from Balsamiq’s website. Going this path gives a little more flexibility to the font used in the design process.

3. Clone Current Mockup & Duplicate Feature

I found these two functions to be great time savers. With the duplicate feature tool, no matter how many features are selected, it is a single-click copy and paste function.

The cloning of mockups lets you easily duplicate the interface and either create the next step in a series of wireframes or rearrange the controls to look at a different configuration.

2. Internal Links to Replicate Interaction

I have been using the links on controls to allow users to interact with the wireframes. Before any code is written users can interact with the UI and give feedback to workflows and interacting with the pages.

By default when working in the ‘Full Screen Presentation’ mode, there is a large exaggerated cursor that was confusing to some of the people I worked with.

In the bottom right-hand corner of the presentation mode, there is tool to set the cursor to be more like a normal user experience when interacting in a browser or desktop environment.
NormalMode SmallPointer

1. Link to APIs for Images

Creating graphics to represent graphs or maps can be a time consuming task. There are a number of API’s out there that can be used to get a good representation of what will be presented in the interface. A few of my personal favorites are:

Google Static Maps API

Sparklines from Joe @ BitWorking

Google Charts API