THE ULTIMATE GUIDE TO CREATING MOBILE APP WIREFRAMES
App design goes through many stages, from conception to mockups to finalized UI, but it all begins with wireframes. A wireframe is a rough sketch of how you want to fully realize your product in terms of a visual layout. It’s about placement, navigation, and defining the user journey at the earliest stage possible. When designing mobile app wireframes, it is important to get a sense of which features will be included and layout placement and how they interact with one another. A wireframe is not a UI bible, but a jumping off point for product design.
Our expert design team begins almost all wireframes in a little program called Sketch (we will get to the exceptions later), but there are many ways to wireframe. Launch’s approach is what we’ve found to work best for a team of mobile app developers who work in tandem with clients to achieve a cohesive vision. Regardless of whether you are designing an app for yourself, a client, or as part of a design team, this is Launch’s ultimate guide on how to get started on creating mobile app wireframes.
USE FAMILIAR TOOLS
The requirements of your wireframe depend on the scope of your project. If you are working alone — or with a small team — wireframe first drafts can even be sketched out on a piece of paper. But as general best practice, it’s important to create a wireframe that can be easily shared between designers, developers, product teams and various stakeholders. Create documents that won’t get accidentally lost or deleted — this is the starting point of your project, without it, you’ll lose your core foundational ideas.
Four years ago, Launch was using Photoshop as our main design tool. That was a bit like using a tank to make a painting. It wasn’t quite the right tool for the job. While it’s possible to do UI design in Photoshop, the program was built with so many other functions in mind and wasn’t as refined for UX design. Photoshop lacked the feature set we truly desired. Luckily, Sketch came along at the right time.
Today, we use the Sketch desktop app to easily share ideas with our team and clients. The UI and UX design tool is a quick and easy default that all our designers are well versed in. Sketch way more advanced than any other program when it comes to handling design systems, icon assets, and exporting to Flinto and Principle (which we use for prototyping).
Other agencies often use third-party apps to share their designs with their development teams. At Launch, all our Android and iOS app developers have Sketch, which lets them clearly see our design decisions and logic. This is the best way to achieve full transparency as early as possible when creating mobile app wireframes.
However, at the end of the day, the right tools for mobile app wireframes are the ones you are most familiar with. The best program for you is the one that suits your situational needs. For example, with certain projects, we are beginning to use Figma. Figma is a browser-based interface design tool that focuses on simplicity and transparency. Simply described as Google Docs for design, Figma lets all team members edit one file at one time, offering the opportunity for real-time feedback and comments. This is beneficial for our international team of app designers.
THE BASICS OF MOBILE APP WIREFRAMES
When starting off for the first time as a novice designing wireframes for mobile apps, there are some basics you need to know.
MAKE SURE YOU ARE WORKING IN THE CORRECT CONFINES
When wireframing for iOS, for example, (but the same idea applies to Android), you must set up your Sketch or Figma artboard to the most commonly used interface size for the platform, i.e. iPhone 8/iPhone X.
Use the standardized sizes for all your design elements. Use standard iOS fonts, in the correct sizes (15 and 17 pt). You don’t want to use small, unreadable text or cut necessary text if the font size is too big. This applies to designing buttons as well — they all must conform to the platform standards.
These small, early inclusions allow you to get an idea of how the experience your wireframing “fits” within the standards of that platform, in a clear and legible manner, with reasonable tap target sizings.
CONSIDER EVERY POSSIBLE USER CHOICE
Plan out each interaction in your wireframe, where any given action will take the user next. It’s easy to design core sections. What’s difficult is figuring out how to show each success and failure state, how to display forms (where you need a keyboard to pop up), and mapping out the multiple paths users can take to other screens. This type of thinking is what wireframes are for – the further into the design process you are, the more difficult it becomes to address these issues and adapt.
DON’T WORRY ABOUT AESTHETICS IN YOUR WIREFRAME
The worst thing you can do when wireframing is take too much time, be overly meticulous, and try to get everything to perfectly represent the end product. Even if you create the ‘perfect’ wireframe, design hypotheses and goals will change throughout the project. The goal of a wireframe is to approximate at an early stage what the minor and major features of the app will be. If you nail this aspect, the rest will come naturally.
Visually, we recommend wireframing in greyscale. Trying to pick branded colors is too time-consuming this early in the process. You shouldn’t stick to a single shade— for example, you can employ the use of 100% black for an important button, versus 50% black for a tertiary call to action. This use of contrast at an early stage is incredibly valuable for dictating the user’s visual journey, and where their eyes are drawn. It is occasionally acceptable to use primary colors like green or red to indicate success and failure states, but don’t go overboard with using color.
Don’t spend too much time on working on custom fonts when creating your mobile app wireframe. When we design UI in Sketch or Figma, we just use the system default fonts. This keeps the wireframe focused and the text readable.
The point is to not distract clients, developers, or whoever you are sharing your wireframes with, from the user journey. It’s easy for clients to get tied to a color or design that you used in your wireframe, and that could make hard decisions even more difficult further down the line. The purpose of mobile app wireframes is to lay the foundation of user experience – any branding, color schemes, or font work should be saved for later.
KNOW WHAT IS NEEDED FOR BIG AND SMALL BUSINESSES
At Launch we iterate on apps for enterprise businesses like MGM and Verizon, but we also take on smaller startup clients like KeyMe, and build their mobile experiences from the ground up. Each approach requires a different style of wireframes and app design.
Mobile app wireframing for larger, enterprise apps is like building a 1000 piece puzzle. A larger client will already have an existing user base and business strategy, and by extension, a greater focus of your app will be to deliver ROI. Enterprise solutions are also often more technically complex. You will be working with a laundry list of demanded features, client expectations, backend APIs and service integrations. Wireframing is how our app design team figures out which features can tie into one another, and where we begin to visually prioritize the feature set.
Startup apps are the projects where we get the chance to build an MVP. This is a more iterative approach where we can start simpler and build out as we launch frequent updates. For smaller apps, where the creativity of our solution might be the differentiator in that competitive landscape, we can immediately start experimenting with various interaction concepts. The focus of the early wireframe is smaller in scale, features, and stakeholders, but we still need to put just as much effort and polish into the wireframe to create the foundations of the user journey.
Many of our clients, like Warby Parker, QuizUp, and Greatist, are startups that already have established branding and customer expectations. It’s most important to emphasize that every project is unique and we like to take a personalized approach to every client. While working on wireframes, it’s best practice to do the same and avoid a one-size-fits-all methodology.
HOW TO PRESENT MOBILE APP WIREFRAMES TO CLIENTS
Our approach to preparing for client presentations is simple. If you have been designing a project to the point where it is presentable, you are aware of the user journey. The presentation is about walking clients through the wireframe while being able to clearly articulate your design decisions and give reasons for why you made that choice over the alternatives. We want to be able to justify each decision, down to placement and size of buttons, where we put text, and any other user experience decision we have made. Our designers need to understand every nitty gritty detail of a wireframe in order to convey that to the client, and you should too -— that’s where the best product design happens.
When meeting with clients, we share simple wireframes through InVision Boards and more complex, clickable ones through InVision Prototypes. InVision is a design collaboration tool for setting feature and design hierarchies that allows for commenting so we can get client feedback. We also use InVision Boards to share within Launch to our Marketing and Account Management teams. This is a great tool for wireframe presentation because it is a standard and linear format – which is perfect for demonstrating user journey.
WHERE DO WE GET INSPIRATION FROM?
Yes, we have our fair share of industry knowledge (everyone on the design team has been working in mobile for years), but sometimes we need to look elsewhere for inspiration. Here are some of the places we love to look for design inspiration, and where we would point any novice designer to start.