Napkee: Create Prototypes from Balsamiq Mockups

Napkee is a very exciting tool that extends the quick and easy wireframing process in Balsamiq Mockups by importing your Balsamiq files and generating interactive prototypes in Flex or HTML version.

To start off, you build your series of wireframes in Mockups, optionally creating links between pages. The screenshot below shows a wireframe of a fictional news site I created to try it out. I mocked up a site home page, and a login screen for my test.

Mockups lets you do all presentation you need with static images, and links between pages, but what's been lacking so far is the ability to demonstrate interactivity. The magic of Napkee happens after you import the mockups. The interface below shows the my 2 mockups in Napkee. The selected mockup displays tabs for viewing the BMML (Balsamiq's markup language), HTML, CSS, and JS source. If you're going to export to Flex, you'll see MXML and Action Script source.

The final step is to export the project to HTML or Flex. For the HTML version, Napkee creates all the markup and a stylesheet that lays out the elements with absolute positioning. It also generates the Javascript (jQuery) for any components you might have added that require animation or state changes, e.g. tabs and accordions. You'll have an html page that loads in your browser, with links, operational components such as accordions and tabs, and form fields that you can type into.

I haven't learned all of the rules for binding elements together, e.g. my radios aren't grouped, and my links appear to be broken at the moment. But you can play with the form fields and UI components in the 2 exported pages below.

This is a pretty cool tool for anyone that's been using Balsamiq, or has been considering using it, but have also wanted to more effectively demonstrate interactivity in their wireframes. I'll have to play with it a bit more to really understand how to make it work for me, but I think it'll definitely become a regular tool for a lot of web designers.

Napkee sells for $79 per user. As with Balsamiq, there are also gratis licenses for nonprofits. Check it out.