12 wireframe examples from some of our favorite UX designers
Wireframing saves time, makes it easier to spot usability issues, and lets designers focus on creating a solid user experience....Read More
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).
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.
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.
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.
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 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.
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.
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.
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.
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:
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.
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.