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.

vi.to/bmml

This script is the start of those things. It generates an HTML file from each BMML+PNG you provide, giving you an image map with each object from the wireframe defined in it, along with boilerplate JavaScript (using jQuery) for reacting to the click and hover events for each area on the image. There are two samples on the page: the first shows the default output, using the jQuery "maphilight" plugin to see each area of the wireframe defined in the image map; the second shows changing the image on hover, and responding to a click.

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!

Thanks,
Vitorio Miliano

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!

Get the Inside Scoop

We'll send you just one email a month and share a ton of information that you'll get before everyone else. More info about the newsletter here.

We'll never share your email address or spam you.

Leave a Comment

Your email is never published nor shared.

Comments (12)

  1. Hi now i have a wireframe model now i need original wireframe as the same disgn how can I do please suggest me

    Karthik
    • Hi Karthik and thanks for reaching out!

      It sounds like you’re trying to recreate a wireframe from a model (possibly an image file), right? This would have to be done manually but importing the image file (https://docs.balsamiq.com/desktop/images/) in Balsamiq Mockups may help. It will allow you to have the model at hand for overlaying it if needed.

      Please let us know if you need anything else, we’ll be here to help! support@balsamiq.com

  2. Hi Justin, not that we know at the moment. It seems to be that recreating a wireframe in HTML is both too hard for software to do, and not hard enough for humans.

    Peldi Guilizzoni
  3. are there any tools available that have supported this functionality further? @napkee is broken…

  4. Thanks for the inquiry, @sleeper. It could be that Vitorio stopped supporting this script. His site is here: http://vitor.io/

  5. Just a note to say the links in the article are broken.

    sleeper
  6. Hello, everyone!

    For those just joining us, the latest version of the exporter now has a pre-built Windows executable, and I have a Mac now, so I’ll be building one there shortly. Exporting linked mockups also works as you’d expect it to now, instead of requiring an additional step.

    Thanks for the feedback, allan and Santiago!

    Vitorio

  7. Awesome, awesome, awesome!
    My development process just got changed (and simplified) for good!
    Here’s how:

    Step 1 – Quick Sketch Mockups Using MockUpMagnets (dot com)

    Step 2 – Detailed Mockups Using: Balsamiq (dot com)

    Step 3 – Export to HTML / FLEX / Etc Using: Napkee (dot com)

    Step 4 – Outsource the rest of the development, using: oDesk (dot com)

    Genious!
    Thanks for all you guys do!

    Efraim

  8. Vitorio,
    What about setting up a web service for converting mockups to html image maps?

    Then anyone can use it.

    Great stuff!

    Adam

  9. I like this idea but like it was mentioned, to me its not worth the setup.

    I prefer the built in linking in Balsamiq.

    What I really think would be good is a lightweight balsamiq mockup player that is free and easily installable. That way we dont need and exporter like this.

    Another idea is this app as a hosted service.

    [Peldi: well, there’s good news:

    We’re working on a hosted application which will let you send a link to stakeholders for them to view/comment on your mockups.
    We are not excluding building a viewer ourselves one day (more info here)
    In the meantime, the usability of the script setup process can definitely be improved. Just like Antonio said, he’s waiting for feedback and committed to improving his script, so send him an email!

    ]

    Michael Bourque
  10. Sure it is an awesome idea. I’m glad there are more people enrolling with Balsamiq doing great things with mockups. Like Allan said before, I I would like a Windows-friendly script.

    Good work and keep the hard work. I’m pretty sure in some time everybody will be using it. It’s fantastic.

    Santiago L. Valdarrama
    Owner – Laura Software
    http://www.laurasoftware.com
    Twitter: @svpino

  11. Whoa! Truly awesome work. Unfortunately I won’t be able to test it, as the python requirement is a show stopper for me. An exe-file would be nice, or maybe just a menu item inside mockups “Generate interactive HTML”.

    Kudos are still in order, however :-).

    As for the whole simplicity-discussion goes, I think that the Balsamiq people are still right in trying to keep things as simple and basic as possible. I already think that the UI is a bit slower that I would like it to be at times.

    So going with plugins to allow for additional functionality for those who want it (and for it to be neglectible for those who don’t) seems to be an excellent strategy. Much like me other heroes at FogCreek.

    And finally: now if someone could create something that would make bmml importable into MS Blend… Then I could have the simplicity of Balsamiq Mockups, combined with sketchflow and the feedback tool in Blend… There are numerous ways to do this, from mapping controls in mockups to blend or just exporting images for each element in mockups…

    Thanks!!!!