One of the most critical tools for user experience activities in mobile applications are wireframes. To better address this issue, let’s start with the most basic: its definition.
What is a Wireframe?
A wireframe in the UI UX field is a simple and straightforward 2D graphical representation of a screen. We could say that a house plan is to the architect what a wireframe is to a designer. In terms of design, a wireframe would evolve from an initial sketch to a map of the final product.
What Benefits Can a Wireframe Give Us?
Due to their simplicity, wireframes allow us to generate quick graphic representations of ideas or concepts, navigation maps, processes, etc. In our experience, wireframes can be as simple as possible to communicate a smart idea or brainstorming, and as complicated to later become a product’s documentation. This type of documentation often turns out to be very useful for companies when they want to evolve products, use for training, test materials, etc.
For a wireframe to be useful, it must contain enough and necessary information to communicate its objective. For example, if the wireframe is about a newspaper or a digital publication, it is best to focus on where to place the title, body, and main image rather than content details. If the objective is to communicate navigation, the wireframe must contain all the points, buttons, and touch areas to direct the user from one section of the application to another. Depending on the wireframe use case, functionality annotations may also be required.
Wireframe Uses
Sketching – Brainstorming. When the products are in their first stages of conception, a wireframe turns out to be very useful in the experimentation stage, since it allows us to create variations of screens with different navigation, design, shapes, buttons, etc. You could create as many wireframes as necessary to make a comparison of usability and graphics.
Navigation. A simple way to demonstrate the navigation of a mobile application is flow charts. These are useful to explain to stakeholders what each section involves in terms of screens and content. In the wireframe, we can point out what specific buttons the user needs to press to navigate and what screen he will go to when touching them.
Collect Feedback from Users. When looking to do quick surveys to determine if the user experience is correct, wireframes allow us to make diagrams or navigations of mobile applications which can give the user a general or particular idea (depending on the project) of the operation to carry out.
Documentation. Because of its simplicity, wireframes can help us document screen variations without the need to create high-fidelity mockups or interactive prototypes that require more time to build. We have encountered some clients who use the wireframes to present to their testing and development teams feature changes. When giving continuity to a product, it is easier to document with wireframes than with prototypes since we can make changes or additions more quickly and efficiently.
What Types of Wireframes Are There?
The wireframe can be made as straightforward or as complex as required.
A. Manuals Wireframes
The simplest type there is. We recommended starting with the basics: a pencil and paper. But if you wish, you could use other types of graphic representation tools such as feathers, down, colors, text marks, labels, etc. It is not necessary to have advanced knowledge about drawing or illustration to make a manual wireframe. You need to represent the content that each screen includes. If you do not consider yourself very skilled in the manual or drawing matter, don’t worry, some tools can help you make manual wireframes. You can purchase stencils, notebooks, and blocks with predetermined figures and patterns, which will help you communicate the content of each screen.
B. Digital Wireframes
Digital wireframes can become more complex. Today we can find software that helps us make wireframes faster. Some of these platforms may contain simple representations of components such as navigation bars, status bars, buttons, dialogs, notifications, etc.
Examples of software with pre-defined objects:
- Mockflow
- Balsamiq
- Adobe Comp
- Axure RP 10
You can also use more complex and complete software for developing graphics. Using basic shape tools (like rectangles, circles, triangles, free from), you can create simple wireframes.
Examples of free draw software:
- Sketch
- Adobe xd
- Illustrator
