What is a wireframe? Wireframe vs mockup vs prototype explained

A wireframe is a structural sketch of a web or app page that places the content, menus, buttons and forms as grey boxes and placeholder text, with no colour, fonts or real photos yet. Its job is to settle what the page contains, in what order, and what the user should do next, before the team spends time on visual design and code.

If you compare it to building a house, the wireframe is the floor plan that shows where the bedroom is and which way the door opens. Choosing wall colours and furniture comes later. This article covers what a wireframe is, how it differs from a mockup and a prototype, the levels of fidelity, the steps for wireframing a website or landing page, the tools people use, and the mechanics by which a wireframe affects SEO and conversion.

What is a wireframe and what goes into one

A wireframe is a visual document used to get the business owner, marketer, designer and developer to agree on page structure. Everyone looks at the same picture and sees that the main headline sits at the top, the buy button sits under the price, and the contact form sits at the bottom. Agreeing on these things while the page is still grey boxes takes far less time than fixing a page that has already been designed.

Almost every wireframe contains these elements:

• Header and navigation: how many menu items there are, what they are called, and whether they collapse into a hamburger button on mobile.
• Content hierarchy: the main heading, subheadings and paragraphs, ordered from what the user needs to know first to what they need later.
• Image and video areas: shown as boxes with a cross through them, with a note on what the image should be.
• Call-to-action buttons: position and button text, such as "Request a quote" or "Add us on LINE".
• Forms and input fields: how many fields, which ones are required, and the error message when something is filled in wrong.
• Footer: address, policy links and links to other important pages.

What a wireframe deliberately leaves out is brand colour, real fonts and photography. Once colour and images appear, reviewers start commenting on looks instead of asking whether the structure works. Stripping them out forces the meeting to talk only about content order and the user's path.

How a wireframe differs from a mockup and a prototype

These three words get used interchangeably, but they are different stages of work. A wireframe answers "what is on the page and where". A mockup answers "what will it actually look like". A prototype answers "what happens when I tap this". The three usually follow each other in that order, and each stage costs more time and money as the detail goes up.

A common mistake is jumping from an idea straight to a mockup, then discovering while admiring the polished image that the review section is missing or the form is too long. Fixing it at that point means reworking several designed pages so they stay consistent. Found at wireframe stage, the fix is moving a few boxes.

On small projects a team may merge the wireframe and the prototype, building a wireframe whose pages link to each other. This is called a clickable wireframe. It lets you test the user path quickly without going into design detail.

Low-fidelity vs high-fidelity wireframes

Fidelity means how close the sketch is to the real thing. Wireframes come in two main levels, and you pick one according to the stage of the project.

Low-fidelity wireframes

A low-fidelity wireframe is a rough sketch. It might be drawn with a pen on paper, on a whiteboard, or made of rectangles in software without caring about real dimensions. Text is shown as lines instead of letters. It is fast, easy to throw away, and suits the brainstorming phase, for example drawing three versions of a home page within an hour and picking the one with the clearest content order.

High-fidelity wireframes

A high-fidelity wireframe uses dimensions and spacing close to the real page, sits on the real screen grid, and uses real or near-real headings and copy, but stays in black and white. It fits the phase when structure has settled and the file needs to go to a designer or developer, because it answers technical questions such as how many columns the pricing table has and how they stack on mobile.

The simple rule: the less sure you are of the structure, the longer you should stay at low fidelity. Going high fidelity too early makes the team attached to a layout nobody has tested, and reluctant to tear it down.

Steps for wireframing a website or landing page

The steps below work for a multi-page website and for a single landing page. Only the scope changes.

1. Define the page goal. Write one sentence saying what the page wants the user to do, such as "fill in the quote form" or "add us on LINE to ask about a product". If you cannot write it in one sentence, the page may be trying to do too many things.
2. Know the users and their questions. Collect frequent customer questions from chat, email or the sales team, and look at the search terms people use for this topic on Google. Those questions become the headings on the page.
3. Build the sitemap first. For a multi-page site, draw a chart of which pages exist and which page is a child of which. This step later defines the menu and URLs.
4. Order the content the way users need it. List the sections from top to bottom, for example the main headline with its promise, the customer's problem, the solution, work samples or reviews, price, frequently asked questions and a closing button.
5. Sketch low fidelity on mobile first. A narrow phone screen forces you to choose what matters most. Expand to the desktop version afterwards.
6. Put real copy in as early as possible. Lorem ipsum hides length problems. Thai headings are often longer than expected and break lines differently from English.
7. Test with people outside the project. Show the wireframe to three to five people and ask what the page is selling and where they would tap if interested. If they cannot answer within a few seconds, the structure is not clear yet.
8. Refine to high fidelity and hand over. Add annotations, such as where each button links, where the form sends data, and which fields are required.

For a landing page that receives ad traffic, add one more step: compare the ad copy with the top heading of the wireframe. If the ad talks about a discount but the page headline talks about company history, users feel they have landed in the wrong place. That match can be planned at wireframe stage.

Tools for wireframing

A tool does not make a wireframe better on its own, but it makes collaboration easier. Pick based on team size and the stage of work.

