How to Wireframe an App: Guide

Many believe that mobile app wireframes are used to demonstrate how the application will look like. While it’s true in some way, the main aim is to show how your product will work.

The wireframe for a mobile app includes a minimum amount of information needed to solve the following tasks:

1. To show how exactly the application will help your audience.
2. To illustrate each step of the User’s Journey within your app to pinpoint possible pitfalls before development starts.
3. To allocate all main objects, page elements, content & navigation areas on screens.
4. To get all of your team members and stakeholders on the same page of what you’re building.

Therefore, there’s quite a limited number of elements that are sketched on mobile app wireframes:

Mobile app Wireframe is something more serious. It’s a result of deep thinking process which ends up with quite an accurate illustration of your digital product structure and functionality. We’ve already reviewed its core qualities so let’s not spend too much of our time here.

A bit later you may need the fullest and most accurate perspective of your product, including UI details. It’s something called Mockup. To put it short and simple, this is a wireframe which includes all previously avoided design features: logos, UI elements, colors, fonts etc.

However, while wireframes are usually presented as a mindmap and include all possible screens in the app as well as connections between them (since your main aim is to show the structure and functionality), mockups are usually created for 1-2 screens with core features.

Mockups are needed to get a close-to-final vision of your mobile product, test visual details and facilitate design implementation in the future. Of course, they can be also presented to investors during pitching.

What is common between sketches, wireframes, and mockups? These all are static illustrations that more or less show you the structure and functionality of your Product but don’t let you interact with it. Want to get close to the real-life experience? That’s when prototypes come into the game.

A Prototype is a clickable blueprint of your product that provides you with an idea and perspective of how your app or website may feel to users. As a rule of thumb, it includes clickable buttons and allows you to move from screen to screen just like your future users will do. By the way, you can find an example of the app prototype in our Pocket Promoter Case Study.

Thus, you’re able to share this vision with other stakeholders - for example, show wireframes to investors during your pitch and receive funding or get approval from a decision-making person within your organization.

Garry Tan, the co-founder of Initialized Capital and a design expert, puts it as follows:

*Once you have the wireframe you can start doing usability testing. You can print it out and sit down with people who have never seen it before and just walk them through it. Or even better: just ask open-ended questions. Like “what are we looking at?”, “what are you going to click next?”.

Before you even write a line of code you can do a lot to test whether this thing is going to work. And it’s way cheaper to do it at this stage than fix this as a bug in code later.*

Reason # 3: Fast iterations to a perfect Product and avoiding pitfalls in the future

When you create an app wireframe, your main goal is to ensure the pain-point of your users is solved and also map out a great UX for them. However, you may not reach the perfect result from the first shot.

What is great about the app wireframing process is that it doesn’t take much time. Therefore, wireframes are perfect for fast iterations. The whole cycle looks as follows:

1. You or your team make a wireframe for an app or it’s part.
2. You show it to other stakeholders - e.g. a decision-making person within your organization, investors or a customer focus group - to gather their feedback and discover possible pitfalls early.
3. Update your wireframes according to the collected feedback.
4. Repeat this sequence as fast as possible and as many times as needed to reach your intended goal.

If you need to involve investors in your project, you will have a nice visual material you can use for presentations and pitches right away.

It’s much easier to execute iterations at this stages than face this need later when the development will be already in progress.

Reason # 4: Wireframing Helps to Avoid Mistakes

Another good reason to make a wireframe for an iOS app (or Android, it doesn’t actually matter) is that it helps to lay out the functionality of each screen.

What features should go first? Is there enough space on the screen N to place everything you want to see there? Wouldn’t it look too tacky? With a mobile app wireframe, you can easily answer these and many other similar questions.

In a nutshell, wireframes are usually prepared together with other essential product-related data during the Discovery stage: user stories, use cases, a UX-mindmap etc. It helps to get a better perspective of your target audience, their needs and ways your Product can help them.

What about the cost?

To build a wireframe for an Android app (or iOS) usually requires from us between 40 and 70 hours. Multiply this number by the hourly rate of your Development Partner and you’ll get an approximate cost of an app wireframe.

What do we do during this time? Let’s see our step-by-step guide on how to wireframe an app!

Step 1: Figuring Out the Basics

The app wireframing process at Stormotion starts with a thoughtful immersion in our client’s project idea. Before drawing any blueprints we need to understand what are we going to work on. The best way to do this is to answer a few following questions:

1. Who is your target audience? How easy are your customers to find?
2. Which customers should we go after first? Which customers should we stay away from?
3. What problems do your customers have and expect to solve by using your product? Can we define it narrowly?
4. Does our MVP actually solve the problem?
5. How often do they have the problem? How intense is the problem?
6. How can your business/startup solve the problem of your target audience?
7. What functionality do your customers expect to see in your application? What features are needed to satisfy them?
8. How should the Buyer’s Journey look like? How to make it as short as possible?
9. Is your target audience willing to pay for your product to solve their problem?

Only after we gather this data, we move to the next stage.

Step 2: Make a Content Spreadsheet

With a clear vision of your project in our minds, we start to look for the best and shortest way to your goals.

During Step 2, our UX-magicians create a spreadsheet where all the expected features and pieces of content are listed. It helps us in a few ways:

• On the one hand, it ensures that we won’t accidentally lose something important before we start to draw a wireframe for your mobile app.
• On the other hand, we use this list to prioritize features, screens and other content pieces, building a smooth user’s journey within the app and bringing the most important elements up front.

For the maximum effectiveness we arrange this process as follows:

1. List all the key features and content pieces with a short description (if needed).
2. Prioritize and link each of those elements to a specific screen, so we won’t have any duplicates or miss something in the future.
3. Review the list for excessive content that can be omitted at the initial stage, leaving only the most essential pieces.

When the logical structure of your future product is cleared out, it’s time to turn it into some nice-looking blueprints!

Step 3: Basic Mobile App Wireframe

During this wireframing stage, we mark up the screens with specific content blocks. The key aim here is to define the best spot for different elements: for example, what should be placed on top of the screen or what is the best area for video content. This process is based around the Visual Hierarchy concept.

Visual Hierarchy refers to the arrangement of elements that matches the order in which users process information on a screen.

At this stage, we intentionally use zoning as the main approach instead of designing all elements at once. Why? Because laying everything out often leads to wasted time and backtracking since you have to subtract something later.

After we make up the general layout, we start adding more details.

Step 4: Detailed Wireframes

During this step, we finish creating a wireframe for an app. Previously marked up zones are detailed with buttons, icons, placeholders for images and videos, text boxes, spacing and so on.

This shot from Dribbble perfectly illustrates how a good wireframe for a mobile app looks like. Pay attention to these details:

• The wireframes are in black and white (I’m not talking about the colorful background since it’s not a part of wireframes, actually).
• They don’t include any logos, special UI elements or custom fonts.
• You can notice image placeholders which don’t include any specific pics.
• Content prioritization is achieved by applying bold to text and playing with its size.