Tuesday, July 20, 2010


July 20, 2010 Posted by Jason Irwin , 3 comments

Recently I blogged about my experience with a neat wire-framing tool, Balsamiq Mockups. To recap, I loved (and continue to love) the tool with the exception of one design decision - intentionally keeping the tool rough and low-fidelity. Shortly after publishing the post I received a comment asking if I had tried Napkee for HTML wireframe conversion…Following the Anonymous poster’s lead, I managed to procure a review copy of Napkee and am happy that I did. To answer the obvious question: no, Napkee isn’t exactly what I was looking for. But its not far off!!

Balsamiq/Napkee Affiliation

There does not appear to be any official affiliation between the Napkee and Balsamiq teams, however the following 2009 Balsamiq blog post does suggest that Balsamiq are open to building a community around their open bmml standard – starting with Napkee:



Napkee, as its website says, lets you export Balsamiq Mockups to HTML/CSS/JS and Adobe Flex 3. In essence it is a post-processor that takes bmml files and turns them into web or desktop apps. In my post on Balsamiq I “implore[d] the Balsamiq team to introduce a post-processing feature that turns a wireframe mockup into something that actually looks like a real screen”. This is precisely what Napkee has done. While I would like to see a third mode (adding to the existing HTML and Flex support) that generates static image files (PSDs would be nice) rather than interactive content.

As is Napkee has fulfilled my wish to turn Balsamiq mockup files into something more presentable – specifically something that could be presented to a project sponsor or client.

Converting a Mockup

The process of converting an existing mockup to HTML/Flex couldn’t be more straightforward. The UI is extremely simple with very little required interaction. Importing a bmml file is a two step process (File->Import Balsamiq Mockup Files) at which point the file is processed and converted to the project nature of choice (see the big WEB and FLEX 3 buttons on the top right hand side?).

I created a new Napkee project named Mockups for Blogpost and added the same datagrid used in my Balsamiq post. The below screenshots show how Napkee converts these controls to HTML and Flex respectively.



The Preview pane is fully interactive so if there is a control on the page (for instance, the Flex datagrid is sortable and has a scrollbar) one can immediately test how these controls react to user input. You’ll notice that there are multiple tabs beside the preview tab -  HTML/CSS/JS/BMML for web mode and MXML/AS/BMML for flex mode. These are (sadly) read only views where you can see the markup (and existing bmml) for your mockup. While it is probably outside of the scope of the application, it would be great if these tabs acted as editors for the relevant source files, allowing HTML/CSS/etc. to be tweaked within the application and saved as part of the project.

While it seems like a trivial point, I love that markup is broken out into separate files. It may stand to reason, but I can’t count the number of code generation tools I’ve seen that package up all source code into a single unholy mess of a markup file. Kudos to Napkee for being developer friendly here.

Exporting a project is as simple as clicking the novelty-sized Export Project button in the mockup files menu on the bottom-left of the screen, resulting in a well structured folder containing the newly generated source files.

One feature that I’m a little disappointed by is the ability to provide additional CSS files to the project. Ideally this would give the user the ability to customize the output HTML with their own CSS styles. It works…to a point. The problem, in so far as I see it, is that there is no obvious way to remove the existing CSS styles – i.e. you cannot tell Napkee to provide only raw HTML. When I added my own CSS styles some were overridden by Napkee’s styles leaving me with an ugly matrimony of styles. This isn’t a dealbreaker by any means, but I’d love to see it addressed and am guessing it would be a relatively simple change.


More Advanced Mockups

Mockups To Go is still a great source of Balsamiq mockup templates and, to put Napkee through its paces I downloaded two of the larger templates and converted both into Web and Flex pages.


Facebook Fan Page

Original Balsamiq Mockup


Napkee Web


Napkee Flex


Wordpress 3.0 Beta Admin Comment List

Original Balsamiq Mockup


Napkee Web


Napkee Flex


As you can see in the above images I have highlighted in yellow some major discrepancies between the originals and the web/flex counterparts. Most of these are in the form of inconsistent layout and, in the case of the flex conversion, fields whose markup was not converted at all. While this sample size is way too small to definitely point to a problem with Napkee itself, it definitely looks like the bmml processor needs a little work.

That said, there may be cases where the Balsamiq mockup was created outside of recommended practice. Take, for instance, the yellow row in the Wordpress mockup. Rather than a colored row, it looks like a yellow rectangle was placed right on top of the grid to give the illusion that the row is colored. In this and other cases Napkee can only convert what it sees and the tool cannot be blamed for bad implementation. Garbage in garbage out, so to speak…

In Summary

Napkee has no learning curve whatsoever and converts Balsamiq mockups to their prettier and more functional form without requiring any thought or real effort. As complexity of mockups increases Napkee’s results become somewhat of a mixed bag and it appears that the bmml processor could do with some updates to its layout algorithms. However, when it works it works really well and all-in-all I think the tool is a great addition to Balsamiq Mockups. At $49 it is relatively inexpensive and if you charge by the hour will probably pay for itself pretty quickly. I, for one, look forward to seeing how Napkee improves and evolves over time.


Jason said...

This looks quite promising. I've been using Balsamiq Mockups for the last few months, and Napkee would be an excellent complimentary application.

Cristian Pascu said...

This is just a cool review! I'm sure that Enrico, Napkee's creator, will find it very useful!

FlairBuilder also has an Balsamiq Importer, and I've just tried the Wordpress 3.0 file and it seems that there's a usage of the DataGrid that pushes the limits a bit.

The main difficulty with translating Mockups into something clean is that all the mis-alignments that were so natural in the sketchy mode, are now becoming very ugly. This is the after all the beauty of Mockups, you don't have to think too much about the details.

I personally think that if you need more interactivity you also need a cleaner wireframe, as you're investing more time to prototype the real thing. There are nuances here, of course. I think for instance that starting over with a cleaner approach might allow you to incorporate the feedback you got on the first version of the wireframe made with Mockups.

Again, such an extensive and detailed review! Kudos!


Max said...

Another HTML interactive tool you might want to check out is Tiggr – http://gotiggr.com. With Tiggr you can create, share and preview Web and mobile HTML prototypes. The key is that you can create interactive HTML prototypes with navigation which you can view and test in any browser.