vi·to

Turn Balsamiq Mockups wireframes into clickable HTML imagemaps

Discontinued in favor of built-in clickable PDF support

How to export a clickable PDF from Balsamiq Mockups

Per the Balsamiq Mockups FAQ:

To create an interactive PDF, all you have to do is open all the mockups you’d like to package together, link them up if you want and "Export All to PDF…" from the File menu. A single PDF file will be created, with a mockup on each page and even interlinked pages!

You can put the mockups in the order you’d like them to appear in the PDF by dragging the tabs at the bottom of the screen.

About the tool

Balsamiq Mockups is software for creating rough, low-fidelity wireframes with a hand-drawn, yet consistent look. I’m a big fan of the “drawn” look for wireframes, as I think it goes a long way towards ensuring the client understands what they’re seeing is unfinished: it keeps the focus on the interaction rather than the visual appeal.

At a previous employer, we often needed to create interactive prototypes to allow the client to walk through the site or software we were proposing, or test an interaction. Sometimes these were clickable wireframes, sometimes these were more fully-realized mockups that need to preserve state through various interactions. We usually built these out in HTML and JavaScript, but this increased the fidelity of the wireframe, which risked the client misinterpreting what they were seeing. I felt it would be useful to be able to produce an interactive prototype from Balsamiq wireframes, keeping the unreal look and feel but still getting the interaction testing that is so valuable.

This tool generated HTML, images and image maps, as well as a JavaScript framework for complex prototyping, but has since been discontinued in favor of the built-in support Balsamiq Mockups has for exporting a clickable PDF. There were open issues with Unicode and changes in the BMML format, but the PDF export supported 80% of users’ use cases, and the most advanced prototyping cases needed so much custom JavaScript that extending the tool only added complexity.