justinmind

A guide to designing app wireframes: step-by-step

full guide to designing app wireframes

App wireframes are crucial in product development, but what is the right approach? How do we build on them? Find it all in this guide!

Mobile apps. They’ve become such a constant presence in our lives in the 21st century that it can be hard to think of all the different factors that contribute to a good or a bad app design. So many things could go wrong – from the wrong choice of icons to dubious navigation. What’s the easiest and cheapest way to make sure you don’t fall prey to all these pitfalls?

Wireframe your app with Justinmind - it's free!
Download Free

Turns out that app wireframes might just save you. By making sure you get your ideas down into an app wireframe, you give yourself a chance to spot problematic areas and make improvements.

Let’s take a closer look at why they are important and how you can make an app wireframe that blends in perfectly with its operating system – be that an Android or iOS platform.

What are app wireframes?

App wireframes work towards the same purpose as classic wireframes. They offer a clear view of the bare bones of the design, including things like the navigation system. The goal is to create a solid foundation, validating the core functionalities of the product before refining the design.

The thing about app wireframes is that they are even more important. In web products, there is a wide range of tactics and approaches one can implement without hurting the usability of the design. In smartphones, however, the limited screen space can limit the ways one can use the product.

The most obvious example of these limitations is navigation. In apps, you want the navigation to feel natural but many components aren’t appropriate for the small screen and touch control - that is the case with dropdown menus.
what are app wireframes in UX design

Creating a good mobile app can be a complex task. Providing a good experience takes a lot of planning. A lot of different factors need to align if you want usability standards to be respected. And in part, all of that will hang on the basic structure of your app.

When dealing with such limited real estate, every single component is crucial. Heck, even the white spaces between components are crucial. Even if the visual aspect of icons, for example, will impact the UX – the placement of those icons will make or break your app.

That’s why you need to think and plan the position of each element before you even start worrying about what each element will look like.

By the way: If you’re not clear on where wireframes end and prototypes begin, check out our post on wireframes vs prototypes. On a similar note, we also have a post on wireframes vs mockups.

Benefits of app wireframes

App wireframes are more than a simple additional step in the design process. In truth, app wireframes play a very important role, helping the team create a sound foundation for the entire product.

Even though it may be quite tempting to jump straight into a refined high-fidelity prototype, rushing the building of the design can lead to utter disaster. The most compelling argument in favor of wireframing the app design is the ability to test it as it’s created. This is about making sure the main pillars of the product work – crucial things like the information architecture (IA).

benefits of app wireframes

The need to have wireframes at all derives from the need to have a good footing before taking the next step. Much like you want to first learn how to drive properly before investing in a good car, you want to get your wireframe down before investing in the details.

How to design an app wireframe step by step

1. Gather the necessary materials for the wireframe

Simply assembling a bunch of components in a blank canvas with no research is no way to wireframe a product. The truth is that there’s a lot of work to be done before wireframing can start, like we saw with the user flows. This pre-wireframing work is very important, because it will direct your efforts.

A classic example is the project’s requirements. As mentioned before, the requirements will include pretty much everything the product needs in order to work properly, from business requirements to design requirements.

materials designers need before wireframing apps

Another good example is an inventory of all the bits of information the user will need in order to reach their goal with the product – which can range from the price of items to a contact email for customer support. Just like the requirements, this inventory is also important in making sure we don’t forget anything important in the app wireframe.

Finally, we have the user research. This is the culmination of all the investigation that needs to be done, so we can understand who we’re designing for. Going in blind makes the design extremely vulnerable, as it won’t be tailored to anyone in particular. You want to have a clear picture of the final user and create an app wireframe that is perfect for that user. This is when we put together important tools like user personas, user scenarios and flows.

Think of the wireframe as a dish: You need an objective as to what you’re preparing (the final product), just like you need the step-by-step guidelines (which are your requirements and research) as well as the ingredients (all the necessary components and information). Without these basic materials, you couldn’t cook anything at all!

2. Plan out the app’s general IA

This step is mostly about implementing the takeaways from the materials in a concrete structure. This isn’t the time to start wireframing screens, but to consider the entire structure of the product. This is about getting a better idea of how each piece of content will relate to each other, in terms of importance and hierarchy.

example of app's information architecture

Your information architecture will reveal the hierarchy of content, which is likely to be reflected in your navigation. At the end of the day, the navigation tends to derive from the content and functionalities of the product, making IA and navigation two sides of the same coin. This is a way of saying that once you have a defined hierarchy of content and information, you’re likely to already see a navigation structure in broad strokes.

These two pillars of any given product can be even more challenging in mobile products. The mobile factor forces the design team to make the information architecture and navigation even more coherent, with users being limited by the available screen space.

3. Prepare user flows and details of navigation

User flows are a kind of map, illustrating the path that users will need to take in order to complete a task in the product. This step is all about taking the hierarchy and structure we defined in the previous step, and transforming it into a defined navigation structure. At this point, we know everything the wireframe will need and how this content should be organized. Now, it’s all about making sure that users can use this structure to accomplish the main tasks needed.