• Paper, pen and whiteboard: the fastest option for low fidelity and good for brainstorming meetings. Take a photo and it is saved.
• Figma: runs in the browser, several people can edit one file at the same time, it covers everything from wireframe to clickable prototype, and there are wireframe kits to start from.
• Balsamiq: built specifically for low fidelity, with a hand-drawn look that makes it obvious to everyone that this is still a draft.
• Whimsical or Miro: good for putting the sitemap and user flow next to the wireframes on one board.
• Sketch or Adobe XD: teams already using them can wireframe there too.

One thing to watch: using a UI kit that looks too polished at wireframe stage pulls attention to visuals, which is the same as skipping to the mockup too early.

How a wireframe helps SEO

Google does not read a wireframe directly. But the structure agreed in the wireframe becomes the HTML structure of the page, and that part does affect SEO. The main mechanics are these.

Heading order becomes the page's headings

When the wireframe sets the main heading and the subheadings, the developer turns them into H1, H2 and H3 tags. If the wireframe headings match the questions people search for, the page gets a structure that answers the query clearly. If the wireframe uses pretty phrases nobody searches for, the page loses that signal.

Site depth and internal links

The sitemap and menu planned in the wireframe decide how many clicks an important page sits from the home page. Pages buried deep with few inbound links are usually harder to crawl and rank. Planning internal links in the wireframe, such as a related-services block at the bottom of the page, helps both users and bots reach important pages.

Visible content and page speed

If the wireframe hides key information inside tabs or sliders that need a click, or stacks several large banner images at the top, that affects rendering speed and Core Web Vitals such as LCP and CLS. Setting image area dimensions in the wireframe reduces layout shift during loading.

FAQ sections and content that can carry structured data

Placing a frequently asked questions section, reviews or a pricing table in the wireframe from the start lets the developer prepare schema markup that matches the real content on the page.

How a wireframe helps conversion

Conversion rate is the share of visitors who do what the page wants, such as filling in a form or placing an order. A wireframe affects that number through mechanics you can check.

• Information order matches the decision stages. Users need to understand what the product is first, then believe it, then look at the price. If the wireframe puts the price before the reasons, or the form before the user understands the offer, more people leave.
• Number and position of buttons. A wireframe forces a decision about how many main goals the page has. If several buttons in different colours with different text compete, users hesitate.
• Form length. Every added field is one more point of friction. Counting the fields in the wireframe and asking which ones are truly needed reduces form abandonment.
• Mobile-first layout. Buttons need to be reachable with a thumb and not covered by pop-ups or chat bars. These problems are visible in a mobile wireframe before they turn into code.
• Ready for A/B testing. With two wireframe versions, a team can test one variable at a time, such as the position of reviews, and measure it with real users.

Hypothetical example: a landing page with 2,000 visitors a month and 40 form submissions has a 2% conversion rate. If a structural change lifts submissions to 50 with the same traffic, the conversion rate becomes 2.5%. These numbers only show how the calculation works. Real results depend on the product, the traffic and the offer.

Common wireframing mistakes

• Starting from looks instead of the goal. Wireframing before agreeing what the page is for leads to arguments that never end.
• Lorem ipsum everywhere. Once real Thai copy goes in, headlines run to three lines, buttons overflow and the layout breaks.
• Desktop only. The developer is left to guess how the page stacks on mobile.
• No states. For example a search page with no results, a form that failed to submit, or an empty cart.
• No outside testers. A team that has lived with the project for weeks understands everything, so it cannot see where a new user gets confused.

Wireframes in the Thai market

Websites and landing pages built for users in Thailand have details that belong in the wireframe from the start. The first is contact channels. Many Thai users are more used to starting a chat than filling in a form, so the wireframe should define where the LINE button, the call button and the form sit, and which one is primary. The second is language. A bilingual site needs room for Thai and English copy that are not the same length, and a language switch placed where it is easy to find. The third is payment and delivery for online shops. Information about PromptPay, cash on delivery and delivery times should be visible before the user decides, not hidden on a policy page.

Another issue is Thai line breaking. Thai has no spaces between words, so on narrow screens a line can break in the middle of a word. Putting real copy into the mobile wireframe shows the problem early, so heading lengths can be adjusted.

Wireframe FAQ

Is a wireframe necessary for every project?

It does not need to be detailed on every project, but there should be at least a rough sketch before design starts. Even for a single landing page, ten minutes of drawing the section order on paper helps the team agree on the goal and content order before putting effort into design.

Who should make the wireframe?

Usually a UX designer or web designer makes it, but the input has to come from several people. The business owner knows the offer, the sales team knows customer questions, the marketer knows search terms and traffic sources, and the developer knows the technical limits.

What is the difference between a wireframe and a sitemap?

A sitemap shows which pages a site has and how they connect, while a wireframe shows what is inside each page and in what order. Normally the sitemap comes first, then a wireframe for each important page.

How long does wireframing take?

It depends on the number of pages and rounds of revision. A rough single landing page can be done in a few hours, while a site with dozens of pages that needs high fidelity and user testing can take several weeks.

Summary and next step

A wireframe is the cheapest stage at which to fix problems with structure, content order and the user's path, before those problems end up in design and code. If you are planning a new website, see the web design service. If you need a single page for an ad campaign, see landing page design. For businesses that need a purpose-built system there is custom website development, and for online shops there is ecommerce website design, which also starts by planning page structure before design.