Android phone wireframes are screen sketches of an app that's run on an Android phone. We create Android phone wireframe for confirming of app design ideas with end users.
Android wireframes are screen sketches of an Android apps. It helps you present and explain design ideas of apps to customers, which ultimately leads to a consensus on the ideas proposed.
Wireframes are intended to use to demonstrate the functionalities, user interactions and screen flows, without explicitly specifying the actual screen components should look like and how the components should behave in order to keep the upfront development effort and cost in its lowest minimum.
Here is an Android wireframe example created based on Dropbox. As you can see, instead of showing real photos we used image placeholders. Placehooder of text has also been used instead of showing any file name.
The following Android wireframe example is about a sport tracking app. It consists of the mixed use of label, spinner, image (placeholder) and polygon shape (i.e. the play button).
An Android app wireframe is only a low-fidelity version of an interface. Each Android wireframe comprises basic graphic elements that represents the screen components, or the placeholders of screen components. The following are the Android wireframe components you can use in creating a wireframe.
An image can be an icon or any image data.
A label is a text on screen.
A text field allows user to type text. Touching the text field shows the cursor and displays the keyboard. User can then start typing. Text fields also supports functions like ranged text selection, copy, cut and paste.
A button allows user to touch it for triggering an action. It consists of a text, an icon, or both text and icon that shows the action to trigger.
A toggle button allows user to change the selection between two possible choices by touching it.
A switch is a kind of toggle button. It was introduced in Android 4.0. It allows user to switch between two states (e.g. on or off) when touching it.
Checkboxes allow user to select one or more options from a set.
Radio buttons allow the user to select one and only one option from a set. If you think that the user needs to see all available options on the screen, use radio buttons. Otherwise, use a spinner instead.
A spinner provides a drop-down menu for the quick selection of a value from a set. A spinner shows in its 'body' the currently selected value. By touching the spinner, a drop-down menu will be displayed, listing all the available values from which the user can make a selection.
A progress indicates the progress of certain running operation in a circle shape.
A progress bar is a bar that indicates the progress of certain running operation. It displays how far the operation has progressed.
A seek bar allows the selection of progress level. A seek bar has a draggable thumb. User can drag the thumb to left or right to set the current progress level or use the arrow keys.
A ranking bar supports rating and the displaying of rating in stars. User can touch the star on the bar to set the rating.
A panel is a visual container of wireframe components.
A list view displays a list of scrollable items.
A grid view displays items in a two-dimensional and scrollable grid.
A tab host is a container of tabs. User can click to select a specific tab to populate related content.
A dialog is a small window that prompts the user to make a decision (e.g. Confirm/Cancel). A dialog is shown on top of all the other components on a screen. It is used for modal events that require users to take an action before they can continue.
Date picker is a kind of dialog that provides controls for selecting each part of a date (month, day, year). The use of date picker ensures a valid date is being picked.
Time picker is a kind of dialog that provides controls for selecting each part of time (hour, minute, AM/PM). The use of time picker ensures a valid time is being picked.
A menu provides user with access to available user actions.
A toast is a simple description presented in a small popup, giving feedback on a current screen activity (e.g. Message saved). Toasts automatically disappear after a timeout.
An annotation is a piece of text that can be used to describe a control or behavior on a wireframe.
A rectangle shape that can be used for annotation and highlight in the wireframe.
An oval shape that can be used for annotation and highlight in the wireframe.
A polygon that can be used for annotation or highlight in the wireframe. You can add more points to the borders of a polygon and adjust their position.
A line that can be used for annotation or highlight in the wireframe.
The action bar is a primary toolbar that appears at the top of the screen. It displays the title of the current activity as well as to provide navigation to application level features/functions.
A drawer is a top level container that displays the app's main navigation options on the left edge of the screen. Drawer is revealed only when user swipes a finger from the left edge of the screen or touches the app icon in the action bar.
Keyboard is a virtual panel that allows user to touch the keys on it for inputting text.
Usually, clients do not understand technical screen design jargons like input control, gridlayout, picker, etc. Android wireframe comprises basic graphic elements that everyone can understand. Clients knows how the app will function and how they can interact with it to achieve their expectations.
Full-blown, high-fi screen designs takes time to develop, which lead to high development cost. Wireframing is easy to create and edit. It is an inexpensive way to create basic screen sketches. It also makes tweaking or even overhauling sketches simple and inexpensive.
Because wireframes are rough and loose, they give clients the room to brainstorm and voice their suggestions. And, because the turnaround time of refining wireframe is short, clients are actively involved in providing feedback, which makes them more likely to sign off the final design.
The problem with confirming design ideas using complete screen mockup or prototype, is that a considerable amount of work has already been done, and will involve a considerable amount of work to revise (or restart), which means extra time, effort and expense. In that situation, customers and development team are more reluctant to voice concerns and request changes. On the contrary, it takes much less time to produce and revise wireframes. Everyone will be more willing to request and make changes.
User experience (UX) is extremely important in app development. The use of wireframe brings the consideration of user experience to the beginning of project. Without developing any prototypes or drawing any real screen design, users can still experience how the app will work.
The use of wireframe can bring many benefits to both the development team and clients, but this is the case only when you use it wisely and properly. A typical misuse of wireframe is to treat it as a replacement of screen design. This makes the production and refinement difficult and costly, reducing the usefulness of wireframing. In this section, we will go through some of the effective wireframing tips.
Visual Paradigm provides all the wireframe tools and elements you need in drawing Android phone wireframes, Android tablet wireframes, desktop application wireframes, web wireframe and iOS apps wireframe (iPhone and iPad). It also supports agile software development and UX design tools, which includes user story tool, sprint development, storyboard, etc.