At first, design teams will use shapes and short text to describe each step. Over time, as the team creates the app wireframe screen by screen, these shapes will be replaced with the screens themselves.

The main reason why user flows are helpful before we wireframe the app, is that they help us put information and navigation into perspective. In practice, by creating the user flows we start to understand how information should be organized and how many screens the product will need.

user flows for app wireframes

The more we invest in user flows, the better we will understand what dimension the app will need in order to deliver its main functionalities. This is a way of making sure we direct our efforts wisely when creating the app wireframe, allocating resources to create when needs to be created and not a single screen more.

The general goal here is to have an ultimate navigation design that covers all the content and delivers a good experience to users. This will include things like defining the primary navigation, ensuring navigation elements are well throughout and validating it all.

4. Include all the necessary information, components and content

This will include a close look at your requirements, as well as all the specific components that derive from those requirements.

For a practical but silly example, we can imagine an ecommerce app. The app wireframe will have to include things like a search feature, a checkout process as well as a viable navigation system for users to explore and shop. Without any of these functions, the app itself will fail in delivering a good experience to users. The sheer importance of these processes and components mean that we must include them in the wireframing stage of the app design.

5. Wireframe each app screen layout

By the time we start creating a digital wireframe, we want to have plenty of material to refer back to as we refine the design. Armed with a good understanding of our users and the product, we can start to create the bare bones of the app with an interactive UI wireframe.

First, most design teams choose to create a general layout in each screen. This is particularly important in mobile apps, because of how limited the available space is. Because we’re dealing with such a precious finite resource, we want to carefully divide the space in order to reflect the information architecture. It’s important to be mindful when allocating space to future components, never forgetting things like visual hierarchy and the gestalt principle of proximity.

highlights of wireframing app screens and layout

In a way, the layout is as much visual design as is needed in basic wireframes. This isn’t the time to worry about pretty colors and striking illustrations. The layout is as much visual as it is functional, helping us understand the visual balance between all the elements we need in that screen.

This is a good time to look at the content we’re dealing with. It’s rare to have the final content at this point in the app wireframing process. Content teams will often work simultaneously as design teams, which creates a need for placeholder content. Ultimately, real content works best in order to avoid surprises down the road when adjustments might mean a headache for everyone in the team. But of course, we do what we can with what we are given. Sometimes, placeholder content is the only option at this stage.

One important thing to remember when wireframing the layout is that we need to respect the design patterns of the operating system we’re designing for. We don’t need to create something clean and pretty for iOS, but we must respect the natural buttons that iOS users know and love. Fighting these established patterns is like swimming against the current!

6. Add the necessary interaction

It might be surprising to people to find that most wireframes do, actually, need some type of interaction. More often than not, wireframes are limited to static images that are presented to people using a powerpoint. Suffice to say that a static wireframe is far from ideal – an interactive wireframe can make a real difference in any project.

Interaction design can take many shapes, not all of which apply to an app wireframe. The point of taking the time to add interaction to app wireframes is to have the ability to carry out testing. This is all about investing just enough time and effort to create a navigation system that truly works in the app wireframe. You want the app wireframe to respond to the touch of users, making the navigation feel real.

example of navigation interaction in app wireframe

Something like the navigation design is simply too important to test later on. No matter if the app wireframe is a series of boxes and grey lines, you want users to be able to navigate as realistically as possible. This will make the test results more accurate, so you can validate the navigation early on. The same goes for certain aspects of the information architecture, using the app wireframe to validate things like the labelling system or the search system of the app.

For there, it’s about testing the design and slowly adding more details as we progress.

Best practices for app wireframes

Now that we’ve gone over the general process of creating an app wireframe, let’s go over some best practices. These are all general advice that should help you maintain a focus on what matters, as well as create a final app wireframe that represents a solid foundation for the product.

Respect the patten differences between iOS and Android

Unlike website wireframes, both iOS and Android systems have their own characteristics which we must respect. These design patterns tend to be respected by most apps out there, and it’s easy to see why. Users are used to their mobile devices, with their own styles and particular details.

contrast between system patterns for android and ios apps

The reason why it’s important to respect each system is that users are familiar with their styles. As any designer will tell you, users struggle to learn to use a new product for the first time. Sure, we do everything we can to make that first contact be as simple and effortless as possible – but there’s a learning curve to everything. That is a concept that we call learnability in the design industry. If we were to intentionally move away from the established patterns for iOS or Android, we’d be knowingly making the app more difficult to learn.

Instead, we should always adapt the design as much as necessary to each system. For iOS, it’s important to respect the Human Interface Guidelines established by Apple. You can find a more detailed view of these guidelines in practice in our post iOS app design.

It’s true that Android gives us a little more freedom with the UI design, but it also comes with its own guidelines for Material Design. You can find more information on our post flat design vs material design.

Don’t leave validation for last

Validation can sound like a bit of a stretch with low-fidelity wireframes. After all, can we really test and validate a bunch of grey boxes? The short answer is: yes. We can and should.

