You have a great idea, but you want to know how much it’s going to cost to get it out there? Save yourself cash and build the first prototype yourself. It only takes a couple hours and you don’t need to be a developer.

Don’t rush in to find a developer when your idea is still made up of only a few sentences in your head…

“I’ve got a great idea for a new dating app”

“Oh yes?”

“It matches people who have the same breed of dog… how much would that cost to build?”

Chances are, if you do manage to get a meeting with an app developer, they’ll need you to be able to explain this in a little more detail.

You don’t have to be a techie person to understand that there’s a lot more to an app and how it works than a couple of sentences — which is really important to able to estimate on the work and provide you with a ball park figure of costs to turn your idea into a working product. Imagine going to a house builder and saying “I’d like to build a 3-storey house, how much will that cost?” There’s no way they can even ball park that without understanding more about your plans — where is it being built? How high are the ceilings? How many bathrooms will it have? What is it going to be made out of? How quickly do you need it?

Fear not — initial planning of an app is not as complicated as planning a house (eek! app developers attack!) — and there are free, quick and easy tools out there to do it. Here at Bad Dinosaur we recommend a process that anyone with a smart phone, a few pieces of paper and a couple hours, can do for free. Here goes… first up you’ll need to…

1. Grab a mobile phone template and print a bunch

If you just Google Image Search for “mobile phone template” or “prototyping template” you’ll find a bunch of images that look something like this:

Go ahead and print about 10 of those pages out so you have around 20–30 templates to work with. Most A4 template pages will have about 3 or more mobile phones on them. Make sure they’re not too small on a printed piece of paper — shouldn’t be more than about 4 on a page so they’re nice and big enough to draw on. If you don’t have a printer: put your mobile phone down on each piece of paper and use it as a stencil to draw your own outline — add a rectangle inside each that is around the same size on each one. Repeat.

2. Grab a sharpie pen

Don’t just use a pencil or normal pen — you want the things you draw on the templates to be large enough that you don’t get too caught up in the minutia of design and detail. If you don’t have a sharpie or similar, just use a normal pen or pencil — stop looking for excuses not to do this! Pencils work in space!

The goal here is to sketch out each of the important pages of your app in broad enough strokes that you can convey the number involved and a basic outline of what is contained on each page. Buttons and navigation are the most important part of this exercise.

3. What’s the first thing you see?

Imagine your app has been fully built and you just tapped the icon on your home screen. Don’t worry about the “splash screen” (this is usually a logo of sorts that just flashes up as the app loads). What’s the first thing you see after that? Draw it on the first template. As I said before, don’t get too caught up in perfection at this stage — it’s supposed to be rough as guts. If you make a mistake, you don’t necessarily have to start fresh, just correct as necessary — this is not a work of art.

Once you’ve drawn your first screen, there will no doubt be actions that you’d like the user to take at this point — in most cases, your first page would be something like a login. Using this as an example page, all you’d probably need for a prototype is to convey that a user logs in, so maybe draw an email address field, password field and big ol’ login button. That’s all you’ll need for now.

4. Landing page or “root page”

When talking about apps, developers will usually call the first page that a user lands on after opening the app (and logging in if necessary) the “root page” or the “landing page”. This is usually the page where a person will start their journey through your app. As examples, the root page of the Facebook app would be your news feed. The root page of Facebook Messenger is a list of your contacts. What is your apps root page? Draw that in the next box you have. Think about whether you have a menu on the app — is there a button for it? Most apps these days have a little box with three horizontal lines in the top left which would open a side menu. If that sounds like something you need, draw it in.

Use other apps as your guide — don’t be afraid to open up your most commonly used apps, or even ones that are similar to your idea, to give you inspiration as to how it should be laid out and what buttons would be necessary on each page.

5. Now for the cool part… digitize!

Grab your phone and install an app called “POP” (Prototyping on Paper) from the Google Play Store (or for iOS). This app is your new best friend. It is the bees knees when it comes to early stage idea app prototyping. In a nutshell, you’re going to use it to take pictures of the drawings you’ve just made, and then be able to highlight areas on each page to be able to link all of them together. Don’t freak out — it’s a lot simpler than it sounds.

Once you’ve got the POP app up and running on your phone, create a new project and then take a photo of the pages you’ve built so far — for this example, we’ll assume you’ve drawn a login page and a root / landing page. You’ll see that POP adds them into your project as you take photos of them. Now go into the login page on the POP app and add a highlight to your login button — then tell it to connect that button to your root / landing page that you just took a photo of.

Voila!

If you now run the app on POP, it will show you the login page first, then when you tap on the login button, it takes you to your root page. How easy was that!?

6. Draw the next few pages of your app

Your root page most probably has a list of items or actions on it that you’ll now need to contemplate. Get back on the paper and start drawing them out. As you draw each new page, go back to the POP app and add it to the project and link it to the necessary buttons / actions on your pages. Things to consider when you’re running through this process of building all the new pages:

• How does the user go back from this page to the last page?
• What are the possible actions a user can take from this page?
• Can they access a menu, if there is one, on this page and how they would do it?
• What information am I gathering on this page and how does the user move to the next page?

Just keep going with this until you’ve built a full workflow for your app — ie. taking actions that eventually take you all the way back to your root / landing page.

As an example, for Instagram, this would be drawing the main photo feed page (the root page), tapping the “+” button, selecting an image, showing a page where the user can adjust filters, then a page showing adding a comment to the image with a “Done” button that posts it and takes you back to your main photo feed (the root page).

When you get to that point, you’ll tell POP to just link back to the first root page you drew — don’t get too caught up in the fact that it’s the same page and doesn’t show any changes you may have made within your app (if that’s the case)… it’s just to show someone else the expected user journey through the app, not be a real life version of it.

7. Pat yourself on the back

Your idea is actually coming to life! Go back through the POP app and play around with the different transitions you can have between the pages — whether they should slide in from the left or right, or maybe the bottom — it’s all up to you. These aren’t too important as this stage, but it can just add that extra flare to your app to make it look and feel like the real thing.

Your POP app can now be shared with a few close friends or potential users, to get some initial feedback on it.

ITERATE!

The key to any app development process is to iterate. Don’t get too attached to ideas and things you’ve built up until now — you need to be okay with scrapping and starting from scratch if need be. That’s what prototyping is all about and that’s why it’s just pen on paper and a few minutes of playing around with POP — it’s no big investment in a developers time just yet. Once you think you’re going down the right path, keep iterating on the design and functionality until you’re 75% happy with it (people are rarely 100% happy with something they design themselves!).

It’s now ready to share with an app developer or someone you believe will be able to build this idea into a fully working product. That’s where Bad Dinosaur usually comes in — we’ll take a look at your POP app and usually be able to tell you within a short time how much it will cost to build and how long it will take (we aim to turn ideas into working, money making products, within 3 weeks or less).

If you can’t be bothered to build an initial POP app version then just come chat to us anyway — we have people who can do this for you in the form of a workshop, which is a great way to explore your idea further and get some industry experts to assist in shaping it.

So what are you waiting for?

Take the next step. Turn that idea you just came up with in the shower into an actual thing you can tap around in, explore, and show to people. You’re now well on your way to quitting that dumb day job and creating something that changes peoples lives!

GO.