👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Creating a Mobile Application

Introduction

In a previous tutorial we learned how to create a wireframe for a basic web site. In this tutorial, we'll go through the steps of creating a series of wireframes for an imaginary mobile banking application. Some other resources that might be useful in conjunction with this tutorial are the Application Overview and Tips for Working with Controls.

Here are the wireframes we'll be creating in this tutorial:


Screen 1: Login

The first wireframe we'll create is a Login screen.

Controls used for this screen:

Start by adding the iPhone control to the canvas. To save time, you can type the word "iphone" into the "quick add" box rather than dragging the control from the UI Library. You can press the "/" or "+" key to send focus to quick add.

Next, we'll add a Text Title control and use the alignment guides to center it within the iPhone control. For the username and password fields, we can add a Text Input control, followed by a few tips and tricks. The first is to wrap text in dashes ("-") to show it as disabled. This gives the effect of showing the text as a placeholder that will get overwritten when the user enters their own information. After creating and formatting the username field, you can duplicate that field to quickly create the password field. The shortcut for duplicating controls is CTRL/CMD + D (full list of keyboard shortcuts here).

Next up is the save username checkbox, which consists of a Label and iPhone ON/OFF Switch control. Since this is a mobile app, we'll use the on/off control instead of a regular checkbox. To make it easier you can align and group these controls outside of the iPhone controls so that the other alignment guides don't interfere. Grouping the controls allows you to more easily center align them as a unit inside the iPhone control.

For the login button, we want a big, colorful button, so we can increase the text size, change the background color, and enlarge the dimensions of the Button control. For the "forgot password" link, we'll use the Link control.

Finally, for the icons, we'll add an Icon control and use the icon search to change it to a cloud icon. For the second icon we can again use the duplicate shortcut, and then change its size in the Property Inspector.


Screen 2: Accounts

Next, the Accounts screen.

Controls used for this screen:

For this screen we'll have the background pattern of the iPhone control set to show the top and bottom toolbar areas, which we'll be using as a header and footer for icons. We'll extend the size of these areas with Rectangle controls. We'll also be using more iPhone-specific controls (the iPhone menu and iPhone button controls).

After adding, resizing, and centering the Text Label control for the heading, we'll add an iPhone menu control.

For the iPhone menu, here's the text we'll use:

Checking, $1397.65    :chevron-right-solid:
Savings, $2383.41    :chevron-right-solid:

The commas divide the larger, left-aligned text from the smaller, right-aligned text. We use the Icons in Text feature to create the drill-down arrows inside the control. The result looks like this:

Account list