This is one of the single biggest arguments in favor of wireframes. Validating the app wireframe can help us understand if the design is headed in the right direction or if we’ve deviated from the right path. Like mentioned above, validating things like navigation and labeling are important due to the impact these factors have on the final user experience. The absolute last thing we want is to find that there’s a serious issue with the navigation design by the end of the design stage.

app wireframing validation and improvement

An app wireframe will offer some clarity on the progress made and validate the most important aspects of the product before we invest more time adding the details. With that said, it’s important to understand that these test results are to be taken with a grain of salt since users won’t be dealing with a truly realistic representation of the app.

Invest in a wireframe tool that covers everything

It’s true that app wireframes can be done with very little equipment. You could write all your design ideas down on several sheets of paper or create a wireframe with a bunch of static images – but that’s far from ideal. App wireframes start out very simple, but the entire goal is for them to grow and evolve into a more refined version of the design.

example of an app wireframing tool for UX design

Never forget that app wireframes also deal with crucial things like the ability to create user flows, to make the navigation of the app interactive and the need to test everything. That means that even if we stick to the simple low-fidelity approach, we’ll still need to add more advanced features to the wireframe in hopes of validating our decisions. That’s a big part of why you want to invest in a wireframe tool that allows for all of that, while helping the team keep track of everything.

The other part of why you need a good tool at your disposal is the natural evolution of app wireframes.

The natural evolution of an app wireframe

As most design teams will tell you, there’s a whole spectrum when it comes to app wireframes. Starting out in a simple paper UI sketch, they slowly make their way to a digital platform where we slowly add more details as we progress in the design. This means that over time, we tend to leave the low-fidelity approach behind and make our way to a mid-fidelity wireframe.

In practice, a mid-fidelity app wireframe is a version of the design that has all the basic pillars of the design already incorporated. Things like the information architecture, an interactive navigation system as a clearly defined basic design. This is the stage we want to reach, so we can validate these main aspects of the product. This is a milestone in the wireframing process, because from here on it’s all about refining the design with added visuals and details.

evolution of low to high fidelity in app wireframes

Which brings us to the high-fidelity app wireframe. THese types of app wireframes are known to be pretty complete, including things like the definitive content and images. This is when we want to take the time to incorporate all the small interactions, all the more superficial things about the app. The high-fidelity approach isn’t just about having the wireframe look like the finished app, but also behave like the real thing.

It’s important to have the pillars of the product validated before we start to add all these fine details, to avoid having to backtrack any of it. Time and effort are important and finite resources in any product design, making a solid foundation absolutely non-negotiable.

App wireframe examples to get you inspired

Sometimes, we just gotta see things in action. Let’s go over some good app wireframe examples that showcase how versatile wireframing can be. These are only a few examples, but you can find a lot more on our full list of wireframe examples to get inspired by.

1. Podline Podcast App Wireframe

Designer Fernando Aleta decided to create an app wireframe that gave podcasts a needed twist. He wanted to have an app design that encouraged users to not only discover new podcasts but also to create an entire community of listeners. It goes to show that the right structure can seriously change the user experience of the finished product!

low fidelity app wireframe example

2. Loan App Wireframe

Ryszard Cz was faced with a challenge that makes designers everywhere break a sweat: creating a design that is data-heavy. This app wireframe aims to make complex information more accessible, while at the same time improving the transparency of the entire experience. Notice that this wireframe is more high-fidelity, being filled with important details and using the real content.

example of an app wireframe that is data-heavy

3. Fitted App Wireframe

Michelle Lock wanted to create a fitness app that helped users settle in their new routine, focusing on the app’s key functionalities. This is a wonderful app wireframe example, because Michelle took the time to create a brief case study about the design. This is a good opportunity to see what the challenge was, her approach to it and the resulting high-fidelity wireframe.

fitness app wireframe example

4. Perfect Properties Wireframe

Frank Mojica also created an app wireframe with an accompanying case study. This time, we have an app design that tries to help users to find properties of interest. We love that Frank even provided us with the user persona and user flows, which is helpful in understanding the design decisions in the wireframe. This is a great example that showcases the importance of pre-wireframing materials, as well as the impact they have on the final design.

real estate app wireframe example

5. Event App Wireframe Flow

Lastly, we have another interesting app wireframe example. Brought to us by Javier Oliver, this example shows us the natural evolution of an app wireframe. Starting out with a low-fidelity wireframe that focuses on the distribution of space and functionality, we see the transition to a high-fidelity wireframe that looks like the finished design.

example of app wireframe for events

The wrap up

App wireframes are such a stepping stone in product design. They have the power to make your ideas tangible, and lay it all down in a straightforward way that will keep you focused on what matters at this stage.

App wireframes will show you exactly what the structure you created looks like, how your navigation holds up against usability tests and where you have room to improve.

Regardless of if you have a large team of people or if you’re a stand alone wireframing warrior, wireframing apps is the surest way to eliminate usability catastrophes. In taking a little extra time and investing some real care, you can reach the finish line with a sound mobile app that will grab users’ attention and deliver an experience they can enjoy – no matter what device they use.

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS
Rebeca Costa
In-house writer, usability enthusiast and patron of all sleep-deprived designers