--- title: Wireframe — definition in a website project | Siite description: "Wireframes explained: what they are for, why approving structure before design saves rebuild cycles, and what an owner should look for in one." url: "https://siite.co/dictionary/wireframe" type: static generatedAt: "2026-10-22T08:21:10.860Z" --- Design & UX # Wireframe A stripped-back layout of a page — boxes, headings and buttons, no colors or photos — used to agree on structure and priority before design begins. Also goes by Layout sketch, Blueprint [![Siite](/images/layout/logo.svg)Written by Siite](/about/)Updated September 8, 2026 ## Entry contents [All Terms A to Z←Browse the full dictionary](/dictionary/) A wireframe is the skeleton of a page: what goes where and in what order, without color, photography or final copy. Headline, proof, services, form, footer — boxes and labels. The unfinished look is deliberate. > **Briefly explained** > > - A layout sketch, with no styling. > - It settles structure and priority before design starts. > - Stripping the visuals forces the conversation onto the content. > - Changing it costs an hour. Changing a built page costs a rebuild. ## Why strip out the visuals? Because people review what they can see. Put a finished design in front of a room and the conversation goes to the photo and the shade of the button. The questions that decide whether the page works — what it says first, what it asks for, where the proof sits — never get asked at all. ## What are the questions it should settle? For a service business, the structural questions are the commercial ones. - Is the phone number reachable on the first screen, on a phone? See [above the fold](/dictionary/above-the-fold/). - Does the top of the page name the service and the area? - Where does the proof sit relative to the ask? - How many actions compete on the same screen? ## Where does it sit in a project? Wireframe, then copy, then visual design, then build. That order matters more than it sounds. Copy written to fit a finished design is how pages end up saying nothing in particular, because the layout decided how many words were allowed before anyone knew what needed saying. ## Who should look at it? Whoever knows what customers ask before they book. That is usually the person who answers the phone, and they are usually not invited to the review. They will tell you in five minutes which objection the page has to handle in the first screen, which is the most valuable thing anyone says in the whole project. ## What do the terms mean? - **Wireframe:** Structure, no styling. - **Mockup:** What the finished page will look like. - **Prototype:** A clickable version, used to test a flow. - **Hierarchy:** The order of importance the layout communicates. - **[Landing page](/dictionary/landing-page/):** The page type this process matters most for. Owner questions ## What owners ask us about Wireframe ### Why does the wireframe look unfinished? +Because it is meant to. Removing color and imagery forces the conversation onto what the page says and asks for, which is the part that decides whether it converts. ### What should I check when approving one? +That the phone number is reachable without scrolling on a phone, that the first screen names the service and the area, and that one action is obvious on every screen. ### Do small sites need wireframes? +Even a five-page site benefits. Ten minutes agreeing on structure prevents a redesign argument after the visuals are already built. ### Who should be in the room for it? +Whoever knows what customers ask before they book. That is usually whoever answers the phone, and they are usually not invited. ### Is it the same as a mockup? +No. A wireframe is structure without styling. A mockup is what the finished page will look like. Approving the first is how you avoid rebuilding the second.Put this to work ## Guides that use this Step-by-step playbooks from the team, written for owners doing the work themselves. No sign-up and no email required. [### Pest control conversion: emergency vs scheduled-service architecture Pest control customers split into urgent and scheduled. Same site can't serve both. Here's the two-funnel structure that doubles conversion. Read the guide→](/articles/pest-control-website-conversion-architecture/)4.9191 reviewsWhere this turns into work ## Decisions made before the expensive part Structure agreed first, copy written to it, design applied after — so the argument about what the page is for happens when it costs an hour. [See the service→](/services/web-design/)[Ask us about it](/contact/) ![Mads Buhl, Web Developer at Siite](/images/team/panel/mads-buhl.webp) *Our web developer* ## Related entries - [### Landing Page The page a visitor arrives on from an ad, listing or link — built to answer one search and produce one action, rather than to introduce the whole company.](/dictionary/landing-page/) - [### Above the Fold The part of a web page a visitor sees before scrolling — on a phone, roughly the first screen, which is where a service business either earns the call or loses it.](/dictionary/above-the-fold/) - [### Call to Action The specific next step a page asks the visitor to take — the button, phone link or form that turns a reader into a lead.](/dictionary/call-to-action/) [All terms A to Z Browse every term A to Z Open the dictionary→](/dictionary/)