A Product Manager’s Beginner Guide to Wireframes

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 simply layout ‘what goes where.’ Or they 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 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 be drastically changing 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—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 team’s language. And that will include knowing a little bit about UX and 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 a 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.

Wireframes are also great when you need to communicate your ideas to the team. When you get a lightbulb idea 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 wireframe, and are 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 to try to capture the initial idea for?the user flow. Low fidelity wireframes are often crude, sometimes scribbled, but they’re a vital first step on the journey towards 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 is approved for 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

If you’re looking for something to dive into quickly, here are some great options for wireframing tools, ranging from the simplest to the more complicated industry standard:

Pen and Paper

You can’t really go wrong here! If you’re on the train or stuck in line at the store, and you get that flash of inspiration, you can quickly 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? Absolutely.

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 the 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 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, you'll need to do some extra verbal communication to back them up. While wireframes do an excellent job as visual support, you need a firm grasp on the why?behind the wireframe—because people will ask detailed questions!

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.’ The questions will come anyway. Remember that as Product Manager, you have a lot more context than anyone else, and it's your job to share this context with others and reach alignment. You’re the holder of the Product Vision, and you’re the person that people will look to for answers. Good luck!