Visual Paradigm logo
Jump to Menu

Using Wireframe Tool in Android Apps Design

A wireframe is a sketch of the application, website or system that you are going to build. Unlike many other screen designing or screen mock-up techniques, wireframes are created in black and white, with simple placeholders, boxes and lines. Instead of showing the details, wireframes present a general idea of what the end product (i.e. the application) will look like, how screens flow and how things will layout or look on the screen.

Compatible edition(s): Enterprise, Professional, Standard

  • February 3, 2016
  • Views: 30,557
  • PDF

What is an Android Wireframe?

Android wireframe is a kind of wireframe that allows you to design your Android mobile apps. Android wireframes serve as the starting point for your mobile application's visual design. Since wireframe is simple and is easy to understand, you can put it as part of your business requirements document, to give your client a picture of what will be developed.


android wireframes samples

What is this Tutorial about?

This is an Android wireframe tutorial written to demonstrate the use of wireframe tools in creating Android wireframes.

We need an example to demonstrate the ideas. Let's switch on your mobile phone and turn on the Google Play Store. You are going to create a wireframe for Google Play Store.

Preparation

In order complete this tutorial, make sure you have Visual Paradigm downloaded and installed. Click here to download Visual Paradigm if you do not have it installed.

Part I - Creating an Android Wireframe

  1. Create a new project by selecting Project > New from the application toolbar. In the New Project window, enter Tutorial as project name and click Create Blank Project.
  2. Select Diagram > New from the application toolbar.
  3. In the New Diagram window, select Android Phone Wireframe and click Next.
    Create android phone wireframe
  4. Enter Google Play Store as the name of the wireframe (diagram) and click OK. This creates a blank Android Phone wireframe.
    Naming Android wireframe

Part II - Drawing an Android Wireframe

In this section, you are going to draw the wireframe content for the Android wireframe with the Android wireframe tools.

  1. Let's show the action bar first. Right click at the top of the phone and select Action Bar > Show from the popup menu.
    show android action bar
  2. This shows the action bar at the top of the phone. On the left hand side of bar there is a back button. Let's change it to a Drawer button. Right click on it and select Android... from the popup menu.
    change android icon
  3. In the popup window, scroll down and choose the Drawer icon, which is the second last icon. Click OK.
    select drawer icon
  4. There should be an icon for Play Store, next to the drawer icon. Let's add a placeholder for this icon. Select Image from the diagram toolbar.
    select image
  5. Click next to the drawer icon to create the image.
    create image in android phone
  6. Make it smaller by dragging its resize handler at bottom right.
    resize image in wireframe
  7. Release the mouse button until the image placeholder fit into the action bar.
    image resized

    Adjust the position of image placeholder by dragging it. When you drag, you can see a dotted alignment guide. That guide helps you reposition the dragging content upon an adjacent shape.


    reposition wireframe shape

    Wireframe is simple. It contains little or even no details about graphical and text content. You do not need to show the actual graphical content of the Play Store icon (unless it has a significant functional importance).

  8. Next to the icon there should be a caption "Play Store". Create a label for it. Instead of using the diagram toolbar, let's try something different. Click once next to the image shape you just created. This shows a green icon, known as the smart resource.
    using smart resource
  9. Press on the smart resource and hold the mouse button. Drag towards bottom right to form the label shape.
    create shape
  10. Release the mouse button. A button should is created for you. Change it to a label by selecting More > Label from the drop down menu.
    create label
  11. This creates a "gray shadow", as a placeholder of label. Double click on it.
    edit wireframe label
  12. Enter Play Store as caption and press Ctrl-Enter to confirm editing.
    wireframe label created
  13. On the right hand side of the action bar, there should be a search button, represented by a magnifier. Let's replace the original Overflow icon with a magnifier. Right click on the icon and select Android... from the popup menu.
    replace icon
  14. Choose the Search icon and click OK to confirm.
    change to search icon
  15. Resize the icon to make it fit into the action bar. Up to now, the action bar should look like this:
    action bar done
  16. Let's proceed with drawing the main content. At the top of the screen there should be six buttons - Apps, Games, Movies & TV, Music, Books and Magazines. Let's create a button for each of them. Select Button from the diagram toolbar.
    select wireframe button
  17. Click on the top left of the phone to create a button.
    button created
  18. Resize it to approximately half of the screen width. Again, you can resize by dragging the resize handler.
    button resized
  19. Double click on the button and rename it to Apps.
    button renamed
  20. There should be an icon on the left hand side of the button. Apply the techniques described in step 4 to 7 to create an image inside the button.
    wireframe image added into button
  21. There are six buttons in total. Instead of creating them one by one, you can make use of the Duplicate function to make copies from the Apps button. Click on the Apps button to select it.
    select button
  22. The Duplicate resource is shown below the selection. Press on it and hold the mouse button. Drag it to the right hand side.
    duplicate wireframe content
  23. Release the mouse button. This creates a new button that looks the same as the source.
    new button created by copy
  24. Rename Apps to Games.
  25. Let's create the other buttons. Select the two buttons first. You can select a range of shape by pressing on the background and dragging over the target shapes.
    perform range selection
  26. Duplicate them to produce two new buttons.
    copy wireframe shapes
  27. Repeat these steps to create all the six buttons.
    buttons created
  28. Let's create a New Movie Releases section under the buttons. Add a label under the button. Double click and set its caption to New Movie Releases.
    wireframe label creatd
  29. Let's make the text larger. Click to select the label. Click on the Font Size resource and drag on the slider to increase the font size.
    increase wireframe label font size
  30. Add a See More button on the right hand side. Resize it to make it smaller.
    add see more button
  31. There should be three "recommended picks" columns this section. Let's create the first item. Create a panel for a column. Again, select Panel from the diagram toolbar and then click on the wireframe to create it.
    panel created
  32. The upper part of the panel should be a preview image. Add an image shape in it.
    image in panel
  33. Under the image, there should be the name of the item, along with a short description. Represent this with two labels.
    name desc added
  34. On the right hand side, there should be an Overflow icon, and price information. Represent this with an image shape and a label.
    recommended pick created
  35. Make use of the Duplicate function to create two more panels.
    panels duplicate
  36. Let's create the Recommended for You section by duplicating the New Movie Releases section. Select the related wireframe elements and duplicate them.
    duplicate elements
  37. Release the mouse button and rename New Movie Releases to Recommended for You.
    elements duplicate
  38. There should be only two columns under this section. So let's delete the third panel, then resize the remaining two to make it look like:
    wireframe elements resized

    That's all for drawing a wireframe. Your end result should look like this:


    completed wireframe

Part III - Exporting Android Wireframe to Image File

You can now export your work into image file. To export image:

  1. Select File > Export > Active Diagram as Image... from the main menu.
  2. In the Save window, adjust the save options such as the file type and output quality.
  3. Click Save. You now obtain an image file for your great Android wireframe! :-)
    wireframe in png



Trademark Disclaimer

Android, Google Play Store are registered trademarks of Google, Inc.


Turn every software project into a successful one.