For designers, product managers, engineers. Anyone really!
HOW TO WIREFRAME
Wireframes and sketches are a great way to get ideas out, start collaborating, help think through the solution space, but also think through the problem. Typically reserved for designers, but they don’t have to.
And in an AI world they have a ton of value.
Whether you’re a Designer, Product Manager, Founder, Developer, Marketer - here’s everything you need to know on getting started on wireframing!
Wireframe Guidance
What Is A Wireframe?
You probably already know but just in case, it’s a rough sketch of a product, app, or website. It can be literally that - a sketch - but often is a digital version.
It captures the rough layout, flow and structure, without getting all into the nitty gritty details. Some benefits and features:
BUILD
Wireframes are easy way to work with an AI tool like Lovable or Cursor. Pair it up with a design system and you can have prototypes ready in seconds.
Communicate
Getting an idea out in seconds is the first half. The second half is communicating and collaborating with others. Wireframes make working wither others easy.
Get THe Idea Out
Wireframes are great for visualizing an idea. Often you need a few boxes, lines, arrows to convert a concept.
ALIGN
Wireframes are great for getting teams aligned on ideas more than words alone can do.
The Goal Of Wireframes
So why do a wireframe? Wireframes - or wires - are quick and cheap way to work through solutions, think through the problem, work with others, and get alignment.
Wireframes Objectives
-
Explore The Solution Space.
The best way to explore the solution space early is sketching out ideas.
The nature of sketching means you can rapidly generate ideas and work through all the different angles of approaching a solution to a problem.
-
Explore The Problem Space
Wires will help you think through the problem space in a bit more detail. It’s another tool to think through the issues you are solving which in turn helps you gain a different perspective on the problem.
It’ll uncover requirements you didn’t think of, raise issues you might have missed, and in general help catch gotchas earlier rather than later.
-
Diversity Of Ideas
The low barrier to entry for creating wireframes makes it easy for anyone to do it. And that’s what you want. Different groups will approach wires with their own lean.
everyone will approach wires from different vantage points. Collaborating and working with others will help diversify your viewpoints.
-
Collaborate and Alignment
Healthy collaboration is great. Sketches and wireframes foster a sense of collaboration. It fosters feedback and conversation and helps the product team work together. All this promotes a sense of alignment.
-
Testing
Just because wireframes are lofi doesn’t mean you can’t get valuable info from them. Lofi wireframes are a great to get in front of users to do early user testing on concepts and layout. You can even do rough prototypes to test out flows.
-
Clarify Requirements
A picture is worth a thousand words. We heard this before. Documenting requirements is great, but when you can add a picture to illustrate the problem/solution it adds another level of depth to clarify the requirements.
COLLABORATION IS AT THE CORE.
Software problems are nuanced and tricky. We learn more each day. Exploring the early one helps us understand the problem better.
Getting everyone - designers, product managers, engineers, marketing - in a room gives us a wealth of ideas.
And the stakes are low early so it’s easy to talk through ideas with very little committal.
The best part is getting teams aligned and working together early, setting up the product development team for success later.
Finding The Right Solution Before Getting THe Solution Right
This is the real essence of wireframes. When you have a problem you want to make sure you get to the right solution before getting the solution right (worrying about the minute details of the solution).
The exploration nature (as opposed to refining) allows you to go about finding the right solution. It promotes collaboration. Wireframing is easy and approachable so anyone can help push and pull on ideas and nudge the problem solving process in the right way.
The rough nature of the wires invites feedback early that is easier to act on. Also, people tend to be ok with providing feedback on rough wires as opposed to polished visuals.
Who Wireframes?
Typically it’s up to designers to do the wireframes. As someone who spent their whole career in the product design / ux design space this has been my experience.
But I often noticed others wanting to get into the action. I would always run sketch sessions (which are just fun) and invite other departments.
Almost always they had fun and wanted to be in on future sketch sessions. And it wasn’t uncommon for PMs to ask for a Figma license to wireframe ideas, or to give them advice on wireframing.
PMs noticed all the benefits above. And really, I encourage anyone on the product team - PM’s, Engineering, Marketing, etc. to join in on wireframing if they desire too.
Designers
This may be my bias kicking in but designers doing wireframes is a given.
Developers
Look, whatever you come up with engineering has to build. Getting engineers in early gives them say into the solution. This helps buy in later on and makes for happier engineers.
Founders / Business Owners
Wireframing helps founders and business owners illustrate a problem they are solving what a solution may look like. Great for pitch decks.
Product Managers
They can help communicate requirements into visuals. This can be done without stepping on designer’s toes.
Marketers
Flesh out marketing concepts a designer may not think about. Bring in marketing insights that are customer centric that others may not be aware of.
ANyone Else
Really anyone can wireframe to get across ideas and concepts.
HOW TO WIREFRAME
We covered the What. Let’s Get Into THe How.
Frame The Problem
Set It Up & Knock It Down
Jumping into sketching and wireframing is tempting, but you want to have some idea of the problem you are trying to solve. Usually from user research, business requirements, analytics, customer support tickets you’ll have a rough idea of what you are trying to solve. Or it might be creating a new zero to one app / product.
FRAMING
Frame up the problem you are trying to solve along with any supporting content. This can include:
user research
business requirements
analytics
customer support
current solutions
known issues
unknowns
A HYPOTHETICAL
Let’s take a very hypothetical example: Apple wants to explore integrating podcasts into its Music app.
Instead of simply saying: let’s add a podcast player in the music app”, you want to get the lay of the land. Flesh out the problem with more context: what’s the business angle? what are user saying? What are some opportunities this presents?
Think through the elements - the known items in the Music app you can start to explore around.
This doesn’t have to be thorough, simple stickies will suffice. And it hast to be just enough to get started and add some structure. You’ll revisit it as you explore and learn more.
“Let’s Add A Podcast Player Into Our Music App”
❌
✅
Sketching
WHY
The idea is to get as many ideas out as possible. Set a timer for 5-10 minutes and sketch several out.
You can spend several minutes and knock out a couple sketches you feel good about.
Or you can do several rounds of this each focused on a different angle. An example 4 round sketching session would look like this:
A TYPICAL PROCESS
Instead of simply sketching out ideas and calling it day, follow a structured sketch session with rounds of sketching.
Round 1: pump out as many ideas as possible
Round 2-3: focus on specific areas of the app generating several ideas
Round 4: take an idea from a previous round and add more detail
A couple example sketches. As you can see, rough and loose. You don’t need anything fancy here.
Wireframe
From the sketches, you may have a couple ideas you want to wireframe. Fire up your tool of choice and knock it out. Keep it simple and focused on the main idea.
From the above, I liked the idea of embedding Podcasts in key places in the music app. Here’s a couple wireframes alongside the sketches to show this. These were done in Miro.
Simple Wireframes Done In Miro
As you can see, the wires help clean up the design. Typically you want to add a bit more context. I discuss this later in presenting wireframes.
Also -at this point these are concepts to communicate an idea or design. You can pick this concept apart, but ideas are fragile.
This early in the process you want to just get out ideas.
Keep the feedback separate from the exploration.
Another concept I talk about a bit later.
Use An AI Code Editor
Next, drop those wire’s into AI tool like Cursor and Lovable and prompt away. You’ll have a prototype up and running in no time.
Wireframe To Code
Using an AI coding tool you can take rough wires and have them churn out decent looking UI that is working functional code.
Here’s an example of a rough table that I put into Lovable.
GENERAL WIREFRAME GUIDANCE
This next section will get into design tips and advice that’ll steer your wireframes in the right direction.
Design Principles For Wireframing
Part of wireframing is letting the user know what’s important here and what’s not so important. It establishing hierarchy among the elements. A couple ways you can do this:
Size. The larger the elements the higher priority it is
Positioning: generally things higher up on the screen are more important.
Priority
ALIGNMENT
Keeping this nice and tidy helps make your wireframes cleaner and easier to take in. Use simple alignment to achieve this.
Most tools have alignment features that makes it easy to center, left/right align elements.
FOCUS
Wireframing is communicating. You want to stress certain elements and actions and de-emphasize others. A couple ways to do this:
Use color to draw attention to one element.
Block out text that is irrelevant. Use simple blocks of lines/rectangles to illustrate text instead.
Approach
Some pointers on going about wireframing.
Focus on Ideas, Not Visuals
It’s tempting to worry about the visuals: colors, fonts, gradients, nifty animations.
Forget about it all and get messy. Wireframing is about the idea and the concept. Not the pretty visuals. The overall layout, flow, and the concept as a solution.
It also can be a way to illustrate a problem. No need for clean visuals at this point.
Go Wide
You don’t want to just kick around the first idea you come up with. Push yourself to generate a lot of ideas. Think about the problem from different user perspectives. Lean into core principles of your product and translate that into design ideas.
Sketching and wireframing is quick and cheap. This is the time to generate ideas.
FOCUS
Focus on the main point, idea, problem etc. What are you trying to get across in this wireframe and highlight that. The level of detail you go into is determined by the why. Why are you mocking up this wireframe. What do you want to convey / what do you want the audience to take away. Focus on that.
Below is a wireframe focused on User Flow. Images and text are blocked out and not specific so as to focus on the flow and not necessarily the content.
FIDELITY
SKETCH
Sketches are the fastest to create and the best for getting out ideas fast. It’s super clear they are just ideas and concepts. Great for concepts and user flows or communicating ideas.
LOFI
A little more effort than a sketch, but still a great way to quickly get out ideas. Generally focus a bit more on layout and user flow / interaction. These are great for getting user testing results early.
They also make a touch better artifact for presenting. Since it’s not a messy sketch, they’re easier to take in/understand and a bit more stand alone
PROTOTYPE WIREFRAME WITH AI
Wireframes are great because they hit that sweet spot of speed with just enough concrete detail to communicate ideas. The beauty of AI is you can press on this angle further. Drop wireframes into an AI coding tool and you can have working prototypes in a short amount of time.
This is much better than doing a high fidelity wireframe or mockup (see below) since you have something that is tangible and you (and users) can interact with.
Again with goal being efficiency in communicating ideas and working through problems, AI coding tools allow you to do this.
High Fidelity
I generally avoid high fidelity wireframes. It’s important to understand why you are doing this in the first place. That’s typically explore quickly and cheaply or getting across high level ideas without spending a ton of time and effort. LoFI wires do a great job at this.
High fidelity starts to move away from the ‘why’ behind all of this. More often than not, the cost of doing a high fidelity wireframe outweighs the benefit.
There are times where it does make sense. For example if you’re working with an agency design team that needs a bit more specific guidance. Or the system you are working on is so complex, a lofi wireframe doesn’t cut it.
Or, you want something a bit more polished but you’re not a designer.
In general, you’re better off with sketches and mores lofi wireframes.
Tools
What About FigJam and Sketch?
Generally the go-to designer apps - Figma and Sketch are more suited for designers doing the actual detailed design work. You can wireframe in them, but they’re a bit overkill if all you want to do is wireframe and sketch out ideas.
The simplicity / lack of features in products like FigJam, Balsamiq or Miro’s wireframe app act as a positive feature. Options to get to pixel perfect designs are distractions in the part of the process.
There’s plenty of tools out there for Wireframing. Here’s good list to start with:
Wireframe Specific Websites & Apps
Providing Feedback On Wireframes
In general, when providing feedback on wireframes you’re looking to see if the design is helping support the user and business goals or not. It’s not personal feedback. Here’s some tips on providing feedback
Separate The Creation From The Feedback
Most importantly, the creation time is not the time to critique, analyze, or give feedback. Use the creation time for creating. Don’t limit yourself, go wide and explore. It’s too easy to self-critique or critique others in the moment. Don’t.
Ideas are fragile and easy to put down. Let the creation time be for creating and have a separate time for feedback.
Clear, Specific, and Actionable
Feedback should clearly describe the problem in a specific manner. That feedback should be quite actionable. Saying something like “I don’t like this button” is unclear. What do I do with that?
Objective
Feedback should be rooted in the goals, not personal opinions.
Not A Time To Solve
Giving feedback isn’t a time to solve. Feedback on wireframes should be describe the problem you see. It’s not a time to offer a solution.
The corollary to that is when a rough solution is given as a way to help flesh out the problem you are trying to describe. Sometimes offering a solution but framed as a way to illustrate the problem helps explain the problem in a bit more detail.
Focused
Keep the feedback focused on the goals at hand.
Wireframe Summary
Wireframing is a great tool to get teams to work together and explore the solution space. Use it as a tool to help you and your team work together as a team and get to the right solution.
And now with AI coding tools you can push it even further and generate wireframe prototypes.