How to Prototype an App with Wireframing Tools

You have a great idea for an app. But unlike the millions of other people out there with an app idea, since you are reading this blog, you have actually researched it and found out if there is a market for it.
But now what?
What will your app really look like? How will the screens flow?
If you aren’t using an app template, you will need to start fleshing out your idea.
The first step to getting your app idea out of your head and into a form that someone else can see, is to prototype your app. But what does that really mean?
Do you have to learn to code or hire a programmer right away?
Nope.
It is actually quite easy and inexpensive to make a simple mockup of your app. You can even use paper to create your app prototype.
This post will show you how to prototype an app and get you started on the right foot.

What is Wireframing?

The first step to creating a prototype is to build a wireframe. A wireframe is a simple flowchart of how users will interact with your app and what the screens will roughly look like.
There is no need to be perfect at this stage. In fact, a simple sketch on the back of a cocktail napkin could be used in your wireframe.
Here are a few wireframing tools that you can use to get started. They are pretty similar, but each one has it’s advantages.
Take a few minutes to see which one works best for you…

How to Prototype an App…The Easy Way

Prototyping on Paper (POP)

Instead of messing with complicated user interfaces, POP combines the best of the physical and virtual worlds. Just draw your screens on paper and take a photo.
From there, you can draw zones on your photos for buttons, insert screen transitions and more. You can also collaborate with team members and share it with others, to get their opinion.
[sc name=”Position – 1 – Shortcode” ]

Proto

While POP appeals to people who are more paper-inclined, Proto caters to the opposite end of the spectrum. They want to help you make an app mockup that feels as real as possible.
You can test on the actual device, get feedback from testers and even prototype watch apps. Works for both iOS and Android.

UXPin

UXPin has a very clean interface and has a lot of cool mockups that you can create in minutes, without knowing how to code. For example, the navigation drawer in the screenshot above was created from scratch, in 9 minutes.
This takes your app prototype beyond simple sketches and screen layouts. You can start to see some of the elements of your app, in all their glory.

Protoshare

If a Xcode-type interface is more your thing, then Protoshare might be the tool you are looking for. The platform also allows you to collaborate easily with others and add red pushpins to feedback items.
It is completely web based, so you don’t have to worry about OS compatibility issues with downloadable software. There is also a limited free version that works with Google Drive. 

Manual Tools

If the tools mentioned above aren’t quite your thing, then you might want to start with good ol’ pen and paper. Just go to an art supply store and buy a big sheet of drawing paper. Get some colorful pens, while you are at it.
The fact of the matter is that you use more muscles when you physically draw something, as opposed to creating it on a computer.
This can stimulate more of your brain and increase your creativity. 
We are also big fans of whiteboards, here at Bluecloud. They can make it easy to sketch out high-level concepts and lists.
Large whiteboards are also beneficial because they don’t limit your imagination. You may not notice it, but if you have to confine your ideas to an 8.5″ X 11″ paper, it can limit your thought process.
Once you have your app idea sketched out, you can turn them into digital format or hire someone to do it for you.

Wireframing Tips

When creating your app prototype, remember to keep things as simple as possible. I know what it is like to start a new project and wanting to make it the most bad ass thing on the planet.
That is great…but in reality, you only have so much time in the day. Your goal should be to ship a quality product now, instead of dream of a do-it-all app, five years from now.
Start small and really stop to consider if your first version of your app really needs a feature or if you are biting off more than you can chew. 

Conclusion

So that is how to prototype an app. Pretty easy, right?
Creating your wireframe is a huge step. It makes your app feel much more real and can take your enthusiasm for your app project to the next level.
There are many tools out there, but these are some of the best.
Get started right now. With all of the free and inexpensive tools out there, you have no excuse for waiting.