Wireframes: Low-Fidelity vs. High-Fidelity

Defining wireframing: Which is best for you?

Before we jump to nuance, first, let’s take a minute to introduce wireframes.

Wireframes are a part of the for-screen design process that provides a blueprint for an interface. These can apply to anything from a website to an app, and are typically a precursor to a full design spec. Wireframes provide a hierarchy of information in order to plan the layout that best navigates users through the pages and information provided without the distraction of colors, visuals, or other design aspects.

For the purpose of this article, we will be specifically speaking about wireframes for websites.

Why are wireframes important?

Wireframes outline information architecture, showing the connection between pages and pathways users will take to navigate the interface.
Wireframes showcase consistency of presentation. Layout consistency helps users subconsciously move through information faster.
Wireframes show content prioritization, such as where an item is located on the page and how much space is allocated to it.

What is a low-fidelity wireframe?

Wireframes can be done in a number of ways, from computer programs to paper sketches. Low-fidelity wireframes are less detailed and more abstract; they use simple blocks to represent different elements of the design, such as spacing for images or content. Think of them as more of a launching point for the designer’s first thoughts.

We start to put together low-fidelity wireframes once the site map and general content have been approved as a starting point for design concepts. Often they are used more on the ‘in-house’ side to get thoughts from other people involved in the project, such as strategists and programmers, to make sure the vision aligns.

What is a high-fidelity wireframe?

Once the low-fidelity wireframe has been reviewed, the designers will focus on a high-fidelity wireframe to start clearly mapping intent to clients. High-fidelity wireframes will likely contain some real content, provide a font sample, focus more on specific dimensions, such as image sizes, and more. It tends to be more of a middle ground between the very first concept and the full design concept.

Wireframing is an essential step.

Both low-fidelity and high-fidelity wireframes have their place and are an important step to a smooth redesign. We like to start with a low-fidelity wireframe to help us focus on the concept and to concentrate our ideas, then move to high-fidelity wireframing when we’re ready to present our concept to our clients. We find that low-fidelity wireframes can be too abstract for many clients, although they can be a really great tool for clients with time or financial constraints. Without colors or imagery, it helps focus on how users will interact with the site and the placement of different content, and helps clients start to visualize where the designers are going with the concepts.

Interested in learning more about the website design process?

Web Design