Prototyping user interfaces is something that needs to be done for all new applications. However, there are many ways to go about it. Sketching on a napkin, using a whiteboard, wireframes using software, etc. Recently I found a tool called Mockups which is great for prototyping.
Shortly after beginning to use Mockups I heard of another tool, Napkee (gotta love Twitter). Their website provides the following description,
Napkee lets you to export Balsamiq Mockups to HTML/CSS/JS and Adobe Flex 3 at a click of a button.
The idea and screencast were intriguing enough that I thought I’d give it a whirl. Much like Mockups, Napkee is super simple to install since it’s an Adobe AIR application. It also means it will run on Windows, Mac OS X and Linux. The suggested workflow is to have Mockups and Napkee running side by side which is what I did. I started out by creating a simple interface using Mockups. Once I saved the Mockups file, I went to Napkee to load it. Napkee provides the ability to preview the mockup using HTML/JS/CSS or Flex 3. I’ve been working with Flex for a little over a year so I tend to use that “nature” (which is the Napkee term for the type of output/view). I started by creating a mock Flickr image viewer. I then imported the Balsamiq Mockups file into Napkee.
So far things looked good. Next I loaded an image into the image view (i.e. cover flow) inside Mockups, this simulates a user searching for “mustang”. I saved the Mockup and immediately Napkee noticed the change and updated itself as well.
That was super cool to see, there was no need to re-load the file or click some sort of “refresh” button, it just worked. The other thing that was interesting is that all of the Mockups UI controls are supported in Napkee, whether using the “Web” or “Flex” natures. Once you’re happy with what you’ve gotten so far you can use the “Export Project” feature. This allows you to generate a complete Flex Builder 3 project that you can import right into Flex Builder. Napkee can also generate the HTML/JS/CSS files when you are in the “Web” nature. The super cool part is once you’ve exported the project you can tweak the actual source code to move the prototype a bit closer to reality. This feature can be a huge time saver and really helps for demoing your ideas to management or potential users.
Beyond the tool the company follows a very organic, small business approach to everything they do. The folks at Napkee follow similar philosophies and ideas as Balsamiq, the company behind Mockups. For example, Napkee releases often, has great customer service and support. Napkee also supports do-gooders, go-gooders, writers, teachers and students by providing free licenses and discounts.
You can find an interview with the founder/creator/coder of Napkee, Enrico Berti, in my next post.