Wireframes for Mobile Applications and How to Create Them

Wireframes for Mobile Applications and How to Create Them

Umbrella IT

Wireframes, Prototypes, Mockups are the terms that we often use interchangeably by mistake.

From this article you will learn the idea we intend by these notions. Then, we will dwell upon wireframe design tool for mobile apps and describe the way Umbrella IT specialists create wireframes in order to present them to our customers.

It should be noted that we have been successfully using this useful tool in practice for quite a long time.

If you would like to enjoy in practice the benefits of cooperation with our team, you are welcome to assign Umbrella IT implementation of your ideas and projects!  

What is Wireframe

Basically, a wireframe for mobile apps is a skeleton of future screens. It includes key elements and layout thereof, depending on their priority.

We could have stopped with the definition of the wireframe as of a screen scheme. But this would not cover its other features: often it includes some use cases, certain images, and navigation.

This is not just a mere scheme, isn’t it? Therefore, it is more properly to be referred to as an interface prototype.  

On the whole, this tool presents the user interaction with an app. It should be mentioned that such interface prototype is characterized with its own individual features in every specific case, but here we would like to speak about a standard (let’s call it – perfect) case.

Mockup

As the next step, a mockup is created based on the interface prototype.

At this stage a designer gets down to work. The task is to develop a mobile app design and to style all the elements of the interface prototype accordingly. The designer determines the form and the size of prototype elements, and may change their arrangement slightly, but cannot delete any elements as such. The goal of the designer is to create an optimal UX/UI using the interface prototype.

Prototype

At the next stage, a prototype is built based on the interface prototype and the mockup.

Such a prototype presents a kind of app with a minimum set of functions. In this form, the app prototypes can be used, among other things, to test certain functions, present the app to the investors or to perform an alpha test with a group of users.

How Wireframe looks like

  • app screens that will be used and their interrelation:

We are presented an idea of a general app structure and logic of connections between the screens, as well as navigation.

  • all information blocks:

Wireframe demonstrates what information will be included in the app and how it will be distributed in the blocks.

  • all interactive elements:

We can see buttons, links, forms, form fields on each page and their general layout/structure.

  • layout structure of elements and information:

All app elements are arranged in such a way that the users feel comfortable when interacting with the app. Buttons are located in the usual places we are accustomed to see them. The most vital information is highlighted or singled out by its size.  

  • easy-to-fill in forms:

Form fields are grouped by certain features. Each step of the user, when filling the form, is analyzed and thought over.

Mind Map As Basis For Wireframe

Prior to starting work on the interface prototype, we create a mind map based on the product information received from the client. Such a map is a developed scheme representing a general concept of the website or app, and high-level descriptions of use cases.

You can find more information on mind maps (functional maps) in our article.

How We Make Wireframes for Mobile Apps

  • we create app screen sketches

We start our work by using a mind map to determine what kind of screen we need for the future app, to consistently and logically allocate planned information blocks to them.

We sketch main screens required for the future app. We distribute information between them page by page.

Such sketches can be made using simple paper sheets or special sketchpads (tablets with templates for a mobile interface) or web services. The image can be rather schematic. There is no need to work out all the details of the screen; otherwise, you run the risk of missing the general concept.

  • we specify movements between the screens and navigation

We identify logical sequence of the screens, transitions, and links from one screen to another.

The modern user is used to working with apps intuitively and is reluctant to perform any complex actions in the apps. Therefore, the interconnection between the screens should be simple and easy to understand and shall match the conventional UX. To achieve this, you yourself need to be an active user of mobile apps.

  • we work on every screen in details

At this stage, we make the screen sketches more detailed, adding necessary supporting/transitional screens.

When wireframing a mobile app, we utilize applicable UX/UI techniques for users of various platforms (iOS, Android, Windows Universal Platform). In these terms approaches to creating mainframes for iOS apps and Android apps shall differ and take into account specific features of the platforms.

Example:

Tabs navigation in iOS apps is located at the bottom of the screen, while Android requires to place it at the top of the screen.

The way to return to a previous screen is also different: Android uses a Back system button, and sometimes there is an additional Back button on the upper bar.

In iOS apps, the Back button is practically always located in the upper bar, and they use one more convenient method to return to a previous screen -  swiping from the left to the right.

Already at this stage, it is recommended to discuss all the above details with UX/UI designers and developers. Any timely discussion can save time spent on the project in future.

  • we add comments to the skeleton

In addition to the actual image of the app screen elements and navigation, it is reasonable to include business-logic comments in the interface prototype.

Example:

The user may download 1 picture free of charge. If he wants to download more, he will be offered to upgrade his account.

Or

Near a delete button, a popup window should open with an enquiry to confirm the deletion.

  • we make the interface prototypes more realistic

If we have enough time, we add images to the wireframe. We shape the buttons in such a way that they look more realistic or add some real information.

Example:

We add an authentic product name or description.

  • we add interactivity

In some cases, it is recommended to make the wireframes interactive to the extent allowed by the project time and development terms.

Example:

On the one hand, live transitions between the screens and active links enable the customer to see the future app “in flesh” at this stage of the project already.

On the other hand, this is a great opportunity to identify any possible inconsistencies and mistakes, and eliminate them, without waiting for the tests stage.

  • we demonstrate wireframe to the customer

If the customer has no technical background, we explain that this is not the final result yet, but only a scheme. We approve the created mobile application wireframe with the client, to pass it on to the designers and developers to work on.

Benefits Achieved Through Wireframe

  • as opposed to a text, any graphic description provides a more realistic presentation of the future product;
  • accordingly, the risk of the discrepancy is lower in terms of how the developers and the customer see the future product;
  • a schematic presentation is easier to perceive;
  • there is an opportunity to identify any UX mistakes at this stage but not when the app is finished;
  • already at this stage there is an opportunity to involve developers, get their approval of critical and crucial points and record them in the comments.

Potential Mistakes: How To Avoid Them

Potential mistake: to pay too much attention to detail and delay the development process.

Solution: to do only things needed according to product requirements (mind map or another document).

Potential mistake: to give an editing access to all team members. This leads to confusion with versions and misunderstanding.

Solution: to assign one person to do updates.

Potential mistake: to try to embrace the entire scope of work, in case of a large-scale and multi-functional system.

Solution: to complete pages stage by stage, by modules.

Potential mistake: to invent anything absolutely new, ignoring key existing UX practices. As a result, the interface may seem incomprehensive and complex to the users.

Solution: to use generally accepted standards. Introduce novelties, taking into account already accumulated experience.

We have described a standard way used by Umbrella IT specialists to wireframe a mobile app. It should be noted that every new project brings us the new experience and new improvements to this process. In every subsequent case, we choose those methods and techniques, which are optimal for each specific customer.

Still have any questions? Contact Umbrella IT right now!

Photo: Shutterstock.com