The new Handcraft is here!

5 wireframing & prototyping tools doing something unique or different

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

naviewapp.com

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

napkee.com

You know you’ve got a good product when other people can make a living off building their own product that converts the output of yours into something else! That’s what Napkee does: you export BMML files from Balsamiq Mockups into Napkee, and Napkee converts the whole thing to HTML, CSS and Javascript (or Flex). The benefit? It shortens development time significantly since you don’t have to code the same thing you just mocked up in Mockups. Great thinking by the Napkee team.

Interactive sketching notation by Jakub Linowski

linowski.ca/sketching

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

mocksup.com

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.

Briefs

giveabrief.com

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.

Share yours

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!

9 Comments

Ping RSS

  • RecurseApp.com (my app) launched yesterday. It offers much of what Mocksup does, and although it doesn’t do everything Mocksup does, it allows you to emulate a website viewing experience using flat images. Much simpler than Mockups, Getsignoff, etc.

    by Dustin Hoffman • Jul 27th 2010 • 20:07

  • #ShamefulPlug

    by Dustin Hoffman • Jul 27th 2010 • 21:07

  • That’s alright Dustin, we did ask after all. :)

    by Rahul • Jul 27th 2010 • 21:07

  • Hi Rahul,

    thanks heaps for having a look at Naview! “Naview [lets] you focus entirely on figuring out the navigation” – you really nailed it right there. Even though information architecture is not just about sitemaps a hierarchical site structure is the backbone of the majority of websites.

    The added benefit of this seemingly simplistic focus is putting a spotlight on the labeling and terminology – when users don’t have the actual screen design in front of them all they’ve got to go by are the words in the navigation headings. We have found this really useful in early stage IA work, and as you noted “the rest will follow.”

    It has also been interesting listening to the feature requests so far as several people have asked about expanding Naview into a more featured wireframing tool. I am not overly keen on this direction personally and feel that there are lots of good wireframing tools out there already to help you design actual screens. But perhaps in the future we could export that well-thought-out navigation from Naview and drop it into Balsamiq or Hotgloo or another tool for detailed design … food for thought!

    Cheers, Jussi


    Jussi Pasanen | Volkside | http://www.volkside.com/contact/
    Interaction and Information Design, User Experience and Usability

    by Jussi Pasanen • Jul 28th 2010 • 01:07

  • Hi there,

    You should definitely have a look at Justinmind Prototyper. It lets you simulate complex behaviours without coding. Things like forms, datagrids, AJAX-like interactions … And another good point is that you can export your prototypes to HTML code or even word documents.

    http://www.youtube.com/watch?v=pei8jLTvLQ4

    Dan Moser
    Business Development
    Justinmind

    by Dan Moser • Aug 23rd 2010 • 15:08

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

    by Max • Mar 31st 2011 • 00:03

  • Nice article for sure! Would be cool for you to check out http://blog.echoenduring.com/2011/07/19/wireframing-is-about-more-than-just-visual-layout/ Helps draw some awesome wireframes.

    by RP • Jul 22nd 2011 • 12:07

  • Great tools! I have yet to try the ones above. I’ve been keeping to the tools I already have (Keynote – my favorite ;) and PowerPoint (not a fav but I started with that when I had a PC). I use them with the Keynotopia templates for mocking up my apps.

    by Caroline • Feb 9th 2012 • 03:02

  • psn code genearteur…

    5 wireframing & prototyping tools doing something unique or different « Handcrafted…

    Trackback

    by psn code genearteur • Sep 2nd 2014 • 07:09

  • Leave a reply

    You must be logged in to post a comment.