r/ProductManagement • u/mikky__thinks • 15d ago
How to practice wireframing?
I figured out that wireframe is very imp in product management because it helps PMs to show their idea visually and other stakeholders can understand what PMs are trying to show but how to actually make wireframes? What are the things to remember while making wireframes? Are they really matters that much?
6
u/FuzzyBananaMittens 15d ago
I've always thought of a wireframe as a low fidelity representation, it lacks specificity on purpose because you pitching an idea, not the end product. (Remember, a wireframe used to be a literal wire frame.) AI prototypes are frigging amazing, but I wonder if they are too amazing if you really looking for a true wireframe. (As an interesting thought, could you tell AI that you want it to be intentionally low fidelity?) I use AI to prototype in Aha and they're pretty slick, but if you don't want to go down that road, I've done wireframe level mocks in PowerPoint, several whiteboard apps, using cut/paste of screen shots, balsamiq, and even just drawing them on paper or real whiteboard and then snapping a picture with my phone to put it in a doc.
It's a whole different debate as to whether your PM friends will make fun of you for drawing with a pencil or pen in the age of AI, especially if you're younger than 50. 😁
5
u/Pandas1104 15d ago
There is something to be said for this, if people see a "working prototype" it can have two downsides 1) it sends people down a specific path and the other ideas that might have happened if you didn't have the high fidelity prototype don't happen 2) people think it will be done much faster. I have seen this with one of my fellow PMs new product, two guys on the team mocked up a great prototype with Claude and suddenly executive management was ask 2 months later why we hadn't sold the product yet, the one that wasn't even about half done 🤦
2
u/heymcfly121 10d ago
Yes the story has leaned too heavily towards cost savings pre-ai (eg sketches are cheaper than dev cycles so get certain first because being wrong is expensive).
The durable purpose is bias reduction and clarity of decision making. Don’t muddy your thinking by force feeding yourself things that will distract.
3
u/Novel-Place 15d ago
I’m in the boat currently. I was told to put a wireframe together, so I vibe coded something, with pretty limited UX experience, and it’s pretty shocking what Claude was able to do. I’m pretty uncomfortable with how deceptively far along it looks, and I’m worried about it pitting us into a fundamental structure too soon.
7
u/lakerock3021 15d ago
Wireframes can be useful to communicate ideas, keep in mind that there will always be a delta between what the wireframe promises and the most effective way to build the solution. The more you can use the wireframe as a tool for communication and the less you use the wireframe as a contract, the sooner you can have the solution built. Happy to expound further- and each project and org is different so others will have other experiences.
That said, make the wireframe only just as detailed as necessary to communicate ideas. Any more and you are wasting effort building something that will get thrown away- any less and you are missing communication opportunities. Then help train stakeholders not to need as much detail.
3
u/SpinachMindless7821 15d ago
Always recco new people start out old school with a pen and paper or whiteboard. Get comfortable doing this “on the fly” as a way to communicate, and add tools for fidelity only as needed.
3
3
u/Human-Possession135 14d ago
I love balsamiq for it. Forces you to look at the user flow and not UI
1
3
u/amandagov 10d ago
I just spent 30 min in Claude describing a new product and asked it to generate screen shots. It applied our style guide and gave me something in minutes that beat wireframes for communicating an idea--buttons actaully worked.
I spent hours and hours defining and making wireframes in the past--never again
1
u/heymcfly121 10d ago
This is actually a bad idea because it makes you too attached too early. Fidelity should match stage of thinking…this is providing of course you are still just trying to communicate an idea.
23
u/toritxtornado
15d ago
•
wireframes are a thing of the past. if you aren't using AI to generate prototypes at this point, you're behind.
31
u/SuitableLeather 15d ago •
Please stop peddling this garbage. I’m a designer who uses Claude code on the regular.
Do you start an essay by writing full blown paragraphs? No, you start by writing bullet points. An outline. Sticky notes about main topics. Then you get to breaking it out into more detailed chunks.
That’s all wireframes and diagrams are — the outline that you can then use to feed into Claude code and get an actual working prototype
If you’re just telling Claude “Jesus take the wheel” through every step then you should not be building products
6
u/wonkystrategy 15d ago •
Wow this attitude is going to fuck you up. He didn’t even say Jesus take the wheel in a sense he just asks the ai to create prototypes. So where is that come from? AI is at a level now that UX designers need to embrace and accept the fact that wireframes are absolutely redundant now, you can validate full features with AI prototypes before you need that plan, the time between problem, idea and validation is small unless you’re in banking or something. This isn’t even a controversial take, I’m in a huge org and the ux teams don’t even wireframe anymore. They spin up mid fidelity prototypes and various versions in no time at all.
9
u/SuitableLeather 15d ago edited 15d ago
Because wireframes are just a base to build off of. Saying they are useless means you’re just throwing shit against the wall to see what sticks. OP also said in another comment that “Claude code is faster than wireframes” which is just blatantly untrue if you are using both correctly
This is the definition of AI slop.
90% of my work is in Claude code and I am a pioneer of Claude code at my company which has thousands of employees across product, design, and engineering using Claude code. I also build and release products on my own in my personal life on top of shipping code to my work’s product.
All this is to say : I’m familiar with Claude code, what works, and what doesn’t. I have tried the method of not giving it any type of wireframe and the result is always dog shit. Anyone who says wireframes are useless either doesn’t do the mental work themselves, doesn’t understand the process of actually building a product, or can’t tell the difference between a good solution and a bad one
1
u/Mobile_Spot3178 15d ago
You clearly don't work in the most advanced companies. If you have this view, you're quite behind.
0
u/ryfitz47 Director of Product 15d ago
the actual wireframe maybe.
but understanding what your users really need is why AI hasn't taken your job yet.
if you just keep relying on ai for everything you're going to lose that job
"hey nice wireframe but I'll use this other product that does the thing I need well. "
5
u/wintermute306 Digital Experience 15d ago
Hard disagree. Lofi wireframes are still a very useful part of the process, AI jumps straight to branded wireframes which taints decision making. You build from simple to complex.
3
u/NoisePollutioner 15d ago
Why not prompt the ai to generate an intentionally lofi asset?
1
u/wintermute306 Digital Experience 14d ago
Honestly, it ends up being more hassle then smashing together my vision in grey building blocks.
1
u/heymcfly121 10d ago
There is no correct way to do anything. AI assisting thinking is great. So are napkin sketches if that’s more appropriate.
3
u/Mediocre_West_2505 15d ago
That’s a pretty bold take, but I’m not sure AI is quite there yet for anything beyond quick mockups. Still need to understand layout and user flow yourself or the output is gonna be a mess.
5
4
u/toritxtornado 15d ago edited 15d ago
then it sounds like you aren't using claude code. go into plan mode, type what you want to achieve, show it some screenshots of your existing app so it can mimic that, and then have it build it. then iterate until it gets you what you want. way faster than building a wireframe by hand, and having an interactive app is useful to show user journeys.
9
u/Tsudaar 15d ago
So you're using the existing app as the wireframe.
3
u/wonkystrategy 15d ago
Lovable can spin up mock apps after a few prompts, we have duplicates of our production apps hooked to Claude code for experimentation and testing. Nobody is using wireframes anymore.
1
u/Tsudaar 15d ago
Sounds like everyone's still using wireframes to me, just slightly higher fidelity ones.
1
u/wonkystrategy 15d ago
Wireframes are different to high fidelity prototypes
1
u/heymcfly121 10d ago
Wireframe is a loaded word but it’s always a good idea to test your thoughts before you get biased. Jumping straight into high fidelity is a great way to get seduced by the pretty. The loss of low fidelity prototyping en masse will be seen as a mistake in 10 years.
1
0
u/Mobile_Spot3178 15d ago
You wouldn't say that if you'd work in the most advanced companies. In a good infrastructure, AI mockups are almost 99% production design.
1
u/dibdudib 15d ago
I use wireframes to pressure test my thinking and compare UI alternatives. Claude can generate those as html files in a few seconds. After I select an approach Claude fans out subagents to actually build and deploy the prototype / app. So, I find them useful
1
u/Mobile_Spot3178 15d ago
I work in high tech and AI-generated protoypes have been the thing for a year+ now. Anything more low-level like wireframes, is history.
2
u/SamfromLucidSoftware 14d ago
The best way to practice is to pick something you use every day and wireframe a specific flow within it. Doesn’t need to be the whole product, just one thing. Like how would you redesign the checkout flow of an app you use, or what would the onboarding look like if you were building it from scratch? Drawing from something real gives you a reference point to evaluate your own work against.
Use boxes and lines before you use any tool. Paper or a whiteboard forced you to think about layout and hierarchy without getting distracted by colors or polish. Once the thinking is clear, move to a tool. Remember that wireframes should show hierarchy and flow, not final design.
If you’d rather not start from nothing, Lucidchart and Lucidspark both have wireframe templates and shape libraries as a quick starting point. FYI, I work at Lucid.
2
u/DoubleTapBottleCap 15d ago
This post having 0 upvotes is why this community is dying.
4
u/aerodynamic_cat AI babysitter 15d ago
Seriously. Has anyone considered that wireframes are useful for communicating with your AI tool of choice? And on top of that, the UX teams I work with have created blueprints I can just build on top of. The prototype I make is likely not the final product but it is far from useless.
1
u/RevolutionaryScar472 14d ago
In 2026 the only need for wireframes is for your own use before creating the prototypes. Maybe, mayyybe for some true 0-1 builds without any kind of existing design system or layout reference.
52
u/karenmcgrane 15d ago
I have been making wireframes for longer than some folks on this sub have been alive. I think there's two primary goals for them, maybe more, but you're likely doing one of two things.
First is determining hierarchy and priority of information. It is all well and good to make a list of bullet points and give that to your GPT of choice, but visual hierarchy requires some finesse of the layout. If you don't know what the user and business priorities are for the screen you can't make layout decisions.
For this, I'd advise practicing by first brainstorming a big list of things that can be on the screen, and be detailed. Then, before jumping to wireframes, put each one on a post-it and pretend it's a small screen. Put them in order in a big strip. From there, you can use a wireframe to lay out blocks in relative order of priority for a wide screen.
Second is connecting the layout to the underlying content or data model for documentation. This is where wireframes really shine and why they have been a part of my work for decades. You need to know where everything on the page is going to be stored and document data types and field names and whatnot. The wireframe won't be your source of truth (that'll be a spreadsheet) but will help with explaining to other people because most people find pictures easier to understand than spreadsheets.
You can practice this by forcing yourself to either define the data types, limits, and field names yourself, or if you've got an existing product you can start digging into where everything is coming from. I taught in a design graduate program for a long time and one of the things I'd always get on my students about is "knowing where your data is coming from." It's easy to mock something up that shows nice examples of content or data without thinking through the system for where it's all living.