Sunday, 22 July 2012

How to Wireframe a Mobile App Interface

Mobile app developers know how hard it is to build mobile apps, and how much time and energy is spent to build one.  After all, when creating apps – you do not only develop and plan how it will function, but you will also need to do some coding as well as some UI developing.

Fortunately, there is a much easier way to start off with your very own mobile app - and this is through a method called wireframing.  It’s actually like creating a blue print or a plan before the actual app development takes place. It involves the layout of the apps, the development of the features and other actions, all of which are meant to provide better results.

So, what is so good about wireframing?  Well, firstly, it gives you get a step by step plan on what you should actually do. Here are some additional steps when creating your very own wireframe designs.

Conceptualize your application views

Every mobile application contains pages called “views” - where you can you can find content, galleries and other features that will be utilized for your mobile app.

In planning your own wireframe, you must try to imagine first how your application views will look like, as well as the features that you’ll present. You can start with the first page in your application which is also known as the root view.  Next, is to conceptualize on how it would look like and what formats you will be using to mix both function and design - and then incorporate additional features to give you an edge over your competition.

You can also create a list of all possible views that you might be experiencing during your mobile app development. This will make your task a little bit easier and will help prevent you from forgetting any minor or major details. Additionally, this also presents a great opportunity to test how your apps will actually flow with your views.

Wireframe your navigation routes

Wireframing your navigation routes aren’t as hard as you think. You can start off by laying out all the possible views and then make your own sketch.  You can start from your root view and then try to connect them to the other views according to relationship and order. Remember that when you wireframe your navigation routes - you will have complete control as to how users will be able to browse your apps, as well as the order of how the pages are laid out. In fact, you can even assign a button or a tab in one of your views in order to initiate the loading of the page.

Provide user interactivity

It is a given fact that most mobile applications do not provide features for users to interact with the app ad or vice versa.  Or if some do, they only have a limited interaction feature. Now, if you want to include an interaction feature in your app - you can start off by planning what messages, buttons and tabs to attach to your app to allow interaction to take place.

Provide different keys for different functions, such as “submit button” keys, keys for “pulling up the number pad” and so forth.  However, don’t forget to take down notes as to what keys to assign on a specific function - so that you won’t forget a key or get confused later on.  Also, label each field according to the type of information that it represents - such as, user or login names, passwords, email details, etc.

Plan your content

Make sure you already planned ahead on the types of media included in your content, like if for example it will contain purely text messages, photos, flash videos and others. However, take note that photos and videos need to be laid out ahead of time – primarily because of their file sizes and because (depending on the size) these media will usually affect the app’s loading time.

Use templates to assist you

The task of wireframing can be easier if you have templates to help you with your designs and tasks. Look for available templates in the internet.  Fortunately, there are those which are free.  Hence, you can start working on your wireframe designs using these tools.

Study other wireframe samples

Do some additional research and study about other wireframe samples.  This will give you a brief idea as to how this procedure really functions and works. In addition, it can also give you more inputs and ideas with regards the designs and the apps that you are planning to work on.

In the end, what is important is that you are able to use wireframing as a means to make your app even more viable than you expected.  And with the proper strategies and procedures, you will be able to do it.

Image by

No comments:

Post a Comment