If you want to build a mobile application, the first thing you have to do is design the user experience and user interface of the application. We need to make sure users are going to have a good time on your application. To do that, the first thing is to create great wireframes or layouts for different parts of your mobile app. These wireframes come after designing the user persona and the journey map in the user experience design process. We need to create a lo-fi wireframe first to take out all our ideas on paper.

In this article, we will go through all the steps for creating fantastic wireframes for your mobile app.

Create your Target User Flow

Let’s assume you already have a picture in your mind of what you want your users to achieve. Now it’s the time to become clear on those ideas. The first thing you have to do is design a user flow that shows exactly how many pages your mobile app is going to have. It looks like you are sketching out all the steps your users will go through to achieve something. This helps you plan out what you need to create in your mobile app wireframes. It does not have to be linear. You can give users several choices in your app. Your user flow map will look like something like this.

Choose your Mobile Frame Sizing

You want your mobile app to look good on a variety of mobile devices. If you create your wireframes for a mobile app on only one phone sizing, lots of elements will turn out to be hidden on small devices. Likewise, lots of empty space may exist on larger mobile devices. You need to take at least 3 models for the frame sizing to make sure you’re taking everything into consideration. Start with the middle sizing. For example, look at the image below. It shows the wireframes created for the Gmail mobile app on 3 different screen sizes.

Start Sketching out Boxes

In this step, you don’t need to focus on any kind of content. You should only focus on the order of things you want to present first and last. Use boxes to create placeholders for the different sections of the app. For this purpose, you might need to research the patterns that users scroll through content on apps. This is based on your industry, your target audience, and the goals of your application. You can see as an example how the visual hierarchy is presented in the example below.

Templates, Patterns, and Kits

Next thing you want to do, is replacing all the boxes in the lo-fi (low-fidelity) wireframes with familiar icons and patterns. There are lots of resources on the internet that allow you to easily drag and drop the components in the boxes from the previous stage. Starting with Figma, you can access lots of community-made kits and patterns. You can use Figma’s official kits, or this Lo-fi wireframe Kit made by Dave Whiteley. Below, you can see an example of these kits.

Replace Placeholders with Actual Texts

In the next step, all you have to do is replace the placeholders for text and buttons with actual texts that make sense. This means, that for the text boxes, you can start with Lorem Ipsum. For the headers and titles, you can go with similar content to what you have in my for the app. After that, something like the image below will be the result.

Create Flow Between Pages

Now, all you have to do is connect all the pages you created with lines and arrows. This has two benefits:

1. The UI designers who receive the wireframes afterward and other people will easily understand the logic behind the UX design.
2. You can see if there is a need for an extra page in-between two pages. You might realize that it would help the user experience if an extra page was there.

At the end, you are delivering something like below, but with more detail on the content boxes. These lines and arrows help you create something that we call a wire flow.

Conclusion

Creating wireframes is an important stage in UX design. You need professional wireframes created so your users will feel comfortable. We explained the 6 steps of creating good wireframes for mobile apps in this article. If you still need consultation, research, and support for your mobile app’s UX design, you can refer to our professionals at PengYi Labs to provide you with them. You can also read more on our website how we handle the UX design process. Thanks for staying with us!