It’s at this point that I should remind you that this is a series of articles, so if you are just jumping in now, you might want to go back and visit all the other ones first.
Now, it’s time to start planning your app. Planning means you will take all the things you want your app to do, and order them in priority. What order you want to make them, and what order of importance they have for development.
Then, you need to start drawing them out. You can do it however you want actually. The way you prefer is definitely the best. If you like to actually hand draw it, then go ahead and do that, if you want to use a wireframing tool like Balsamiq or Lucid Chart, well then go right ahead.
I personally prefer Adobe XD, because it light weight, easy to use and has a lot of simple functions. It doesn’t have everything you will ever need, but you can easily generate a functioning prototype to give you and your developer an understanding of how things should work.
Now, wireframes are just what they sound like. A frame of wires to give you a general idea of what should go where. The reason we wireframe is because moving a box labelled “Logo” is easier than moving an actual Logo. Especially when there is design and colours involved. So, you make yourself a wireframe and make sure you include all your functions. Even the one you aren’t planning on developing yet.
Why do we include all the functions even if we aren’t developing you might ask? The reason is very simple. Think about if you are creating a registration form for your users. You want it to all fit on one page, so in the end you wireframe and design it that way. Then, later you decide to add another one of your functions and have to add the extra fields to the from that this function requires. Your form design starts to change and nothing looks like it’s meant to. It’s better to build your idea around including all your ideas and then hide the ones you aren’t using, than build part of your idea and then change your idea later.
So, wireframe every page. And then go back and wireframe the ones you missed. Wireframing can be an extensive project. People often miss the simplest of things in it. Let’s think about a Login page. Your users have to login to your app.
So, for a login page, you actually need the following pages:
- Login Page where users enter their user name and password
- Sign Up page where users register their account
- Forgot Password page where users can reset their password if they forgot it
- Depending on what type of method you are using for your forgot password, you may also need a reset password page after it
- Terms and Conditions page, because everyone has to accept your terms and conditions
One function, 5 pages so far. Some of these sound pretty standard, but you’d be surprised how often people forget to factor them in. And then a few months down the line, you have to go back to your developer and suddenly add some pages you forgot.
So, wireframe your whole app. Everything in it, and then user your wireframe as if you are using the app. Because that will help you realise what you have missed.
Then, if you can, get someone you know to use your app wireframe as if they are using the app. Because they will definitely press on things that you didn’t consider or ask where things are you thought were obviously placed.
The more extensive your wireframes are, the better and easier your development will be.