We'll then add some "legalese" that is often used in these types of applications. As the designer or developer, we just need to have a placeholder to remind ourselves that this space is reserved for a block of text. We can use the Lorem Ipsum shorcut to quickly generate this placeholder text. Do this by typing "lorem" in a Text Paragraph control and it will immediately fill with Lorem Ipsum text. We'll then center it and change its color to grey to make it less prominent (because, as we all know, users probably won't read it!).

At this point it looks like this and is starting to come together.

Account screen, before buttons

We now need to add the logo and some navigation.

For this, we'll start with the Icon and Text Label control, which is kind of a two-in-one control that's ideal for iPhone tabs. For the "Accounts" screen (which we're on), we'll use the dollar sign icon. We'll change the color to a light blue to show that this is the active tab. We can use the duplicate shortcut to create another icon and text label control of the same size, and position it inline with the first one using the alignment guides. We'll use an envelope icon for the "Deposit" tab and set the color to white to show it as not selected.

The last steps are to add a Pointy Button for the log out button, and label and icon controls for the logo. We'll remove the pointy arrow, since it's logging the user out, rather than taking them back or forward. We'll set the icon and label colors to white to make them stand out against the grey toolbar background.


Screen 3: Transactions

Controls used for this screen:

This screen is similar to the Accounts screen, but does even more with the iPhone menu control.

Because it is so similar, instead of creating a new wireframe from scratch, we can use the "Duplicate" command to make a copy of the Accounts wireframe and work off of it.

Rather than adding controls to the wireframe first, we start by removing some controls from the middle of the Accounts screen and renaming the "Accounts" Text Label to "Transactions".

For the transactions list we want the first item to show as greyed-out, since it is a pending transaction (designated as "processing"). We also want the transaction date and vendor to be on separate lines. Like this:

We're really getting fancy with the iPhone menu control here. This is what the text looks like to generate the transactions list:

-*Processing*\r_Auto Klub_-, -\-$23.79- :chevron-right-solid:
*12/30/2023*\r_DMV_, -$45.00 :chevron-right-solid:
*12/29/2023*\r_Island Pharmacy_, -$19.25 :chevron-right-solid:
*12/27/2023*\r_ABC Gas_, -$65.00 :chevron-right-solid:
*12/25/2023*\r_Savemart Express_, -$10.22 :chevron-right-solid:
*12/25/2023*\r_Jeremy's_, -$44.18 :chevron-right-solid:
*12/24/2023*\r_Home Mart_, -$85.15 :chevron-right-solid:
*12/24/2023*\r_King Burger_, -$9.04 :chevron-right-solid:
*12/24/2023*\r_Coffee Stop_, -$3.83 :chevron-right-solid:

At its most basic, it is just like the syntax we used for the Accounts list. That is: text, a comma, then the ":chevron-right-solid:" icon-in-text to create an arrow. But, in this case, we've also used some text formatting tricks to modify the way the text looks. We're leveraging several of the text style shortcuts in the same control.

Here's a closer look:

  • -dashes- to indicate disabled/greyed-out text
  • underscores for italicized text
  • asterisks for bold text
  • "\r" to wrap text onto a new line
  • used the "\" character to escape the minus sign and prevent it from being treated as a formatting character (shown before the dollar amount in the first transaction)

The one other difference is that we've removed the border around the iPhone menu control to make it look like more of a table.

Other than that, there's not really anything new on this screen. We're still in the Accounts category, so the tabs at the bottom don't change. Also, the icon is already there, we've just centered it in the iPhone control. And, since this screen is a drill-down from the Accounts screen, we're using the pointy version of the iPhone button to create a back button.


Screen 4: Deposit

Controls used for this screen:

This Deposit screen is also similar to the Accounts screen, so we can again use the "Duplicate" command to get it started.

After changing the screen title, we can update the colors of the icons in the tabs bar at the bottom to indicate that, now, the Deposit category is selected. And now, again, we'll be doing something new with the iPhone menu control. This time, we want to show icons next to the text in the menu. To do this, we can do this by using the "Space for a big icon" text formatting syntax ("__ "), as shown in the template when the control is added.

This results in text that looks like this:

__ Front of Check, >
__ Back of Check, >

After that, we reposition the Lorem Ipsum text and add two more icons. For the icons, we'll add a camera icon, set it to the right size and color and position it using the alignment guides and the arrow keys on the keyboard.


Screen 5: Camera

Controls used for this screen:

  • iPhone (the main phone body, Model="X")
  • Rectangle (to extend the footer area of the iPhone control, Color="#3f3f3f")
  • Rectangle (with a border, to define the outline of the viewfinder area)
  • Rectangle (with no border, to create the 4 corner guides)
  • Image (as a placeholder for the check image)
  • Rectangle (to house the camera button, Color="#3f3f3f", Opacity=25%)
  • Pointy Button (the blue camera button)
  • Pointy Button (the "Cancel" button)
  • Text Label ("Center check between the guides")

For the Camera screen, we want to create the effect of a mobile phone camera window looking down at a check. For this screen we'll be using some of the more general-purpose controls, the Rectangle control in particular.

For the alignment guides (the "frame" inside the camera window), we want a rectangle with only the corners showing. We can do this quite easily by layering three rectangle controls over each other. The first one will be a white rectangle with a black border. This is what will actually be shown on the screen. Next, we want to cover up the middle parts of each border. So, we'll add two white rectangles and turn off their borders. Now we can lay one across the horizontal borders of the bottom rectangle and another across the vertical borders. Changing the overlay rectangle colors to grey, it looks like this:

img

It doesn't need to be precise. We just want to demonstrate the effect of guides for positioning the check. Similarly, we don't need to replicate the look of an actual check for this screen. That's why, in the next step, adding the default placeholder for the Image control is sufficient. Anyone involved in this project is going to know what it represents.

Finally, for the camera buttons, we'll start with the rectangle control again. This time, we'll change the opacity to allow the check and guides to show through. For the camera button, we'll use the iPhone button so that we can get the nice, iPhone-looking rounded corners. Note that you don't have to include text in your buttons. If you add an icon and delete the placeholder text the icon will get centered in the button. The last steps are adding the Cancel button and the grey overlay instruction text.


Linking them all together

Finally, we can use the linking feature to link all five wireframes together and show them in Full Screen Presentation mode. The Linking Wireframes Together article describes this feature in more depth.

Using links and presenting a set of wireframes to your stakeholders will help you tell the story around what you're trying to build as well as giving you a feel for the workflow and any usability pain points. Using linking, you can also generate a clickable PDF that you can distribute.


You can see all of the wireframes in this article - with all the links between the wireframes - in the project file we used to create them. Click to download the BMPR file


Learn more about mobile design


By Leon Barnard
Got questions or feedback? Email support@balsamiq.com.