Wireframing In UX — What You Should Know

Jul 10, 2020 :: Ayoleyi Lurogho , Product Design

ICT Support

Wireframing In UX — What You Should Know


The process of creating a digital product is similar to the process of building a house. When we think about building a house, we usually mean the process of construction. And the first step of creating this appearance is creating blueprints—outlines of areas that give those involved in building a clear vision of the project structure. A wireframe is like an architectural blueprint in the design process. It serves as a reference point for functional specifications and gives the product team a basis to begin creating screens. Wireframing is a step that should not be skipped during the Product lifecycle.
In this article, I’ll be sharing some points regarding wireframing and why it is necessary in the product design phase.



What Is Wireframing?

A wireframe is a schematic illustration of a page interface used to demonstrate the placement of content and functional elements on the page. Wireframes help establish relationships between individual pages and serve as a foundation for prototypes



Is Wireframing Necessary?

The wireframing process is a necessary part of the design process just like i said earlier because it helps convey the information architecture and user flow of a website, app, or product in a simple way. Just like a blueprint of a building, a wireframe describes the structure of a product. The goal of wireframing is to connect the product’s information architecture (IA) to its visual design. Creating this connection is especially important during the early stages of product design when designers need to explore a range of ideas and narrow it down to one or two that look most promising.

Why Wireframes Are Important

I will still make reference to building a house, the easiest way to think about a wireframe is in terms of building a house. It’s hard (or nearly impossible) to build the house without any plans. It’s equally hard to create the interface out of thin air.



A wireframe is the first visual representation of a designer’s abstract idea. Wireframing is a fast and cheap way to plan the structure of a page or screen design. Typically, wireframes are used by UX designers in the early design process. UX designers use wireframes to communicate their ideas about product design, and they allow them to map out the functionality of the pages, discuss the design, and catch problems early. In case the team wants to introduce some changes, a wireframe is much easier to reshape. So, at the end of the day, wireframes save a product team a lot of time.

What Wireframes Look Like

Traditionally, wireframes are low- fidelity Sketch (paperwork) or digital illustrations created from boxes and lines illustrating content blocks and navigation elements. The lo-fi wireframes give a product team a chance to see the basic structure of the user interface. By eliminating the color, imagery, and other visual details, designers are forced to think about the big picture—the layout and functionality of individual pages and how they relate to each other.



However, modern design tools allow creating mid and even high-fidelity wireframes without much effort. Medium-fidelity wireframes are created in a monochrome palette, often gray or blue-scale, which makes it similar to the previous one. But unlike lo-fi wireframes, the UI components in mid-fidelity wireframes are more detailed and realistic.



Mid-fidelity wireframes also can contain real imagery, and this property makes the wireframe look more like mocks rather than wireframes. High-fidelity wireframes are static versions of the app screens or website pages, and they are beneficial during prototyping.



When Do You Need To Create Wireframes?

Wireframing is especially useful at the beginning of the design process when the main objective is to create a product’s structure (PRD). Below is a general product design process:

User and market research
Define the scope of work and estimate
Wireframing
Prototyping
Development
Testing
Release
Maintenance

As you can see, wireframing is not the first step of digital product creation, but it’s usually the initial phase of actual design when the future product gets its first visual presentation. Before a product team starts to create a wireframe, it needs to have a strong grasp on the user’s goals, motivations, and tasks they will want to complete.

Wireframing vs. Prototyping

Let me give a glimpse between wireframing and prototyping, high-fidelity wireframes are often confused with prototypes because both are created in color and look realistic. Nevertheless, wireframing and prototypes are two different concepts, and they have different aims.



While Wireframes are focused mostly on the structure of the page. Prototype, on the other hand, are all about interactions—they created to demonstrate not only how the product will look but also how it will work for users. Prototypes allow testing of the interactions between the user and the interface, similar to the final product.