Wireframe

An essential component in the design process, wireframing gives designers the opportunity to think about the clearest path a user can follow to complete their objective(s).

How can you make it easy for users to consume the right information? How long do you have until they suffer from cognitive overload?

With wireframes, you can think about these questions organically, taking each one in stride. The result is a thoughtful, well-executed prototype (and, hopefully, product).

What is a wireframe?

A wireframe is a skeletal mockup of an app or website, typically used for designing the barebones structure of the user interface, content, and functionality.

Instead of visual elements such as colors and typography, wireframes are usually monochromatic, with a focus on usability.

Putting user needs first

Wireframing allows designers to zero in on user needs (functionality) before user wants (visual design), while progressively improving the dispersion of information and content, as well as the core UX—namely, usability and accessibility.

When using a dedicated wireframing tool (or a high-fidelity screen design tool combined with a wireframe UI kit), designers have the benefit of utilizing pre-made wireframe components. This eliminates the need to design UI components from scratch, and frees up time to think about the optimal user experience.

As more user research and feedback is collected at each iteration, the wireframe itself is wonderfully susceptible to change. As you move toward building your first interactive prototype, you can reshape your wireframe as many times as you need, using it as a living blueprint.

When should you make a wireframe?

Wireframing often follows the initial sketching or storyboarding phase. It gives designers a clear visualization of their concept as they begin to plan the complexities of the navigational structure, information architecture, layout, and functional requirements of each screen in the user flow—both separately and collectively.

As described above, a wireframe can act as a blueprint when designing high-fidelity prototypes, providing clear direction as you begin to tackle some of the more visually detailed aspects of the design.

Which tool is right for your project?

Wireframe tools are generally divided into three main categories: low-fidelity, high-fidelity, and dedicated. Due to the absence of wireframe components, low- and high-fidelity tools aren’t official wireframe tools—but there’s no reason why they shouldn’t still be used as such.

Low-fidelity wireframe tools

Low-fidelity design tools are useful for rapid iteration, making them especially advantageous in the early design stages. They help designers form their initial mental model for the overall layout and navigational structure.

To help designers quickly visualize a large number of rough ideas, they tend to ship with nothing more than raw drawing features. They encourage creativity, and establish the mindset that ideas are both endless and disposable.

Examples of low-fidelity wireframe tools include InVision Freehand, UI Stencils, and Marvel.

High-fidelity wireframe tools

High-fidelity screen design tools are typically used for mocking up the final versions of a design. However, since they have the largest feature sets of any other category of design tools, they’re very multi-purpose—and one of those purposes includes wireframing.

For designers that would rather keep their screen design workflow in a single application, using a high-fidelity screen design tool is the best and most affordable option. By default, shape and text layers are made of nothing more than monochromatic colors and lines, making it easy to mock up designs.

Examples of high-fidelity wireframe tools include InVision Studio and Sketch. High-fidelity tools can also be combined with wireframe UI kits like Form, bringing wireframe components into your screen design tool of choice.

Dedicated wireframe tools

These are the tools that have been specifically designed for wireframing. They come with an abundance of wireframe components right out of the box, and can be quickly dragged onto the canvas at will.

Using dedicated tools is the fastest way to build wireframes. If the budget allows, they’re nice to have alongside both low- and high-fidelity options.

Many dedicated wireframe tools have the option to include notes detailing the functional requirements of each screen. This is useful for designers, and offers additional clarity for clients and stakeholders that may also be viewing the wireframe.

Examples of dedicated wireframe tools include Balsamiq, Whimsical, and Axure.

All-in-one design tools

Some design tools pride themselves on enabling both wireframing and high-fidelity screen design. These tools are built for the multi-disciplinary UX designers who may be tasked with designing the entire product from start to finish.

Examples include UXPin and Justinmind.

Encouraging collaboration and creativity

Regardless of whether they’re low-fidelity, high-fidelity, or dedicated, all of these design tools encourage collaboration in one way or another. Wireframing, much like any other early-stage process in the product design workflow, thrives best in this kind of feedback-driven environment.

There are two main features that drive collaboration in most design tools:

1. Comments. Stakeholders can weigh in on each iteration, streamlining the process and efficiently delivering insights to product teams.
2. Device preview. Stakeholders can view the design on a real device, with interactions intact, and test its effectiveness in a realistic environment. This is most useful when designing mobile apps or mobile websites, since users interact using their thumbs. Considering that a huge part of wireframing is planning the navigational structure, device preview is especially useful for battle-testing the navigational flow.

In the end, there are many ways to approach wireframing. No matter which path you choose, it’s almost always helpful: What often starts as a nebulous skeleton of an idea has room to grow, iterate, and improve. Dedicating time and thought to your user flow without any aesthetic components often leads to the most effective and well-received designs.

Collaborate on low-fidelity wireframes

You’re ready to start turning your idea into reality, but what’s the best way to get everyone moving in the same direction?

Creating digital wireframes to define user experiences and gather team feedback is easy with InVision Freehand. Our “collaborative canvas” empowers teams to create low-fidelity prototypes early in the product design process and iterate rapidly as the project evolves. Once you’ve got buy-in, take your design to high-fidelity with the screen design power of InVision Studio. No matter where you are in the design process, InVision is there to help.