The planning process is absolutely vital when building an app. If you just sit down and start sketching it’s possible to explore multiple options for what your app could do and look like.
There are a tonne of tools out there for making basic prototypes. You can get a very long way with tools like fluidui.com or proto.io. But actually, nothing really beats a pencil and some paper. The key thing is to get the idea out of your head and into a medium where you can play around with it.
A huge part of the development process is Googling, reading, thinking, sketching. Let’s get to it:
We'll start with some rough sketching. We're going to use the Google Docs draw app, with a template of app wireframes.
If we want to ask users a series of questions, there are multiple ways we could present them:
1. As a list:
2. One by one:
For our purposes, let’s display the questions one by one. It’s simpler and more focused.
It would be nice to display a running score. Let’s mock that up:
We now know what we need to build and what it’s going to look like. Let’s dive into the HTML