How to make wireframes for iPhone with rapid prototyping

There are plenty of wire-framing software out there. Among them is the well known Prototypr, FluidUI, UX Pin, Balsamiq, Moqups, Proto.io, Mocking Bot, Mocking bird, Pidoco, Appery, Realizer, Mock Flow, Hot Glue, Mokk.me, and the famous and industry loved Invision. And for the real pros: Photoshop. But there is an easier way to get started: Enter Google Drive Drawing! Below is a link to a complete wireframe for a simple five screen iPhone app that I was able to make for a prospective client in the span of only 30 minutes:

Example Wireframe Set

Screen Shot 2014-10-11 at 3.05.13 PM

Screen Shot 2014-10-11 at 3.22.09 PM

The beauty of Google Drive Drawing is that you can remotely share it with your client and update it in real time for them to see.

As can be in seen in the wireframe set – it is incredibly easy and fast to make these wireframes! Start out by asking your client: “What is the first thing the user will see when they enter this app”? Then simply place down on the screen whatever UI elements the client tells you. As you start drawing buttons and inserting images – the client is impressed and at the same time excited by your ability to quickly and seamlessly take an abstract idea for an app and put it on paper.

It is important to pick the client’s brain about every UI element that you end up drawing. You’ll be asking questions such as:

1. Which screen will this button take the user to?

2. Does this screen need a back button?

3. What happens when the user presses the pin on the map?

4. What will the be the popup message if the bar code scanning fails?

The answers to all these questions must be written clearly and expounded further in the form of annotations  which appear below each wire-screen.

Imagine being able to scope out every small detail of an app within the span of an hour? You and your client are on the same page – the expectations of the project are NOT only evident – but clearly visible – and if there are any design mistakes or loopholes – those can be easily traced and addressed as well. As a designer or developer you now have a solid foundation for giving the client a solid quote for the next phase of the project.

 

One thought on “How to make wireframes for iPhone with rapid prototyping

Leave a Reply