Paper Prototypes Have Gone Digital

Paper Protptyping has gone Digital

Wireframes and Prototypes

The best practice for dealing with a fresh web app project is to meet with the client, map their business processes and then wireframe the solution. Often this involves an intense conversation discussing all aspects of their business, followed by shadowing their workforce or interviewing the intended users to learn exactly what they need.

After I know what the client needs, I usually start building the UI first. It’s a top down approach that focuses on the end result first rather then worrying about the internals of a project.

The Paper Prototype… On Paper

To do this I create what’s called ‘paper prototypes‘. These are mocked up screenshots of the final application as the user will see it. Up until yesterday I did this the old fashioned way with pen and paper. It was a slow process but incredibly valuable to both me the developer and the client. It set in stone the agreed features and acted as a template for building the real thing.

Traditional Pen and Paper Mockup. Hand Drawn.

Now though, I’ve got something far more powerful. There’s a new software product just launched called Mockups and it’s made by the talented guys at Balsamiq. Using their new kit, paper prototypes have gone digital.

Enter Mockups: The Rapid Prototyping Tool

Mockups is a rapid prototyping application that lets you build UI screens in just a few minutes. The software lets you drag and drop all the typical objects used in modern web applications onto your design. There’s over 60 in the default set. This includes everything from scroll bars and menus to more advanced objects like tag clouds and even Apple’s cover flow.

The best thing about these mockups is that they still look hand drawn, so there’s no risk that your client will mistake it for the finished product. Often, I’ve done up prototypes in Photoshop and when I show them to the client, they get confused when I tell them it’s just a mockup, they actually thought it was real! Mockups prevents this from happening by using slightly squiggly lines. It makes for a more ‘hand drawn’ effect. Here’s an example of what’s possible:

See What\'s Possible with Mockups.

Also, this demo should give you an idea of how important this new tool is going to be for developers. A mockup of iTunes is put together in less then three minutes:

The Mockups software is built on the Adobe AIR platform which makes it natively cross platform. So it’ll work on Windows, Macs and Linux boxes.

How Much Does It Cost?

Another great aspect of the software is its price. Balsamiq have said that they’ll give it away free to developers of open source projects. They’ve also said that if you talk about them at an event, they’ll give you two copies for free, one for you and another to give away at the event. And finally, they’ve said that if you write a convincing blog post about them, they’ll also give you a copy for free! To everyone else it costs just $79.

This software has been coming a long time, and I’m delighted I stumbled onto it. It’ll greatly speed up the prototyping phase of my web app development cycle and allow me to be more creative too.

UPDATE – As a result of writing this post I received a free license for the product. I had a suspicion I might get one, but honestly, I would have written it anyway.

Sorry, comments for this entry are closed at this time.