Designers often use the word "fidelity" when they discuss visual design. Wireframes, mockups, and prototypes can be created in low and high fidelity. The higher the level of fidelity, the more the design looks and feels like a finished product.
In this article, we will focus on one particular type of visual asset—low fidelity wireframes—and learn what it is, when designers need to create this type of wireframes, and how to create low fidelity wireframes using Mockplus. We also have a small bonus for you at the end of this article.
What is a low-fidelity wireframe?
A wireframe is a schematic representation of the future user interface created using simple objects such as lines, rectangles, and texts. The term "wireframe" is taken from the architecture discipline, where it is used as a tool to plan spaces such as houses. Like mockups and prototypes, wireframes can be created with low and high fidelity.
Low-fidelity wireframes share the following properties:
Wireframes are created using lines and boxes. All user interface elements in UI design are created of lines and boxes.
Black & white color scheme. Wireframes are created using only black/gray color.
Lorem ipsum texts. Instead of real content, designers use placeholder text (Lorem Ipsum, also known as dummy text).
Why do you need low-fidelity wireframes?
Low-fidelity wireframes can be helpful at the early stages of the design process. When the team has a lot of ideas to explore, they want to minimize the time required to visualize individual ideas. Compared to other design artifacts such as mockups and prototypes, low-fidelity wireframes allow designers to create visual assets in minutes rather than hours. By making design tangible, designers help other people involved in the design process (i.e., developers, stakeholders, etc.) better understand the nature of the idea they want to build.
What are the advantages and disadvantages of low-fidelity wireframing?
Advantages of low-fidelity wireframe
Easy to create. Low-fidelity wireframes don't require any specific tools and skills. They can be created by anyone who has a pen and paper.
Fast to create. It takes a few minutes to sketch a wireframe on paper. Wireframes can be created right during brainstorming sessions.
Excellent tool for collecting feedback. Low-fidelity wireframes look far from the finished design, making it easier for others to share their honest opinions about the design.
It can serve as design documentation. It's possible to make low-fidelity wireframes a part of design documentation. Adding notes to the wireframes helps others understand how something should look/work.
Disadvantages of low-fidelity wireframe
You must use imagination to understand how the final design will look and work. Low-fidelity wireframes convey only a general idea of the future design, and they lack many essential design elements (such as actual texts, colors, and fonts).
Cannot be used for stakeholder presentations. Stakeholders typically want to see a design in a medium or high fidelity because it allows them to evaluate stylistic and functional design decisions. When stakeholders see the low-fidelity design, they likely raise many concerns about design (i.e., “Why do screens look black and white?” or “What does Lorem Ipsum mean?”), which might negatively impact the design process.
How to design a low-fidelity wireframe using Mockplus in 5 simple steps
Wireframes can be created using pen & paper or digital design tools. When it comes to digital tools, Mockplus makes it easier to create both low and high-fidelity wireframes. The tool can also be used to create interactive prototypes, so you can potentially turn your low-fidelity design into an interactive prototype without switching a tool.
This quick tutorial will show how to design a low-fidelity wireframe for a landing page in less than five minutes.
Step 1: Launching Mockplus RP
The first thing we need to do is to launch Mockplus RP.
Step 2: Choosing a project type
Next, we need to choose a type of project. Since we’re building a web project, we will select the Web 1920 project.
Step 3: Choosing the right elements for our design
We're ready to create our low-fidelity wireframe. Mockplus RP is a web-based application, meaning we will design it right in a browser window. Once our project is created, we will see an editor with various basic elements in the Compos area.
Low-fidelity wireframes are created using elemental objects so we will use only Rectangles, Lines, and Text.
Step 4: Creating a skeleton of our wireframe
Let's create a low-fidelity wireframe of the hero section for our landing page. The hero section will feature the logo in the top left corner of the screen, a menu with a sign-up button at the top right corner of the screen, a text section with a header and description, and two call-to-action buttons in the center.
First, we will use rectangles to mark individual content blocks.
Step 5: Adding contextual details
Now let's add text to mark individual objects. Notice that designers typically mark containers that will have imagery (photos or videos) as rectangular objects with the X cross inside. We will use a Line object to add the X cross. After we add the required changes, we should see the following design.
You might notice that elements in the artboard aren't perfectly aligned but don't worry about that; the low-fidelity wireframes shouldn't be pixel-perfect. Speed and simplicity are two integral properties of the low-fidelity design. The faster we can visualize our ideas, the better.
Top 3 low wireframe examples for your inspiration
Here are our top three favorite examples of low-fidelity wireframes created by the design community:
1. Mobile app wireframes by Jinal Shah
Jinal Shah's design is a brilliant example of comparing low and high-fidelity wireframes. In this example, low-fidelity wireframes were created using pen and paper.
Gus Jul shares low-fidelity wireframes of the Quto App, a barcode scan mobile app. He uses arrows to help viewers understand the transitions between individual screens.
Join our Discord community
support@mockplusapp.com