When designing a mobile application, one of the first activities should be to wireframe the application first. This allows us to define the application views, navigation and the user interaction.
What is a wireframe?
This is the design process of the application in which you can create rough sketches of how the application should look and behave. This allows us to identify any possible design issues early in the process. The corrections can be made on the sketch which has less impact than to try to correct software already written. The goal should be that all your application requirements should be met and that the user interface should be consistent, intuitive, balanced and readable.
Application Views
These are the pages/screens of your application. The idea is to understand what the application should offer to the user and identify how many views are needed to deliver the feature set. When defining the view, we need to have a plan for the following elements:
Header
The header displays application information like title and icons, and it is displayed in all the views. It is also used to provide a Back and/or home navigation button to allow the navigation back to the previous page.
Theme
The theme is the combination of color that you want on your application. The colors are used on the different elements like headers, footers, controls, content panels and fonts.
Design/Layout
This determines the look of your application. You may want an application with icons, sliding images or list views on the main page. You also need to define how you want the layout of the labels, input controls and buttons. Place your elements with enough padding and alignment to create a balanced layout. This is the most difficult aspect of the design. You need to be creative and be able to define something that is appealing and intuitive to the users. The key is to also be consistent with your design in all the views. Maintain the same look and feel in all the views.
Fonts
Make sure the fonts that you select are clearly visible and with enough padding between other elements to provide a balance and easy to read interface.
Footer
The footer is also displayed in all the views. It is used to provide quick actions to the users like a toolbar. It is also often used to show promotional or copyright information to the user. The footer is a context driven element. It may display controls or information that is just relevant to the current view.
Navigation
This is very important on any application. You need to provide users with the ability to know where they are in the application and how they can get to another location in a very intuitive way. The user should be able know how to get back to previous views without much effort or just click back to the main page. The transitions between views should have the same effect in the entire application. You should select sliding, popup or any other effect that lets the user know that a new view is in transition. The key is to be consistent and maintain the same effect.
User Interaction
First minute of usage is important. If the user finds your application easy to use, he will probably explore more and navigate to other pages to see what other features are available. The application should load quickly, so the user is not left waiting for too long. Here we need to make sure that we choose user interface elements that are intuitive for the user to interact with.
Conclusion
There are several tools on the internet that can let you create a wireframe for free. Just search for one in one of your favorite search engines. If you like, you can also just use a pencil and paper and then scan your sketches.
I hope I was able to provide some ideas on what to consider when building wireframes for your next mobile applications. If you follow these tips, I am sure you will find that your next design will adjust easy to changes.
