Wireframe
A wireframe is the skeleton of a page, drawn with boxes, lines and rough text, without colours or images. It shows what information goes where and in what order the page is read. It lets you approve the structure before design and code.
What is a wireframe?
A wireframe is a skeleton drawing of a page. There are no colours, photos or fonts, just grey boxes, lines and rough headings. It answers one question: what information goes on this page, and in what order?
Here is an everyday case. The wireframe for your services page shows a heading and a one-line summary at the top, three service boxes below, then FAQs and a quote form at the bottom. Looking at it, you say testimonials should sit above the form. The change takes minutes. Asked for after the design is finished, it would mean reworking both design and code.
Why does it matter?
A wireframe keeps the discussion on the right topic. With no colours or photos, everyone looks at content and order. A missing page or forgotten detail shows up at this stage, and a change to a sketch is the cheapest change there is.
Once the wireframe is approved, colour screens and a clickable prototype come next. We list the pages a company site needs in pages every company website needs. Our design process is on the web design page.
Frequently asked questions
How is a wireframe different from a prototype?
A wireframe is a static skeleton that shows structure. A prototype is a clickable model that shows how you move between pages. The wireframe usually comes first.
Who approves the wireframe?
The person on your side who knows the content best and makes decisions. That approval is the basis for the design stage.
Does every project need a wireframe?
For a small one-page job, a quick sketch may be enough. For projects with several pages, forms or user flows, a wireframe saves time.