How to Create a Wireframe for Your Mobile App?

Prototyping and wireframing are the essential parts of any software development. It gives you a view of the product without any distractions, so you can clearly see its user flow and optimize it if necessary. Not everyone knows how to build a wireframe for an app correctly, but it’s risky to skip this stage.

However, in our prototype-or-die world, a wireframe for apps is a kind of a stepson, whose role in the design process sometimes remains ambiguous even to the fellow design squad. Let alone the purpose, even its look often leaves clients asking questions.

A typical wireframe

What is wireframing?

Not a rough sketch drawn hastily on a piece of a napkin (inspiration never waits for the right time to come), not yet a full-fledged prototype. Plain, gray-colored, with Lorem Ipsum instead of text and crossed rectangles instead of images, just a simple template of an idea created from scratch. No wonder the value of a wireframe is not so self-evident. Neither is it clear how much time and expertise building a wireframe actually requires.

We at Yellow never skip the stage of wireframing when we start a new project. As true advocates of wireframes, we believe that they do and will remain a powerful and efficient tool for refining concepts, experimenting, testing and gathering user feedback at the earliest stage of product development. You'll have the chance to see it for yourself in the coming chapters of this article.

However, our clients are usually not so enthusiastic about wireframes as we are.

This is what discussing a wireframe with a client is often like.

 

Basic is a very proper word for a wireframe, although many would probably use it with a negative connotation, as in the case above. Actually, the dialog above uncovers the major reason why wireframes are so underestimated; it's the absence of "decorations." It turns out that app design wireframe, for example, doesn't have the whole "design" party, and that makes people think that the stage of wireframing is optional in the development cycle and can be safely skipped for the sake of saving time and money.

However, wireframes are not about beauty. Their primary purpose is to show what underlies good design and animation: functionality, information architecture, user flow, and navigation.

One may think of a wireframe as of a backbone. Just as the backbone holds together muscles and tendons, giving a human's body strength and structure, a wireframe outlines the app's interface, focusing on how it will function rather than on how it will look. That's the reason why wireframes are so basic: Unnecessary beautification only distracts attention from the essential components.

Stemming from the argument above is a typical question clients often ask us. Why is creating a wireframe so difficult then? Why does this "basic thing" require so much time and effort, and—what is even stranger—the whole group of professionals?

The answer is as simple as the creation of a mobile app wireframe.

To create a wireframe is to create a product.

Sure, there'll still be a lot of engineering ahead, but given proper rigor, the skyscraper is usually not much worse than the blueprint. That's why it takes a truly holistic approach to make a wireframe for an app, web page or software—the one that requires understanding business, technology, marketing, user experience, and what's the hardest—everything in between.

Wireframes vs mockups vs prototypes: What’s the difference?

Besides wireframes, there are at least two more design concepts that go before the development itself: mockups and prototypes. It’s easy to confuse them, especially if you are not familiar with software design. We want to clear up and differentiate these notions for you.

Wireframes

We already described what wireframes are. They are drafts of main screens that show the most crucial elements of the app. They can vary in the number of details, but it’s still only a general conception that has almost nothing to do with the visual decorations.

Mockups

A mockup is more complex than a wireframe. It includes some visual elements that will help you understand what the app is going to look like. For example, mockups can include fonts, button shapes, main colors, and rich images.

Prototype

When mockups are finished, you can arrange them into a prototype. A prototype is an interactive model that gives you the ability to feel how your app is going to function. IT may not look like the final version but it should be close to it.

Now, when the concepts are clear, let’s go back to wireframes.

Main types of wireframes

Even though all wireframes service the same goal, not all of them are the same. Their main difference is the level of detail. We can divide wireframes into three main types: low-fidelity, mid-fidelity, and high-fidelity.

• Low-fidelity wireframe: These wireframes are the most simple and basic. They illustrate the general concept of the app and include only minimalistic shapes, blocks, and content. It’s a perfect way to start the brainstorming or to sketch something for the investors right away.
• Mid-fidelity wireframes: They still don’t include a lot of details but are not as rough and simple as the previous type. Mid-fidelity wireframes can include text elements and some visuals and they already have the right content spacing.
• High-fidelity wireframes: High-fi wireframes have the most pixel-specific layouts. They consist of even more detailed images and unique texts. They are the most valuable for further product design stages.

Benefits of wireframing a mobile application

As we already said, to create a wireframe is to create a product. It may seem a bit too much to say, but such a statement has a solid background. Here is why your application needs a wireframing stage.

You will have a clear vision. Wireframes help you and your team understand what you are going to build. They will know what features to include, where to place the buttons, and what text and images should be prepared.

You will avoid mistakes. Wireframes allow you to see the backbone of your product and iterate the hierarchy of content before starting the main development process. This is a good way to create several variants of your potential app and choose the best one. It will save you from major changes during the development.

You will save time and money. If all the mistakes are spotted and fixed on wireframes, they will not be transmitted to the code, so in the long run, you will avoid additional time and money spendings. Coding and content creation will be easier and faster, and no extra money will be spent on major changes.

What does it really take to create a wireframe for a mobile app?

Our team is an advocate of wireframing and we apply it to every project we work on. With the help of our experience, we created a simple strategy for building wireframes. Here are the steps we advise you to follow.

1. Understanding the audience

The biggest mistake most clients are prone to is associating their own needs with the ones of their users. No doubt, there is a huge temptation to think that all people look at the world through the same lens. However, it's a sure way to fall into a trap of empty assumptions.

