What a wireframe is and why it comes first
Clients often ask me: what is a wireframe? It is the page made of grey boxes that a designer sends before any colour appears, and it is not an unfinished design. Here is what it shows and why looking at one first saves time.
What exactly is it?
It is a plan of a page drawn with boxes and lines instead of pictures and colours. It shows what goes on the page and in what order: a heading here, a block of text beside an image there, a button under it. Think of the floor plan of a flat. Nobody chooses paint from a floor plan, but everyone can see whether the kitchen is in the right place.
Why not start with the real design?
Because people react to what they see first. Show a finished-looking page and the conversation goes to the shade of blue and the photo, while the bigger question of whether the page says the right things in the right order goes unasked. A wireframe removes the distractions on purpose. Structure gets agreed while it is still cheap to move, and the visual design then builds on something settled.
What should I look for when I review one?
Read it as a visitor would, top to bottom. Is the first thing you see the most important thing? Is anything missing that a customer always asks about? Is there a section you could not fill with real content? Does every page end by offering a next step? Ignore the grey and the placeholder text. Your job at this stage is the order and the contents, nothing else.
What does a wireframe not show?
Colours, fonts, real photos, the final wording and the feel of the brand. It also does not show how things move or respond. So it cannot tell you whether the site will look good, only whether it is organised well. If you find it dull, that is as it should be. Judging beauty comes at the next stage, when the same structure is dressed in your identity.
Does every project need one?
Not as a separate formal step. A single page for a person can go straight to design, because the structure is simple enough to judge with the visuals on. A store, a company site with many pages or a course platform benefits from wireframes, because discovering a missing section late is expensive. What every project needs is agreement on structure before the build, however it is reached.
How detailed should it be?
Detailed enough to answer questions, rough enough to change without regret. Real headings and real section names help far more than filler text, because they show whether you actually have something to put there. If you can already supply the true content, even in draft, the later stages get faster. A polished wireframe that nobody dares to change has missed its purpose.
How I handle it
I do the structural thinking inside Figma, the same file that becomes the full design, so you are never asked to approve boxes and then be surprised by what they turn into. You see the pages, comment on them, and approve the final design before the build starts. Nothing is built until that approval. Tell me which pages your site needs and what each has to achieve, and I will show you how I would lay them out.
New articles every day on our Facebook page: Learn with MK
Have a project in mind?
Tell me what you are building and I reply within 24 hours.
