Knowledge Base Articles > Wireframing Mobile Applications
The process of wireframing mobile applications is similar to that of wireframing websites, but there are some key difference to be aware of. There are different terms and design patterns, and new modes of interaction. If you are creating a native app from an existing web product, you will have to translate an experience where the user uses a mouse and clicks around to one where they can tap, swipe and pinch-to-zoom to navigate. Not to mention that you’ll have less space to work with!
Most users are already familiar with design patterns that are unique to phones. Swiping left or right to navigate through a photo gallery, for example. It’s important to leverage this knowledge and use established patterns while designing your mobile app.
I’ve worked on mobile products for many years now and love the challenges that it poses for UX designers, but it took some time to find my footing, coming from more traditional web design projects. In this article I’ll outline some things I’ve learned in order to help you transition from web design to app design.
Before diving in let’s take a moment to learn a bit about what makes designing for mobile unique.
Even though web design and app design are pretty similar, there are differences in how apps are developed, and that brings with it different names for some UI elements. It’s helpful to understand these terms when starting to wireframe because it will allow you to better communicate with the development team.
The first thing you need to remember is that when designing a mobile application you aren’t designing pages, you are designing screens.
Beyond that, here are some common mobile design elements you should become familiar with.
When I started my first native mobile app design project, I designed it too much like a website. While testing the first prototypes it just didn’t feel right. It wasn’t a smooth experience. I hadn’t done much competitive analysis or research, but just dove in with my knowledge of using apps for years and designing countless websites.
I then took a step back and luckily stumbled upon a few web sites that focused solely on presenting native mobile application design patterns. Seeing how different apps used similar patterns opened my eyes to the issues I was experiencing with my app.
Design patterns are common in every type of design. They are similar to content blocks; they’re reusable and you can mix-and-match them to build your app. Look for some links to my favorites at the end of this article.
As I mentioned earlier, when you design for a native mobile application you have more possible types of interactions to work with. Here are a few commons ones to consider.
Tap and Double Tap - Pretty much the same as clicking with your mouse.
Swipe - A swipe is used for scrolling up or down long pages. Also for deleting content in a list.
Flick - A shorter swipe of your finger. Think of swiping through images on your phones photo library.
Press and Hold - Press and hold interaction is most commonly used to rearrange apps on a phones home screen. Think of it as an interaction that allows for initiating other actions.
Pinch to Zoom - This was a very novel interaction when introduced by Apple. It allows users to zoom in and out of images by pinching two fingers together or away from each other. It has now become ubiquitous as a way to interact with images on touch screens.
There is also 3D Touch, where the device can detect the level of pressure your finger is pressing and activate different interactions based on that pressure, but it is not supported in all apps or on all devices.
Before creating wireframes, it’s good to start your project by creating a screen tree and/or user flows. These will serve as a guide to help you figure out what wireframes you’ll need to create and how they should be connected.
A screen tree is the mobile equivalent of a site map. You can create one in Balsamiq using the site map feature, or simply use a pencil and paper and sketch them out.
User Flows are a way to break down each task or goal you want your users to accomplish in your app, while highlighting the alternative paths they can take. They make it easy to validate if the path you’ve created allows the user to complete their task. User Flows may not be linear — they typically contain decision nodes, paths, and loops that show all possible interactions with the product.
With a screen tree or user flow in hand, you’ll have a list of the wireframes you’ll need to create. You can start by creating placeholders or very basic wireframes for each and then adding detail as you iterate and develop your content and templates.
The navigation structure of your app is really important. This is where a lot of first-time app designers struggle. I know I did. Applications are not like websites. There isn’t a top level navigation with easy access to pages. You have to design a clear and simple path of how to get around and get back to the beginning. You should spend a lot of time designing and testing the flow of your screens to make sure it’s logical and easy-to-use.
The best way to know if your navigation works well is to create clickable prototypes by creating wireframes for a user flow and linking them together. Linking together static pages is fine at this point. You are simply testing how it all flows together. You don’t need to add the ability to swipe or long press yet.
Test it. Does it feel right? Show it to other people and have them navigate your app. Does it makes sense to them? This is easy to do and may have a big impact on the usability of your app. Working on the navigation early in the design process will save you headaches and complaints from users later.
As you can see in the diagram above, there are lots of different screen sizes just for iPhones. The same goes for Android, which has multiple device manufacturers, all with different size options.
But don’t worry too much, because both Apple and Android have created ways to help make applications work on multiple screen sizes automatically. It’s similar to developing a responsive web page. It’s not perfect, but it means that you won’t have to create a design of every screen for every screen size. Just be sure to check your design on a few different screen sizes during development and make any necessary changes to the UI.
Understand how the content will layout on each size. Smaller phones will not show as much, and larger phones will show much more! Make sure that you don’t have important information cut off from the smaller size, or become less prominent with the larger format.
Finally, try not to worry too much about making the design perfect for every device size. If you have access to analytics, find out which device sizes are most common and target the best experience for it. Be sure that it works for the rest, though.
That’s it! I hope you feel more prepared for your next mobile app project. I have included some resources I found valuable through my journey of creating mobile applications. Best of luck and happy wireframing.