Prototyping Apps

Right after the initial conceptual and design stages of app development, prototyping is usually necessary to turn these concepts into a visual reality. I’ve compiled some prototyping guidelines that I’ve found useful from my experience.

What is Prototyping?

Pencil with a Plan...
Creative Commons License photo credit: hoshi7

Prototyping is simply a way to visualize a concept without actually having a finished product. Movie studios do this via storyboards, artists with sketches, and so on.

We can do the same thing with an app, but we can make it more interactive since we have these fancy computer devices to help us along the way.

Do I Need To Make a Prototype?

There is nothing forcing you into creating a prototype but if anything it will help you see things you didn’t think about during the conceptual stage.

In some ways there is no avoiding the prototype because you still have to create something from nothing eventually. If you start developing without an official prototype, the early stages of the app will essentially become the prototype.

If what is being developed doesn’t turn out right, you might have wasted that time doing something that an eraser and a new sheet of paper could have easily fixed.

How To Make One

There are many ways to make a prototype and none are better than the other. Use what works best for you and the people you’re working with. Below are a few methods I’ve personally use and have worked great.

Pen and Paper

Regardless of what tool I use, I always like to start with the good ol’ pen and paper. I try to focus on the main part of the app, ignoring menus and other minutiae that I can work around later.

Once I have a vague idea on the paper, I’ll transfer it to a more useful tool such as…

Blueprint

Blueprint is currently my favorite prototyping tool. Not only does it have the ability to layout iOS controls, but it has a separate viewer app that can be used to have others test out the prototype without them paying for the app.

Prototype for Bookmarker

Bookmarker Implementation


The downside to this app is that it’s iPad only, but for $20 and considering how powerful it is, I’d say it’s well worth it.

Photoshop

The more high-quality image graphics you can use and/or borrow, the better your prototype will look. Some designers build entire prototypes from Photoshop templates to then be used in design documents.

I personally use it for basic graphic creation to then import and use within Blueprint.

Level of Detail

One thing I’ve learned is that there is a balance on how detailed you should get with a prototype. Remember that the whole point of the prototype is to help people visualize a concept.

If you’re spending hours in Blueprint linking pages and fixing spelling errors, you might be overdoing it. Once the concept is there, get as much feedback as possible and edit as much as you need to.

Conclusion

Once your prototype is in place, you’re ready to move on to the development stage. Also remember that even though development has started you’re prototype is not locked in stone.

You’ll eventually reach a point where the app becomes the next version of the prototype and can repeat the process for any new features and/or details.

Your Turn

If you’re a developer or designer, how do you go about prototyping? Are there any great prototyping tools I missed?

If you’re not a developer, do you think you could make a prototype on your own?

Please leave your comments and questions in the section below. Thank you for reading!


Leave a Reply

Follow us!

Twitter RSS Feed
Read previous post:
Cool As Ever Tech
Apps By Night Goes To the Races!

Come one, come all to the Cool As Ever Tech event at the Del Mar Racetrack this Sat. August 13th,...

Close