What Is A Wireframe And Who Uses Them?

What is a Wireframe?

A wireframe is a two-dimensional skeletal outline of a product, webpage, or app. It is like an architecture drawing or architecture plan of a product.

Image by Unsplash

The following describes wireframes:

Wireframes provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors.
Styling, color, and graphics are kept to a minimum.
Wireframes can be drawn by hand or created digitally.

Who's Using Wireframe?

Wireframing is a practice most commonly used by UX Designers. It allows all stakeholders to agree on where the information will be placed before the developers build the interface out with code.

When Does wireframing occur?

Wireframing is usually done during the product development process exploratory phase. During this phase, the designers are testing the product's scope, collaborating on ideas, and identify business requirements.

A wireframe is the first version of a product that is used as a starting point for the design. With the valuable insights gleaned from user feedback, designers can build on the next, more detailed iteration of the product's design, such as the prototype or mockup.

What is the purpose of wireframing?

Wireframes serve three important functions:

1
Wireframes help to keep the concept user-centered design
2
Wireframes clarify and define product features
3
The creation of wireframes is fast and inexpensive

1. Wireframes help to keep the concept user-centered design

Wireframing is an excellent way for designers to predict how users will interact with the interface.

Conducting user testing during the early wireframing stage allows the designer to receive candid feedback and identify key pain points that aid in the establishment and development of the product concept. These insights assist the designer in understanding what feels intuitive to the user and creating products that are comfortable and simple to use.

Wireframe is effective communication tool for:

Facilitate user feedback
Initiate conversations with stakeholders
Generate ideas among designers

2. Wireframes clarify and define product features

The wireframe process allows stakeholders to determine how much space to allocate for each feature, to connect the information architecture and visual design, and to clarify the functionality of the page.

Furthermore:

Specific features will be wireframed to clearly communicate how they'll work and what purpose they'll serve to the clients.
Wireframes let visualize how the features interact - and may even inspire you to remove some that don't quite work with the rest of the page's components.
Wireframes inspire to remove some features that don't quite work with the rest of the page's components.

3. The creation of wireframes is fast and inexpensive

Without investing a lot of time or money, flaws and pain points can be easily identified and corrected. The later it gets in the product design process, the harder it is to make changes!

These are some advantages:

Quickly sketch out a wireframe without spending a lot of money, if you have a pen and paper on hand
Create a digital wireframe in a short amount of time thanks to the abundance of tools available.

What kinds of wireframes are there?

There are three types of wireframes: low-fidelity wireframes, mid-fidelity wireframes, and high-fidelity wireframes. The most significant difference between these wireframes is how much detail is contained within them.

Low-fidelity wireframes

Low-fidelity wireframes are basic visual representations of the product and usually serve as the design’s starting point. As a result, they tend to be quite raw, produced without any sense of scale, grid, or pixel precision.

Example of low-fidelity wireframe

Low-fidelity wireframes are useful for:

starting conversations, deciding on navigation layout, and mapping the user flow
UX Designer if they have stakeholders or clients in the room and want to scribble something down with a pen in the middle of a meeting
UX Designers who have multiple product concepts and need to make quick decisions

Mid-fidelity wireframes

Mid-fidelity wireframes are the most commonly used and feature more accurate representations of the layout. While they still avoid distracting elements like images or typography, specific components are given more attention, and features are distinguished from one another.

Example of mid-fidelity wireframe

Mid-fidelity wireframes are:

to distinguish headings from body content, different text weights could be used
usually created using tools, such as Sketch, Miro, Adobe XD or Balsamiq
to feature more accurate representations of the layout

High-fidelity wireframes

High-fidelity wireframes boast pixel-specific layouts. Actual featured images and relevant written content may be included in high-fidelity wireframes. This added detail makes high-fidelity wireframes ideal for exploring and documenting complex concepts such as menu systems or interactive maps. High-fidelity wireframes should be saved for the latter stages of the product’s design cycle.

Example of high-fidelity wireframe

What does the wireframe contain?

Elements that are typically found in wireframes include:

logos
search fields
headers
buttons
placeholder text

Example elements used in wireframe

Typography and images should not be part of a low or mid-fidelity wireframe. In high-fidelity wireframes, designers may throw in the occasional color, such as red to indicate a warning or error message, or dark blue to represent an active link. High-fidelity wireframes may also include navigation systems, contact information, and footers.

What tools are used to create wireframes?

Designers have access to a wide range of advanced wireframing tools and programs. Built-in UI components like form elements, button states, and navigation help designers save time by allowing them to use pre-made design decisions to create wireframes in a fraction of the time.
‍
One of the best-known wireframing tools on the scene is Sketch and Figma. Also Balsamiq, Miro or Adobe XD are common tools for creating wireframe.

Mid-fidelity Wireframe on Sketch

What Is A Wireframe And Who Uses Them?