How to wireframe an app (tools, examples & templates)
February 2, 2023
The first stage of the mobile app development process is wireframing. You want to create detailed wireframes for each screen of your mobile app.
That way, you'll get clarity on your app's user flow, user interface, and functionality.
Plus, you'll have something to show to both stakeholders and intended users.
App Wireframes vs. App Prototypes: The Difference
It's important to understand the difference between a mobile app wireframe and an interactive app prototype:
Wireframes are static images that depict the user interface of your app.
Interactive app prototypes are clickable and simulate the experience of using the app.
Best wireframes start on paper.
Note that you need to have your mobile app wireframes ready and organized before moving on to the prototyping stage of mobile app development.
How to Wireframe an App in 8 Steps
Every mobile app wireframe should include these five key elements:
Content hierarchy
Main UI elements
Space distributions
Indicated user actions
Transitions between app screens
Here's a sample app wireframe for a podcast app called Podline:
Podline Podcast App Wireframes by Fernando Aleta. Source: Dribbble.
You can create a similar wireframe for your mobile app by following this eight-step process:
Develop user flows
Sketch core app screens in greyscale
Make a mobile frame
Design a screen layout
Add graphic details and UI elements
Place sample copy
Build global navigation gestures
Turn your wireframe into an app prototype
1. Develop User Flows
A user flow is a flowchart that depicts the user's path to accomplish their goal.
Its complexity will depend on the complexity of your app:
A user flow for a simple mobile app might depict a single pathway, while a user flow for a complex mobile app might include several tracks.
Here's an example of a mobile app user flow:
Source: Career Foundry.
As you can see, user flows don't include mobile screens, design elements, or user interfaces. They are simple diagrams.
You can sketch a user flow for your mobile application by hand on paper or a whiteboard.
Alternatively, you can use an app like Wireflow.
Free tools and resources:
Wireflow – free open-source user flow design tool
User flow template by Miro
User flow template by Mural
Pageflow – for inspiration
2. Sketch Core App Screens in Greyscale
Now that you have your app's user flow, it's time to create low-fidelity wireframes for the key screens of your app.
A low-fidelity wireframe is the most basic mobile app wireframe that shows the screen's layout but doesn't include all user interface details.
Here's a progression from a low-fidelity wireframe to a medium-fidelity wireframe to a high-fidelity wireframe:
Going from low-fidelity to high-fidelity. Artwork by Tsvetelina Lazarova. Source: MentorMate.
While you can create low-fidelity wireframes that include your user interface's color scheme, we believe it's better to do it in greyscale.
Here's how Rafal Tomal, former VP of Design at Rainmaker, explains it:
"I start most of my designs in grayscale and I add colors later. It helps me to focus on the context, form, the right contrast and visual balance. Also, having the grayscale as a base makes it easier to apply colors from the chosen palette later."
You want to lay the foundation of your user interface first and worry about the cosmetic details later.
You can draw low-fidelity wireframes for the key screens of your mobile app by hand using pen and paper. Alternatively, you can do it with an app like Balsamiq.
Also, remember that there's no need to create the entire user interface from scratch. You can use a low-fidelity wireframe kit (a wireframe template) instead.
Best tools for low fidelity wireframes:
Low-fidelity wireframe kits for mobile apps:
3. Make a Mobile Frame
A mobile frame is a frame that represents the screen of a mobile device on which your users will be using your app.
While you can sketch low-fidelity wireframes using a generic rectangle frame, it's much better to use a mobile frame because that will help you keep your design centered around intended mobile devices.
Here are the display size dimensions for Apple mobile devices:
iOS Device Display Summary. Source: Apple.
Meanwhile, Android mobile devices are produced by different manufacturers, so there's much more variance regarding display sizes.
If you want to target the Android market with your mobile app, you need to account for that and create mobile app wireframes for a wider range of display sizes.
4. Design a Screen Layout
You must create a screen layout for each app screen.
It's essential to establish a visual hierarchy in your mobile app design. What do you want to draw the user's attention to?
You can guide the user's attention toward the most critical design elements by enlarging them.
Remember that the human eye is naturally drawn to the biggest object in any given image, so the sizes of various user interface elements should reflect their importance.
Pro tip: Check free UI/UX kits for different app screens to understand how other products dealing with hierarchy.
5. Add Graphic Details and UI Elements
Now that you have your screen layouts, it's time to turn each low-fidelity app wireframe into a high-fidelity app wireframe by adding:
Colors
Buttons
Input controls
Navigational elements
Helper elements
You should keep the visual hierarchy of your app in mind as you're adding all this to your app wireframes.
We have already discussed using the size of design elements to guide the user's attention. You can also do it through the strategic use of color.
Our eyes are immediately drawn to anything of a color that contrasts with its surrounding environment.
So pick a color that contrasts with the overall color scheme of your app, then use it to make the most important user interface elements stand out.
Of course, you need to be careful not to overuse that color, as it will lose its effectiveness if you do.
It's best to use your chosen contrasting color only for the most important design elements, such as buttons you want the user to tap.
Remember that a finished high-fidelity mobile app wireframe should represent how your app's user interface will look on the user's screen.
Best tools for high fidelity wireframes:
6. Place Sample Copy
Now it's time to add a sample copy to each mobile app wireframe.
You want to ensure that the text you use in your app design reflects the visual hierarchy you have in mind.
As with design elements, the more important the text, the larger the font size should be.
You can use the classic Lorem Ipsum text or a simple generic copy.
You should add real copy to the finished high-fidelity mobile app wireframes.
It's important because once you're done with the wireframing process, the next step will be creating an interactive app prototype.
Prototypes are supposed to help you gather user feedback, so you can't give people something littered with "Lorem Ipsum" text.
Your prototype should have the exact copy you intend to use in your mobile app to observe how your intended users react to it.
7. Build Global Navigation Gestures
Once you have high-fidelity wireframes with the real copy for each screen, you need to add navigation gestures to them. How will your user navigate between these screens?
Common navigation gestures include scrolling, swiping, and tapping.
You need to make sure that these navigation gestures are intuitive. How do competing apps approach navigation?
Consider indicating navigation gestures with user interface elements that hint at what the user should do (e.g., arrows).
You should also organize your wireframes in a way that illustrates the entire user flow of your app.
You want to see not just all the screens of your app but also how these screens are supposed to work together.
That will make it easier for you to explain the app's functionality to the key stakeholders before moving to the prototyping stage of the app development process.
8. Turn Your Wireframe Into an App Prototype
Finally, you want to take all those high-fidelity wireframes and turn them into an interactive, clickable mobile app prototype.
You won't be able to offer the full functionality of your app as that would require coding.
However, your prototype should simulate the experience of using the app as closely as possible.
Keep in mind that the purpose of interactive app prototypes is to gather user feedback. And the more functional the prototype, the more valuable the feedback.
Once you have your prototype, put it in the hands of your target audience, then observe how your ideal customers interact with your user interface.
Pay special attention to how user behavior deviates from what you intended.
Sometimes, a specific design decision seems like a great idea during the design process, but at the prototyping stage, you discover that it confuses your users.
You want to identify issues like that and fix them before you pass your mobile app prototype to your development team so that they can start coding.
Best app prototyping tools:
Common Questions About App Wireframing
Here are the answers to some of the most frequently asked questions about mobile app wireframes.
Why do you need to create a wireframe for a mobile app?
The mobile app wireframing process helps you get clarity on your app's core features, user flow, and user interface.
Moreover, it also gives you something you can show the key stakeholders, which helps to communicate what you have in mind.
Finally, you can also show your mobile app wireframes to your target audience to gather user feedback.
How long does it take to wireframe an app?
It depends on the complexity of the app, the resources you have available, and your team's expertise.
Here are some rough estimates:
1 month to wireframe a simple app
1.5 months to wireframe a medium-complexity app
2 months to wireframe a complex app
These are the estimates for producing polished high-fidelity wireframes for each screen of your app.
Which software is most popular for wireframing?
Balsamiq for low-fidelity wireframing.
Sketch, Figma, and Adobe XD for high-fidelity wireframing.
How much does it cost to wireframe an app?
It depends on:
The complexity of the app.
Who you hire to wireframe it.
You can probably expect to pay between $50 and $100 per screen.
How many wireframes do you need per app?
You want to create detailed wireframes for each screen before you move on to the prototyping stage of the mobile app development process.