Updated: January 24, 2024- 6 min read
What Is a Wireframe?
A wireframe is a 2D visualization of a digital product, ranging from very basic pencil sketches to fully interactive digital designs.
Wireframes can be static and very simple layouts of ‘what goes where’, and some may be more interactive and more closely mimic the functionality of the final working product.
Wireframes usually have a pretty specific look. The plain shades-of-gray and no-frills design helps everyone who looks at them understand that this is definitely not the final design. Rather, wireframes are blueprints that depict the structure of the product’s interface.
Because they’re not trying to show the final design, wireframes are often subject to change, up for debate, and passed around by the team for collaboration and feedback. The main goal of a wireframe is to gain alignment on what’s about to be built. Making these decisions early on helps to save time later. You don’t want to drastically change the layout of the interface once the actual coding has started. (You might have to, regardless, but spending some extra time getting alignment on a wireframe is at least trying to avoid it!)
Do Product Managers Use Them?
If you approach every part of product development and dismissively think, ‘that’s not my job’, then you’re going to have a tough time as a product manager! It’s true, you don’t need to build the whole product yourself, and you’re there to guide your teams, not to do their work for them.
But a great product manager is hungry to learn as much as they can. Not only because product managers have a natural curiosity but because to influence without authority, you need to be able to speak your teammate’s language. And sometimes, that involves knowing a little bit about code, AI, marketing, or wireframes.
When working with your designers, wireframes are the most common communication tool as you’re working towards a prototype or an MVP. They’re visual aid to help designers and product managers understand what’s being discussed. The better you’re able to work with wireframes, the better that thread of communication between you and your designers will be.
Product managers are also people with ideas, and sometimes you’ll need to bring them to the team. When you’ve got a brainwave for how that pesky new feature should look, if you can go and scribble down a realistic wireframe to bring to your team, that’ll be much more impactful than turning up to the next meeting and clumsily trying to describe it.
Different Types of Wireframes
Knowing your wireframe lingo will really help you up your game when talking to designers…
Low-fidelity
The absolute most basic form of a wireframe is the very first step anyone on the team will take in developing the look and structure of the interface. The focus here is less on the final placement of individual elements but on trying to capture the initial idea for the user flow. Low-fidelity wireframes are often crude, and sometimes scribbled, but they’re a vital first step on the journey toward a final product.
Mid-fidelity
A mid-fidelity wireframe takes a low-fidelity wireframe and aims to make something a little more concrete. While still a document in flux, it’s more decisive and detailed but still a rough draft. Designers try to keep it greyscale, free of images or typography, to make it clear that it’s a blueprint and not a final design.
High-fidelity
High-fidelity wireframes are pixel-specific. Once your mid-fidelity wireframes have been approved, and the team is all aligned on them, you can move forward with high fidelity. How detailed you’d like them to be can vary, but they may include:
-Interactivity-Menus-Micro copy-Images and other visuals-Colors
You should only move through each phase of wireframing once the previous stage has been given the go-ahead. It’s tempting to jump ahead and say, ‘once you see the high-fidelity wireframe, it’ll make sense!’ But be cautious and really listen to the feedback you’re being given. You don’t want to charge ahead and waste your designer’s time.
Wireframing Tools
We’ve already written a guide to choosing product design tools in 2021, so check that out here!
But if you’re looking for something to dive into quickly, here are your three main options, ranging from the simplest to the more complicated industry standard:
Pen and Paper. You can’t really go wrong with tradition! If you’re on the train or stuck in line at the store, and you suddenly get that flash of inspiration, you can absolutely make a wireframe on the back of a receipt or the back of a notebook. Is it the most effective to bring to a meeting? No. Will it do in a pinch? Yes. (It really is groundbreaking information that we’re bringing you here!)
Figma. Ok, now the real list begins. Figma is becoming one of the most well-loved tools in the product design space. Loved for its versatility and user-friendliness, Figma’s cloud-based platform allows remote teams to work together on designs in real time, with a bunch of great features to facilitate seamless collaboration.
Balsamiq. Balsamiq is the OG and undefeated in terms of industry recognition. Most product designers will recognize Balsamiq, and in terms of opening doors in your career, it’s listed as a “nice to have” skill for many product-led companies looking for PMs. It’s more extensive in terms of functionality, as it is primarily a wireframe tool and built for a purpose. This means it’s not the most user-friendly for beginners, but it’s nothing someone willing to put the time in can’t master.
Wireframes Can’t Do It All
No matter how good your wireframes are, they can’t do everything. While they do an excellent job of helping you to express what’s being built from a visual standpoint, as a product manager, you’re still needed to explain the reasons why behind the wireframe.
You might hand your wireframe over to an important stakeholder and think to yourself, ‘it’s so clear, so easy to understand, a baby could look at this and know how to use it.’ But don’t be surprised when people still have questions. You’re still the holder of the product vision, and you’re the person that’ll be looked to for answers.
Understanding how to best use wireframes, even how to make them yourself, is just one step on the journey to becoming a great product manager.
If you’re looking to take the next step and become a truly awesome product leader, why not pursue a Product Management Certification?
Updated: January 24, 2024
