Before you begin building your app, you should really know what you want your app to be: how many screens it will have, what every single screen will look like, how your users will navigate through your app, etc. You should make a prototype of your app. When prototyping your app, you’ll start defining some questions about the structure, the design, the content, etc., and you’ll be forced to make some changes to the app. Besides, your prototype will allow you to show your customer or your team what the app will look like. It is always much easier to make changes while prototyping, rather than after developing the real app.
There are different methods to create a good prototype and you should find the best one for you. However, we recommend starting by using some of the traditional ones:
- Pencil and paper
Before starting your app, you should get some paper and start sketching all the screens of your app. Then draw lines connecting screens to define the navigational flow of your app. You had better use a pencil instead of a pen or a marker, since pencils let you erase and redraw.
- Whiteboard and post-its
Find some rectangular post-its, since they might be similar to a smartphone’s screen. Sketch every single screen of your app on a different post-it. Then stick them in an orderly way on the whiteboard and draw lines connecting screens to define the navigation of your app. The best thing about this method is that you can remove post-its and re-stick them in different positions or even substitute them with a new post-it. And lines are easy to remove.
If you only need a prototype for your own use, just to know what your app will look like or function as and to save time in the development process, those methods described above are more than enough. Take a picture of the whiteboard so that you’ll remember the prototype.
In case you need to share the prototype with your team or your customer so that they can review it and give you feedback, you’ll probably need more than a picture of your whiteboard. There are different tools out there to create prototypes (wireframes) in your computer. You can use generic tools like PowerPoint or Google Presentations, or you can try some more specific tools like balsamiq, proto.io or invision. Some of them let your team add comments.
The last step, in case you need to show someone something similar to the final app or just to check that the navigation that you planned makes sense, is building a fake app (a mockup). You can do this last step with Mobincube. Create a new app, then take photos of your post-its and upload them to your new app using the resource manager. Use “action image” screens to simulate your screens, defining square areas over the drawings that represent buttons. Make those areas clickable using the action “go to screen”. You only need a few minutes to build your mockup and install it on your smartphone or tablet. In case you need a more realistic mockup, you can use “detail” screens, bars, timers, etc.