What wireframes are and how important they are for a project
If you want to build a house and tell the builders you need a two-story cottage with a red roof, chances are you won’t get what you have expected. I mean, it will be a two-story house with a red roof but perhaps with a bathroom in the wrong place, too small a bedroom, and misplaced windows. It might happen because, at the discussion stage, no one developed a blueprint, arranging all the rooms, doors, and windows.
App wireframes are blueprints in the app development world.
A wireframe is a rough structure of a future page or screen.
They usually have just one color and shades and no details like images or text. That’s because the purpose of app wireframes is to visualize content blocks on a screen and show the flow between the screens. In other words, wireframes convey the application logic.
Creating wireframes is one of the most important steps in app development. To understand its role, let’s dive further into the workflow. Let’s say, we need to develop a mobile application. Before getting to work, a Purrweb project manager talks to a client and passes the ideas on to the team. The team then proceeds to UI/UX design. This process goes like this:
Negative design references. Designers normally ask their clients for examples that they like. In our experience, such an approach can do more harm than good: designers put themselves in a box by relying on good references too much. This is why we collect negative references at the very beginning — to understand what is acceptable in web or mobile app design and what is not. This leaves us with much more creative solutions to choose from.
Mind map. At this step, we develop the entire application logic — use cases and navigation. A mind map tells us whether it is possible to implement all the client’s wishes. It also helps the designer immerse into the project and understand the concept better.
It takes about 10 hours to find negative references and build a mind map.
Wireframes. By this point, we already have all the information: a general understanding of how the application should work, all the needed features, and the content. While working on wireframes, UI/UX designers plan for the size, composition, hierarchy, and navigation of the whole app. Besides the fact that wireframes help to imagine the future screens, they serve another important purpose. Just by looking at them, you can see if the content hierarchy is consistent and if the structure is logical. Wireframes are unsuitable for full-fledged user testing, but they give the first impression of the app’s usability.
Wireframing takes about 20 hours. It depends on the project’s complexity — the more features you require, the more content and screens will be there.
Design concept. It is a set of screens that visualize a user journey through the app. Usually, something you can interact with. For example, a concept for a taxi app will describe an order flow, from search to payment. The client should approve the idea, and if they accept it, we design the rest of the screens accordingly. This step also helps save time and minimize the number of iterations. If the client decides to change something here, it will affect 10-15 screens, not all 100 at the final stage.
Dev-ready layouts. As soon as the client approves one user journey, we can finish the rest of the screens. Once we have the “skeleton” of the design, the wireframe evolves as we add approved visuals. Also, at this step, we prepare a UI kit for the developers.
If you skip wireframing, you risk missing what contributes to good UX — the logic behind the layout of screens and content blocks. The visual part is important, but if you make a spectacular UI and do not pay due attention to UX, it’ll result in a poor user experience. They won’t be able to appreciate the features and won’t use the application. This way, its launch cannot be a success.
They say wireframes are dead. Is that so?
Many startup owners think that wireframes are a waste of time and that you should move on to concepts right away. They argue that these schematics provide little information and that the designers do not need wireframes to create a detailed mobile app UI design. They can manage perfectly well with mind maps, can’t they?
App wireframes do contain little information — just like any other outlines. Why are they still important? The thing is, at the wireframing stage, a client can completely change the idea and the direction of the future project. It will not cause substantial time and money losses. But if you make changes at the point where you have a finished prototype, which takes much more time to prepare, the project timeline will increase, and the costs will grow.
Another reason why startup owners criticize wireframes is because they view wireframes as a part of paperwork. They think the team will refer to wireframes in case of change requests or any deliberation at the final stage of the project. That means that the designers will be able to appeal to the documented wireframes and deny any fixes, because — well, here is the wireframe, everything is in line with it! But in fact, a wireframe is not just a formality, it has real benefits for the development process and serves as a basis for any future work. If the agency has not established communication with the startup, doesn’t want to make any changes, and cannot reach an agreement, it’s time to ask yourself whether these experts are any good.
Does it ever happen that wireframes are unnecessary?
Can you do without wireframes in app development? Yes, but the risk of getting an unsatisfactory result will increase. There is a chance that everything will be fine, and you’ll have an application favored by your client and users alike. But the said chance is significantly lower than the opposite.
It’s much easier and faster to fix or improve wireframes, and fixes and improvements are an integral part of any project. Therefore, if you skip the wireframing part, the project budget will run out faster. You might not be able to meet the deadlines or end up implementing only a part of the scope.
The cost of edits only grows with each subsequent stage of development. If you skip one of the stages, it will take more time and money to change anything.
The more complex the stage of product development, the longer it takes to make changes
But in some cases, you don’t need wireframes, and they will not affect the final result in any way. For example, an already existing app that only requires fine-tuning and some improvements. In such a case, the designer does not redraw any visuals but simply moves buttons or icons around, resizes them, and rearranges the blocks on a page or a screen. It’s possible to do it all on the original web or mobile app UI design, so the cost of changes is small.
When a client wants to add a new feature, we usually don’t make wireframes. In creating new screens, designers rely on pre-existing visuals. This is true when new functionality doesn’t require new application logic or user scenarios.
In rarer cases, an application is so simple that user scenarios make sense without wireframes. So you can also manage without a “skeleton” of the app. For example, in rental applications everything is quite simple, there is a standard scenario that most applications on the market use. If you think that no one needs such “trivial” apps, look at our case study of the app for the London real estate market.
Those who urge abandoning the wireframes suggest an alternative — for example, a rough color sketch on paper. This option has a significant disadvantage: you cannot show it to the customer. Only those who work on the project can interpret it. Therefore, your vision of the project can conflict with that of your client, and you’d get a bunch of edits back.
What makes the wireframes so special that no one can give up or replace them? Now, let us tell you.
Benefits of wireframing
Besides getting feedback from the client, wireframes are a great teamwork tool. They combine and visualize the ideas that emerge in the mind map development, bring clarity, and determine the next steps. You can compare wireframes with a cooking recipe they use in a restaurant — all chefs and assistants follow it so that the dish turns out how their guests expect it to be.
Wireframing also has its advantages for the project in general:
1. Speedy design process. Since a wireframe does not require elaborate visuals and much detailing, the client gets a rough outline of the main blocks in a very short time.
2. Focus on the major issues. App wireframes have almost no details and so, the client can focus on navigation and content hierarchy. As a result, the team receives clear and understandable feedback. It encourages further work, without discussing colors and images.
3. Big picture. App wireframes highlight the important features that were laid down at the analytics stage. It also helps to get rid of unnecessary parts. For instance, you can see if the user actually needs that extra screen for feedback or a support chat that pops up on several pages in a row.
4. Fewer risks. Designers use wireframes to track down weaknesses in the application logic and fix them quickly. For example, some user paths might be inconvenient, confusing, or way too complex. You can identify and illuminate such things at the wireframing stage.
5. Saving time and money on edits. Before the designers draw a full-fledged mobile app UI design, it is much easier to make changes. Wireframes outline what the screens might look like, but one can edit and improve them on short notice — whatever the client wants. If they make changes at a later stage, you’d have to redesign a prototype. This would increase both the delivery time and the budget.
What I like the most about wireframes is that they greatly reduce the time spent on project design in the early stages. We don't spend hours selecting a color palette, typography, UI kit, and patterns. We focus solely on the structure and logic of the app-user interaction.
The finer points of wireframing: Purrweb experience
There are two types of wireframes: lo-fi and hi-fi. Lo-fi or low-fidelity wireframes are rough sketches of future screens. They indicate where the picture will be by some symbol, for example, a square with a cross inside. There is no content, text, or icons in lo-fi, it only contains the main blocks with spacing and buttons.
Hi-fi is a high-fidelity plan that contains icons, titles, and small control elements. The level of details may vary, but compared to lo-fi, it gives a more accurate idea of the content.
Most wireframes are static and designed as a collection of screens. For illustrative purposes, we also use smartphone mockups:
There are two ways to develop wireframes: on paper by hand or using special apps. A sketch on paper can also be the first step in creating a “skeleton” of the app, which is then transferred to graphic editors.
Purrweb designers deliver the wireframes in digital form since they are better perceived this way. Also, layouts drawn in a graphic editor look “cleaner” and more presentable. To create wireframes, we use Figma, where each team member can work on the same project in real-time.
You can combine the screens into a single prototype and make them clickable. This is how our interaction with the wireframes becomes as close as possible to that with an actual app. You can switch between screens by tapping on them and evaluating their consistency. Does the registration form pop up after the user taps the “register” button? What screen appears if you choose “home”? This contributes to more accurate feedback and helps to identify any UX issues.
What makes a good wireframe?
As you can see, wireframes are important. But how do we evaluate their quality and ensure that the team understands your app’s concept? To help you distinguish between good work and bad work, we’ve put together a list of characteristics. You can refer to it during the mobile app design process to ensure the wireframes work as they should.
The main principle of a good wireframe is visual clarity
Good app wireframes should be as simple and concise as possible so that they don’t distract you with unnecessary details. Thus, they will fulfill their purpose — introducing you to the app’s logic.
What we mean by “visual clarity”:
-
- Avoiding colors. Wireframes are typically designed in gray, white, and black, but some agencies also use their corporate colors. In any case, 1-2 colors are acceptable.
- One generic font. To highlight the structure and visually distinguish blocks of different functionality, designers change the font size or format headings to bold or italic.
- Lack of graphics and images. Anything related to the visuals takes place during later stages.
I believe that good wireframes should not only be comprehensible to the client but also useful in the work process. Wireframing is meant to ensure that from the earliest stages, the designer is completely immersed in the process of creating a convenient and functional application. If app wireframes enable that immersion, they are good wireframes.
The difference between mobile and web wireframes
Layouts of mobile and web applications look quite different. What to look out for when discussing wireframes with a team? What’s different about wireframes made for different types of applications?
1. Screen size
Designers should take into account that a mobile screen can hold a lot less information than a computer screen. There must be a balance between content blocks so that the page does not seem too empty, or vice versa, cluttered. If you need both a mobile application and a website within the same project, corresponding wireframes will have a different hierarchy. For example, you need to add a large catalog of services to both apps. You don’t want to annoy the user with the long scrolling of the catalog page, and wireframes have to reflect the solution to that problem. Through the “expand” button, for example.
2. Proportions
People interact with smartphone screens with their fingers, not with a touchpad or a mouse. Therefore, the buttons should be large enough to tap them without affecting other elements nearby.
3. Technical capabilities
We can interact with a computer screen through clicks only. But a smartphone allows much more options, like a Tinder swipe, for example. So, the outline of the future application should reflect all kinds of communication between the user and the screen.
Moreover, the designer has to consider the specifics of iOS and Android operating systems. For instance, the buttons on notifications are different. If you do not take such things into account, you can disrupt the usual user experience, and make it inconvenient to use the app.
Each of these two operating systems offers its own mobile app design requirements and recommendations. This way, the developers won’t complicate user interaction with screens using beautiful but unfamiliar visuals.
Good wireframe examples
To make it easier to understand, we will illustrate our explanations with some quality samples. You’ll be able to see what clients actually receive at the wireframing stage and assess the designers’ work.
Loan application
These are hi-fi wireframes. They have sample headings and fake data, indicate where the icons will be, and show what profile details the user will need to fill in. Even without being elaborate, these wireframes are perfectly clear about what a personal account, profile, and advertising banners will look like. One glance at these screens lets you grasp the concept of the future app.
Prayer app
And, here is an example of low-fidelity wireframes. It has boxes for content blocks, but no headings, icons, or any other small details. What can you comprehend and learn from these wireframes? First, they define spacing and block sizes. Secondly, you can trace the logic of the application: where they store prayers, how to delete them, and where to leave comments. There is enough data on screens to assess whether the application has all the necessary features and if they’ll be enough for the user.
Restaurant booking app
Below is an example of a high-fidelity wireframe with sample content. Besides spacing and icons, you can also see hints for the designer. For example, the rounded image corners on the second screen, or the highlighted icon on the open tab on the first one. As for the features, these app wireframes make it clear how the customer can track their bookings, where to find the restaurant information, and the average waiting time.
To sum it up: wireframes are important and useful
If you want to develop a mobile or web application that is useful to customers, solves their problems, and quickly becomes popular, wireframing is absolutely necessary. Both the agency and the client should take it seriously, pay proper attention, and discuss the wireframes in as much detail as possible. It will help guide them in the right direction.
To make it easier for you to navigate through all the information we’ve collected, we’ve put a FAQ together below. You can refer to it as you are creating your application.
To kick off the development of your future project, you can contact Purrweb. We work on wireframes meticulously and don’t proceed to the next stage until we clarify everything with a client. You can read more about working with wireframes in our case studies:
-
- Cryptocurrency wallet, where we created wireframes for a wallet redesign. Wireframing is useful for mobile app UI design updates too: it helped us understand the target audience’s behavior and to add features that users actually needed.
- Vendify app — an application for smart fridges. The clients came to us with their own wireframes, but we had to make a lot of changes later on. This is why we prefer to make wireframes ourselves — to become fully immersed in the project.
The first step towards bringing your project to life is at the bottom of this page. Fill out the form and our specialist will contact you to discuss the task.
