In our search for other people in the industry working on wireframing and prototyping software, we looked around on Twitter for lists of prototyping apps. To our dismay, we didn’t really find many that had more than a few people and companies listed. So we decided to create our own.
Balsamiq’s Peldi already created a great list of wireframing tools, so we decided to focus on prototyping since we believe there’s a significant difference between the two, and we came up with a list which we’ve added to our Twitter account. You can follow it here.
5 interesting wireframing & prototyping apps
Meanwhile, we decided to highlight five of the most interesting apps we found while doing research for the list. Here they are, in random order:
Naview: navigation prototyping
Naview “helps you create easier navigations through prototyping and testing”. Who said focusing on a specific use case was a bad thing? Naview shamelessly but excellently offers web-based software with which you focus entirely on figuring out the navigation. As with many other online prototyping apps, the “online” aspect kicks in to give you a couple of benefits like easy sharing and testing. You can import into the tool from text or spreadsheet.
The thing I like about Naview is that it truly represents “design from navigation”, that is, the philosophy that if you figure out your application’s navigational structure first, the rest will follow. It’s good to see someone creating an app to help push the ideology that Hagan Rivers recently discussed in her Escaping Navigation Hell talks (link courtesy of Luke Wroblewski’s blog).
Napkee: export from Balsamiq
Interactive sketching notation by Jakub Linowski
Jakub Linowski is the author of Wireframes Magazine, a blog about wireframing and prototyping (hey, that sounds familiar). He also dabbles in the realm of experimentation a little bit himself, and one of those experiments is the interactive sketching notation. In his own words: “The interactive sketching notation is an emerging visual language which affords the representation of interface states and event-based user actions.” In practice, it’s a little like UML, except lighter weight and developed specifically for wireframes.
Using a combination of lines and small textual notes, you can indicate how a user is expected to flow between different screens in your wireframe. There are some interesting little visual hints you can use as well, such as a dot and a tiny upwards or downwards facing arrow to illustrate that the mouse should be held down or released at any point during an event. The best part of all of this? The entire language itself can be described in one PDF page.
Mocksup is based around the idea that if you could enrich your visual designs (such as mockups in Photoshop) with interactivity, you’d be able to have a conversation around use as well as visuals. In that sense, the examples on Mocksup’s homepage make sense: it talks about band websites, iPhone games and company logos – all visual experiences that require interaction.
The Mocksup web app is a simple affair, but it’s elegant and straightforward, and that’s something to be proud of: the process literally involves you uploading an image, highlighting interactive points on a screen and to what other screen those should link, and placing notes at different places on the image in order to communicate. Check out the example band website to get a feel for how the result should work.
Mocksup is pretty reminiscent of similar tools like ZURB’s Notable and Get Sign Off, although by their own recognition they offer more features for less money. Ballsy.
I discussed Briefs for iPhone more thoroughly in a previous blog post, but felt it was interesting enough to highlight here as well. Briefs is a cool little idea (not out yet, unfortunately) that has you writing a little manifest alongside some screenshots of how an iPhone app should work. Briefs then magically combines those to generate interactivity, allowing you to show off your work through its custom protocol brief://, or via RSS with briefcast://. It’s a little technical, and a little hard to explain, but it’s quite a novel way of getting to the interactive prototype level with nothing more than a text editor and some images.
We’re eager to find out if there are more stunning, original, or otherwise interesting prototyping or wireframing tools out there. Know any? Let us know in the comments!
Leave a reply