A sketch in which you talk about the content instead of colors.
A wireframe is a simple sketch of a page or screen that only shows the layout: what parts there are, in what order, and how important they are. Colour, images and definitive texts are deliberately missing, so that the conversation is about content and order rather than about taste.
IN COMMON LANGUAGE
Why you start this
As soon as there is colour and image, the conversation turns to colour and image. While the more important question is whether the visitor finds what he is looking for in the correct order.
Changing a wireframe takes minutes; Changing a detailed design takes hours and built pages even more. Mistakes here are the cheapest you can make.
WHY IT MATTERS
What you pay attention to in this phase
Look at order and weight: the answer to the most important question is at the top, and it is clear what you want from the visitor.
Also look at what is not included. Most pages benefit from leaving out, and it's easier to make that decision in a draft.
- Order of information — it answers the question in the correct order.
- One clear action — what do you want the visitor to do?
- What can go — omission is free at this stage.
- Mobile layout — sketch that separately, not as an afterthought.
- No colour or image — that distracts the conversation.
FREQUENTLY ASKED QUESTIONS
More about a wireframe
Do I get wireframes with a project?
Yes, on pages where the layout is still open. For a standard page that looks like existing templates, we skip that step: it's extra work without any return.
What is the difference with a mockup?
A wireframe only shows the layout; a mockup shows what it will really look like, with colour, image and typography. Wireframe first, mockup second.
Do I need to understand this?
No. You just need to be able to tell whether the order is correct and whether you are missing what your customers always ask for. That is exactly the input that counts.
CONTINUE READING
Of course, continue reading about this subject.
First think, then build?
We start with the layout and content. colour comes next, which saves on adjustments afterwards.