Mobile 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. Fueled’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 Fueled’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, Fueled 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 mobile app 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 Fueled, 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 you’re 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 Fueled 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 Fueled 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.

Dribbble is historically very important for us to view what other designers are doing and share our own early UX design ideas with the design world. It’s become a little bogged down as of late, however, and we are more into pttrns.com now, a site that lets us see flows from screenshots and mockups. We often use cssdesign.com and siteinspire.com to get our creative juices flowing.

We are also very active in design circles on social media, especially Twitter. Many members of our design team met on Twitter, so if you are a young designer it’s important to put your work out there as much as possible. You never know who might meet!

Use Mobile App Wireframes As A Reference, Not A Bible

At Fueled, we take these Sketch wireframes into an interaction tool like Flinto, or Principle and test how the product should feel & transition. These richer, higher-fidelity prototypes are excellent for quickly moving from the wireframe stage into development and are key to getting a tangible feel for the app.

Wireframes are great for estimating the proper budget and time that will be dedicated to features. Once a wireframe is complete and you are moving on to mockups and visual design of the app, the wireframe does not need to change. This doesn’t mean you can’t make improvements and find new solutions to your original hypothesis, but it does emphasize that app design is a continual process where each current prototype impacts your next design draft.

Mobile app wireframes are a great reference point for the next step, but app design is iterative. Each step is evolving from the last and a solid wireframe provides a great jumping off point.

Every app we’ve designed has started with a wireframe. Check out our portfolio to see just how far they’ve got us.