Domains, delivery and craft
What is Wireframe?
A deliberately unstyled layout showing what goes on a page and in what order, before any decision about colour, typography or imagery. Its purpose is to make structural arguments cheap to have and cheap to lose.
Also called: layout sketch · lo-fi mockup
Why the lack of styling is the point
A polished mockup invites feedback about the shade of blue. A grey box labelled "price and delivery cost" invites feedback about whether the price should be there at all — which is the conversation that actually changes the outcome, and the one that becomes expensive after build.
What a useful wireframe settles
- The order of content, and what appears before a visitor scrolls
- Which single action the page is asking for
- What proof sits next to which claim
- How the page behaves at a narrow width, decided rather than inherited
Mobile width first
Wireframing at desktop width and adapting downwards produces pages where the important content is third on a phone. Starting narrow forces the ordering decision immediately, which is the decision that matters for most traffic.
Where this is covered in depth
A definition can only go so far. Writing a website brief that gets you comparable quotes covers this properly — 3 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.