Wireframing is one of the most basic and best ways to map out your app or game. It will be integral for designing the user interface and optimizing the user experience, and will also be ideal for making sure that no aspects of the app slip through the cracks. In its most basic form, a wireframe is the underlying skeleton of your app, usually hand-drawn first, but easily inserted into your electronic planning documents as a graphic.
Most wireframes will look like a diagram or brainstorm, because that is essentially what they are. It maps out the tasks, menus, screens, etc. for your app in a clear progression that will be easy for your developers and designers to follow.
How to Create a Wireframe
For example, imagine that you are developing a basic app that helps someone track their exercise, calories eaten, and water drank. In this app, you know that you want to have one home screen, that allows the user to access the three areas of the app—exercise tracker, food tracker, and water tracker. Start your wireframe by writing “home” at the top of your page.
Now, decide how you want your users to access these three areas. Are there three buttons that they can click on that home screen? Three symbols? Three drop-down lists? You do not have to decide how you want users to access the following pages right now, but having a general idea is good.
From home, draw three arrows and at the end of each arrow, write “exercise,” “food,” and “water.” This is the beginning of your wireframe. Now, continue to add the sub-categories and pages, using this same format to indicate which pages lead to which and where they coincide, if appropriate. Of course, your app’s wireframe should have as many pages and sub-pages as your app will have screens. Simply keep in mind that this should be a complete diagram of how a user would progress from page to page, throughout the entire app. Once the wireframe is complete, your developer should be able to use it to craft the app’s navigation.
