What is wireframe?
A wireframe is a skeleton design of your final product, with all the necessary details of functions and icons. It comes under two types: Low Fidelity and High Fidelity wireframes. Former is nothing but a sketch representation of your app screen and the later is detailed output on the screen using UX Wireframing tools. You can use Photoshop, WireframeSketcher (http://wireframesketcher.com/create/android-mockups.html) for creating a wireframe.
Wireframes produce the scope of work for designers, developers as well as managers.
Creating Your First Wireframe for an Android app
To give you the best possible overview of the wireframing and prototyping process, I’m going to pick one screen from my travel app and work on it throughout the rest of this article.
To create a first draft wireframe, grab some paper and your writing implement of choice, and then draw the rectangular outline of a typical smartphone or tablet.
I’m going to start by adding all the navigational elements to my wireframe. Looking at my screen map, I can see that the user needs to be able to reach three screens from the checklist:
- Select A City.
- Book Transport.
- Book Hotel.
‘Select A City’ is the previous screen in my application’s flow, so it represents the user moving backward through the application’s history. Android handles this kind of backward navigation automatically (usually via the smartphone or tablet’s ‘Back’ softkey) so you don’t need to add any explicit ‘Select A City’ navigation to your UI.
The other two screens are a bit different, as they represent the user moving forward in our application. The system doesn’t handle forwards navigation automatically, so it’s our responsibility to provide the user with everything they need to be able to navigate to these screens.
These navigational elements are going to take the form of two
TextViews, which I’m going to arrange in the style of a checklist (okay, so two items aren’t much of a list, but if I continued working on this project I’d eventually add more tasks to this list). In their default state, each
TextView will remind the user that they need to complete this task, for example, “You still need to book a hotel!” When the user taps either,
TextView it’ll take them to the Book Transport or Book a Hotel screen so they can complete this task.
When the user completes a task, the corresponding
TextView will update to display information about the user’s hotel or their transport arrangements (I’m not going to add any of this info to my wireframe for now, but it’s something to bear in mind).
To create a checklist effect, I’m going to create a corresponding
ImageView for each
TextView. In its default state, each
ImageView will display a red cross, but once the user completes a task this will be replaced by a green checkmark.
Finally, I’m going to add a title
TextView, at the top or bottom of both the
TextView which will display whatever the user has chosen to call this particular trip.