Designing Wire Frames For Mobile Apps

7 min. read

Nine steps for wireframing a mobile app, from mapping out a user flow to ensuring your content scales well across screen sizes and testing your design decisions.

Wireframes are the backbone of any project, and mobile app design is not an exception. Wireframes serve as a middle ground between low-fidelity sketches and first interactive prototypes. The actual process of wireframing for mobile varies drastically.

Different designers approach wireframing and its translation to hi-fi design in different ways. While some companies advocate for going to code straight from sketches, the typical design process contains the following steps: Sketch (Conceptual level) → Wireframe (Component level) → Mock/Prototype (Styles level/Interactions level) → Code.

It's important to remember that product design is a multi-step process, and wireframing should not be the first step in this process. Before creating wireframes, it's essential to invest enough time in user research. Qualitative and quantitative research data will act as a reference during wireframing.

For this guide, I will create wireframes of a native iOS mobile app for food delivery.

Steps for wireframing a mobile app

Start by mapping out a target user flow
Sketch out the core part of the user flow
Start wireframing by setting a Mobile Frame
Determine layout using boxes
Use design patterns
Bring in actual copy
Ensure your content scales well
Connect the pages together to create a flow
Test your design decisions

Before creating wireframes

Map out a target user flow

Before starting wireframing, you need to have a clear idea of how many screens you'll need to design and how users will interact with them. It's much easier to get this understanding when you have a tangible user flow.

A user flow is a series of steps a user takes to achieve a specific goal. The user goal is a cornerstone element of user flow. To achieve a particular goal, a user might try a few different paths; that's why user flows may not be linear.

User flows will help you understand what wireframes you'll need to create and how they should be connected.

It's possible to visualize the flow using basic objects such as boxes and arrows. User flows can be created either on paper or in a digital tool. Below is a sample of a user flow for food delivery app created using Balsamiq:

Sketch out the core part of the user flow

The next step after defining the user flow is visualizing it. It might be tempting to use digital prototyping tool for that, but it's better to resist this temptation. The goal at this step is to let your creativity shine and explore various design directions. In many cases sketching on paper or using a digital sketching tool works better for that.

Sketches allow you to create quick concepts that you can share with other people, get feedback, and iterate upon it. When sketching always try to think from the user perspective — think about the goal a user wants to accomplish. The goal of a person who uses a food delivery app is to get tasty food as soon as possible. For every screen you design, ask:

What is the purpose of this page?
How this page helps a user/business achieve its goal(s)?

Below is a sketch of a home screen created in Balsamiq. Notice that every important section on this page is represented as a rectangle.

Sketching is a great way to flesh out ideas

Wireframing

The sketches you create will form a foundation for your wireframes. When it comes to wireframing, strive to create mid-fidelity wireframes. Mid-fidelity wireframes are very useful during discussions with the other designers and developers.

Set a mobile frame

While it's possible to use a simple rectangle as a frame for your mobile design, it's much better to select the frame that has dimensions of an actual device you design for. First, the frame will act as a natural constraint — it will prevent you from putting too many elements on the screen. Second, a frame will create an illusion of an actual design.

Usually, you have a range of devices you need to design for. It's recommended to start with the device with a middle screen size. For instance, if you develop an app for iOS in 2019, you can use an iPhone XS frame.

Frames for mobile iOS devices in Balsamiq

Determine layout with boxes

In the early stages of wireframe, your goal is to create a clear visual hierarchy — set layout and structure. At this stage, you don't focus on the content itself, you need to think about how it's presented. Plan the layout according to how you want your user to process the information and start by drawing boxes on the canvas.

Put a strong focus on the order of information you want to present to your users. Note that people scan web pages and phone screens from top to bottom, from left to right (F-shaped pattern works both for desktop and mobile screens).

Below is an example of a wireframe for our app's home screen. Notice how we've defined the hierarchy of elements using the size of objects.

Creating a visual hierarchy using basic shapes

Use design patterns

Familiarity is one of the most important properties of good UX design. When people see familiar UI elements in a new product, they can rely on their previous experience when interacting with this product. Both Android and iOS have native design patterns that simplify the task of creating a familiar experience for designers. Design patterns act as reusable content blocks — it's possible to use them to solve common problems (such as global navigation).

Bottom tab bar, side drawer and Floating Action Button (FAB) are the most frequently used patterns for top-level mobile navigation. If you want to design clear and simple navigation paths, use one of these patterns in your app.

Bring in actual copy

After you are satisfied with your visual hierarchy, start replacing placeholders and dummy text with real content (actual copy or the one that is relevant to the user). There is an important reason why we should avoid dummy text at this stage — Lorem Ipsum doesn't communicate how the page supports users in reaching their goals. Also, a lot of visual elements we create are based on the content we have in our products. As you start adding actual content, you will realize that some UI elements (or even UI sections) are not necessary for your product.

Sometimes, as you fill your wireframes with real detail, you may notice the layout you have is not working well. In this case, it's important to iterate and find a better way of representing the information you are trying to communicate.

After you fill the page with actual copy, test whether the page flows for the user. Some content on your page could be out of order. This is the perfect moment to reorganize the content on the page and improve the composition.

Below is an example of our wireframe for our home screen that has real data. Different font sizes are used to prioritize some UI blocks (such as food categories):

Real copy — By adding actual content in your wireframes, you will get an understanding of whether the information is being well-structured or not.

Ensure your content scales well

If your design looks great on a medium-size phone screen like iPhone XS, it doesn't mean that the iPhone 5 and iPhone XS Max users will have the same great experience. While it's absolutely fine to start with a middle size screen when wireframing, it's also essential to check how content looks on different screen sizes (both smaller and larger screens) and adjust it if required.

The home screen design on iPhone XS and iPhone 5

Connect the pages together to create a flow

While it's possible to ship your design as a collection of individual screens, it's better to create a flow out of them. UX flows make it easy for the team to understand the details of interaction scenarios — they communicate how people are supposed to interact with a product.

UX flows will also make you think about the app functionality as a whole. For example, after visualizing the UX flow, you might notice that you need to introduce an extra state between the home screen and a page with search results (because the backend of your system will take a few seconds to return the results).

It's also a good idea to give each screen a reference number. Reference numbers will make your life much easier when discussing the project with other team members or stakeholders.

Test your design decisions

Testing is the final (and one of the most important) steps in wireframing. Testing implies user interactions that's why this term is often used in the context of prototypes. But it's possible to conduct simple testing for a flow created from wireframes. Using Balsamiq, it's possible to create simple clickable prototypes by linking wireframes together. The goal of such testing is to see whether the screens work together.

Conclusion

The ultimate goal of wireframing is to identify the outline of the content and create a solid foundation for future steps of the design process. Well-designed wireframes make the visual and interaction design much easier.

As with any design activities, spend enough time experimenting with different tools and processes and you'll find your own style for wireframing. Practice makes perfect.