Product design is a multi-step process that starts with an idea and ends with a viable solution. Between those two milestones, a team spends hours to nail down a good interface design.
Good structure is an essential part of any design. When architects plan a new house, they typically start with creating a blueprint, a scheme that communicates the structure of this house. The same approach can be applied to digital product design, only that in this case, the blueprint is called a wireframe.
Wireframes are a widespread tool that’s helpful in perfecting the app or website design while still in its early stages. In this article, we'll share everything you need to know about wireframes, why the matter and how to create them.
What are wireframes?
Wireframes are the barebone visualization of your idea. It's a two-dimensional schematic representation of an interface, primarily focused on communicating the structure of the layout—what elements the layout will have and how those elements will be distributed across the layout. Typically, wireframes are used early in the design process—during the ideation phase, when a team explores various design approaches.
The difference between wireframes, mockups and prototypes
Both wireframes and prototypes are commonly used tools for communicating design ideas. Designers use them to visualize the solution, and this visualization helps other people to get a better understanding of the product in its early stages.
What sets these two design artifacts apart is the level of interactivity. Wireframes are static design artifacts, while prototypes are interactive. Wireframes are typically the first step towards a prototype.
Once a team agrees on functionality, visual designers can turn the wireframes into mockups—design artifacts that include more stylistic details like colors, fonts and visuals. From a visual perspective, mockups might look like a finished product, yet they are static. The final step before creating the actual product is turning mockups into prototypes by making them clickable.
The benefits of wireframing
Since wireframes are low-investment, easy and quick to create, it’s possible to use this tool to gather feedback on your design early on in the design process.
Wireframes help product teams:
Achieve better visual hierarchy on individual screens or pages by helping to prioritize content and functional elements in the layout. Wireframes can show where a particular element is located within the layout and how much space it will take.
Simplify the visual design process: Wireframes become a framework that guides design teams and other stakeholders throughout the project. They can also serve as a foundation for high-fidelity mockups and prototypes.
Visualize how a product will work for users: Wireframes can be used to show the user flow throughout the product—how the user navigates from one screen to another. It helps teams to connect its information architecture to its UI design. It's much easier to evaluate the design when you seeing how individual screens relate to one another.
The different types of wireframes
Wireframes can vary on the level of detail, also known as fidelity. There are two main different types wireframes:
Low-fidelity wireframes. Low-fidelity wireframes are basic visual representations of the page or screen, created using simple shapes such as lines and boxes. Because of their visual simplicity, this type of wireframe is known for its speed of creation. They can be created right during brainstorming sessions and help communicate ideas more effectively. However, low-fidelity wireframes tend to be more abstract and might require explanation.
High-fidelity wireframes. High-fidelity wireframes go into increased levels of detail— they might include real copy and provide more accurate representations of the layout (for example, different font sizes can be used to separate headings and body content). Since high-fidelity wireframes take longer to create, they’re usually reserved for later stages of the product design process (such as, when you have two versions of a page layout and want to compare them side by side).
Wireframes can also vary in their production:
Hand-drawn wireframes. These are sketches on a piece of paper or whiteboard.
Digital wireframes. These computer-drawn design artifacts can be created on a design program or one of the prototyping and wireframing tools like Balsamiq, Figma, or Sketch.
Best practices for wireframing
1. Keep wireframes simple
Speed and simplicity are the two main attributes of wireframes. There are a few visual conventions that you can apply to easily communicate your ideas to other designers:
Input fields: An input field can be represented as a rectangle.
Buttons: A button can be represented as a rectangle with text in the center.
Image: An image can be represented as a rectangular box with an “X” through it.
Text: Depending on the level of fidelity, it’s possible to use either placeholder text (like Lorem Ipsum) or real text.
2. Keep styling to a minimum
The goal of wireframes is to determine the intended content and functionality of an interface, and not to depict visual design. That's why wireframes are typically created in black and white or grayscale. The lack of color, images, typography or any other visual attributes helps minimize the distraction and focus the discussion on the layout and structure.
Another benefit of this approach is that the design doesn't look finished. It's much easier for other people to share design feedback when they know the visual assets didn’t take long to create and can be quickly modified.
Keep in mind that while design should be minimal, it doesn’t mean that it's prohibited to use colors. You can use a contrasting color to direct user attention to a particular element of the wireframe. For example, use blue color to communicate interactive elements like call to action buttons.
3. Add notes to wireframes
Since wireframes are two-dimensional and static, it might be difficult for other people to understand how something is supposed to function. For example, if you have complex interactive features in your interface like drag-and-drop objects, other people might need to use their imagination to understand how this will work. It's therefore recommended to add a short note next to the UI control that will explain the intended behavior.
4. Ensure stakeholders understand what to look for in wireframes
While designers and developers understand what wireframes are and why they look a certain way, clients might have problems grasping the concept. Business owners might easily assume that the final visual design will look the same as the wireframe they see in front of them and ask questions like, "Why is this design so black and white?", or even worse, reject the solutions. Make sure to only share wireframes with stakeholders who are well-versed in the product design world, or clearly communicate the essence of this step. In cases of most business owners, it's much safer to invest time in creating high-fidelity mockups.
5. Use high-fidelity wireframes as documentation
Many teams think of wireframes as temporary artifacts that are replaced with prototypes. That’s not always true. High-fidelity wireframes can be used as documentation, documenting complex concepts such as navigation systems or particular user flows (like a series of screens that the user goes through).
