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.
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.