Convert Mockups to HTML+Image Maps Prototypes
Hi there. We at Balsamiq are terribly excited about the wonderful community-contributed tools and Mockups extensions that are being developed these days. To introduce the latest one we have asked its main developer, Vitorio Miliano, to write a short post for this blog - our first ever guest post! 🙂
Hi, I'm Vitorio Miliano, and I'm guest blogging here on the Balsamiq Blog to show you a little script I worked up that lets you turn Balsamiq Mockups wireframes into clickable HTML image maps.
I'm a Senior User Experience Consultant for a company called Optaros, and annotated wireframes are a significant deliverable of our design process. We've previously used OmniGraffle, Photoshop or straight HTML for these, but some teams have been using Balsamiq Mockups on projects since the beginning of the year, and it's been working out really well.
It was working well enough that I wanted to be able to do more of the things we can do with HTML wireframes:
- I wanted to be able to use the mockups for user testing. (The first time I wanted to do this, presentation mode didn't have the option to turn off the big cursor and hints yet.)
- I wanted to be able to distribute the mockups in a clickable series.
- I wanted to be able to demonstrate complicated interactions, like hover changes and preserving state across multiple wireframes.
Right now, that's about all it gives you, but I'm using it here at Optaros and will be continuing to update it. Questions are already coming up. Should I be generating binaries instead of requiring Python? Should it automatically hook up the links you've already defined in the wireframe? What's the right way to handle grouped or locked items?
We just finished a rich prototype in HTML for a film studio, and I'll be replicating that in Balsamiq as a test case for more complicated effects, but I'm just one person in one design group. I'd really like to know what you think. I'd love to hear about how you're using Balsamiq, and what you've wished you could do with the wireframe once it's built, ways you've wanted to show them off, interactions you've wanted to demonstrate. Send me your BMML files and we'll talk about it. Bug reports and patches are helpful, too (the script is open source, MIT licensed), and there's a TODO.txt included, in case you want to poke at the code.
I hope you find this useful. My email address is vito underscore bmml at perilith dot com, and I look forward to hearing from you!
Thank you Vitorio for providing this extension! We think it will be useful to lots of Mockups users and that some of them will want to contribute to it!