To eliminate guesswork from the development process, we encourage our clients to get to know their users better and figure out if the future product is what they really need. Wireframing helps a lot with the task as it has proved itself to be one of the greatest tools for testing assumptions.

Why show wireframes to potential users

Showing wireframes to potential users for review and comments is the easiest and quickest way to validate a product concept. From the way users interact with the product wireframes, it becomes clear if the app-to-be is going to spark interest among the target audience, or if it's able to deal with the user problem in a manner.

Besides, wireframes can be further used as an unflagging source of usability insights. As users don't get distracted by their design, they focus on the layout, functionality, and navigation in terms of convenience and ease of use, providing the engineering team with detailed feedback on the future app's usability. During further iterations, the testing—getting feedback—refining cycle is repeated up to the moment when the users' pains are fully covered.

That's the algorithm we proved when brainstorming ideas for our own product. Therefore, here is an example of how wireframe app development can save the day.

2. Understanding the market

Along with studying users, wireframing an app also requires thorough market research. Sometimes, in an aspiration to bring the product to life asap, clients tend to ignore the real needs of the market, while wireframing encourages to constantly keep an eye on them.

While validating ideas for future projects (software, websites, apps—whatever), you'll inevitably have to keep up with the market trends while also asking yourself a bunch of critical questions. Has the problem ever been tackled before? Was it successful? If no, why? If yes, are there still issues uncovered? And the most important one—if the problem hasn't been tackled, does the market for a future product truly exist?

Finding answers to the above questions allows identifying if there is a market niche for the future project. And if it turns out no, pivoting towards an unoccupied niche at the wireframing stage is a no-brainer compared to the major upheavals that may follow at the later stages of the development cycle.

3. Experimenting

Finding the right concept for the product always takes time and effort, and the first idea coming to mind is not always the best one. Besides, the market is flexible and changing all the time. That's why we should always be ready to experiment—read: admit that our assumptions are wrong and act accordingly.

A wireframing stage is perfect for experimenting as it imposes no restrictions on the team. As we mentioned in the previous chapter, testing, refining and rejecting concepts at the wireframing stage costs literally nothing compared to the cost of making even minor changes to the functionality during the engineering phase. Therefore you can try any ideas that come to your mind until the right one is found.

4. Simplifying

The golden rule we encourage our clients to stick to is "one app—one key feature." Adding more features to the app after its core functionality has been defined sometimes makes the app worse. Sounds like a paradox, but good products are often so good because they DON'T include many things.

Wireframes help keep this argument in mind. How to wireframe an app which has a list of "the main features" that is larger than Santa's list of both nice and naughty children? The austere design of wireframes encourages the accurate prioritization of the app features and content. It helps to concentrate on essential things first and, as a result, avoids overloading the app with redundant functionality.

5. Managing budget

While wireframing itself doesn't require massive money injections, it's literally the best investment at the project start. First and foremost, it helps outline further development stages as it allows to estimate how much money and time each stage will take, and what technology and design kit will be required throughout the development cycle. At the same time, in case you have to deal with strictly fixed funds, it helps fit the future app into the existing budget by means of well-calculated trade-offs.

Tools for designing a wireframe for an app

Depending on the type of wireframes, you can use various tools for creating them. When you want to create a low-fidelity wireframe, you can use only pen and paper, and it still will be valid and useful.

For more sophisticated wireframes, it’s better to use software tools. The possible solutions include:

• Balsamiq Mockups. It includes drag-and-drop elements and a set of templates for creating simple wireframes.
• Sketch. This is an efficient wireframing tool with vector editing and the collaboration feature. It supports a lot of plugins, but it’s not cloud-based.
• Zeplin. Created as a tool for collaboration, Zeplin offers its users sophisticated editing capabilities and useful integrations with other services like the above-mentioned Sketch.
• Figma. Figma is an all-in-one tool for designers. It allows real-time collaboration for multiple people. Creating wireframes and prototypes has never been so easy.
• Photoshop CC. It may not be the best tool for wireframing, but with its help, you can create basic screens in no time.

There are more tools to complete this task that you can choose from, but these ones are the best solutions on the market.

What kind of team is required to create a wireframe?

Wireframing indeed requires thoughtful teamwork, which can't be simply boiled down to a designer's responsibility. So we at Yellow involve a whole bunch of professionals in the process:

• Designer—for visualizing concepts
• CTO—for making sure the concept is feasible from the technology perspective
• Product manager—for putting everything together and identifying bottlenecks
• Product owner—for getting insights into the client's wishes, local market, local budgeting, etc.
• Business analyst—for identifying user pains and turning them into business goals

Yellow's case study: Stickerbox

When we just started working out the concept of Stickerbox, we weren't sure long enough what the app should be. It took us several wireframing iterations to find ourselves on the right track.

Our first assumption was that users would like to make fully customized stickers out of their photos. That's why the earlier versions of Stickerbox included the functions needed to tweak every little detail.

However, as we further tested the app wireframe with the real users, it turned out that they didn't want to spend their time staring at the screens of their phones and trying to make the "right" decision; they were fine with the options offered by the app. Since we discovered that, Stickerbox as we know it now has been officially born.

Screenshot of a Stickerbox interface: before and after

Conclusion

As you see, wireframing is indeed a complex process, the value of which is not always clear at the first sight. Only after we've gone through all the stages of creating wireframes with clients do, they also begin to see the true value behind them.

The rest of the dialog

Wireframing is a big journey, but the good news is that in the end, you'll find yourself with a perfectly polished concept that is very likely to take off. We think this makes wireframing worth every minute and dollar invested in it. Do you?