Napkee

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:

http://balsamiq.com/blog/2009/08/05/napkee-launches/

Overview

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.