Website Wireframe Examples: How to Wireframe a Site in 2026

A website wireframe is a grey-box plan of a page: which blocks appear, in what order, and what each one says. The website wireframe examples below cover six common pages, from an agency homepage to a product page, followed by a seven-step method, mobile rules and the tools worth using.

What Is a Website Wireframe?

A wireframe is the structure of a page before any visual design. Balsamiq calls it "the skeleton of your digital project", and its guide to wireframes says a wireframe focuses on layout and content placement, not colour, fonts or polish.

Figma's wireframing guide describes wireframes as basic blueprints that help teams agree on requirements. That is the real job: getting you, a client or a developer to agree on what goes on the page before anyone spends hours on how it looks.

A wireframe answers three questions for each page. What must a visitor understand? What should they do next? Which content proves the point? If the wireframe answers those, the visual design has a firm base. If it doesn't, no amount of styling will fix the page.

Low-Fidelity vs High-Fidelity Wireframes

Low-fidelity wireframes are rough boxes and labels for agreeing on layout and order; high-fidelity wireframes add real copy, spacing and sometimes type and colour. Start low, because changes are cheap there, and move up only once the structure stops changing. Most small sites need one round of each.

Figma's guide draws the same line: low-fidelity wireframes focus on layout, navigation and information architecture, while high-fidelity ones look like early mockups. Balsamiq adds a useful tip for both levels: use real content early, because a rough real headline grounds a layout better than placeholder text.

Wireframe, Mockup or Prototype?

A wireframe shows structure, a mockup shows the finished look as a still image, and a prototype lets you click through the pages. They are stages, not alternatives. Many small projects skip the separate mockup and go straight from wireframe to a styled template.

The last row comes from Nielsen Norman Group, whose article on wireflows describes them as wireframe-style page layouts combined with a simple flowchart of the interactions. Use one when a single page changes state a lot, such as a cart, a booking form or a dashboard.

Six Website Wireframe Examples by Page Type

Each example below lists a page's blocks from top to bottom, which is exactly what a low-fidelity wireframe records. Draw each line as a box, label it, and you have a working wireframe. Where an example is based on one of our own templates, we name it, so you can open the finished page and compare.

1. Agency or Studio Homepage

This is the order used on the home page of Zelda, our free design agency template: a bold hero, then selected projects, then services, then contact. It works because a studio's work is its best argument, so the projects come before any claims about the studio.

1. Navigation: logo, Work, Services, About, Contact button
2. Hero: one-line positioning statement, short supporting line, one button
3. Selected projects: three to six project cards with client name and outcome
4. Services: three or four services, one sentence each
5. Contact: short prompt, button or form, email address
6. Footer: links, social profiles, legal pages

2. SaaS Product Homepage

Medonix, our free medical SaaS template, follows this pattern: positioning, features, social proof, then calls to action. Notice the button repeats at the end, because a visitor who scrolls the whole page has earned a second chance to act.

1. Navigation with a Sign in link and a primary Start trial or Book demo button
2. Hero: what the product does, for whom, plus a product screenshot box
3. Logo row of customers (only real ones)
4. Three feature blocks, each with a short heading, a sentence and a screenshot box
5. Testimonials or a short case study
6. Pricing teaser linking to the pricing page
7. Final call to action repeating the hero button
8. Footer

3. Personal Portfolio Homepage

A portfolio wireframe should get to the work fast. Xavier, our personal portfolio template, is built around case studies, services, a blog, pricing and contact; the list below puts the work near the top. Our guide on how to design a portfolio website covers the content side.

1. Name and one line on what you do and for whom
2. Three to five case study cards, each with a result in one line
3. Short about block with a photo placeholder
4. Services or what you can be hired for
5. Contact button and email

4. E-commerce Product Page

Product pages have more states than other pages, which makes them a good place for a wireflow. Deux, our bakery template, pairs product pages with a cart that offers pickup or delivery at checkout; wireframe the product page and each cart step as separate frames joined by arrows.

1. Breadcrumb: Shop / Category / Product
2. Image gallery box on one side, product name, price and options on the other
3. Quantity and Add to cart button, with a note on delivery or pickup
4. Description, ingredients or specifications
5. Reviews (only real ones) and related products
6. Second frame: cart drawer with items, total and Checkout button

5. Contact Page

A contact page wireframe is short, but every field needs a reason to exist. Keep the form to what you need to reply, and say how fast you reply. If you build on Framer, our Framer forms guide covers where submissions go and how spam protection works.

1. Heading and one line on what to contact you about
2. Form: name, email, message, plus one or two qualifying fields such as budget or service
3. Response time and alternative contact (email, phone, address)
4. Map or service area box, only if location matters to the business

6. Blog Article Page

Article pages are mostly text, so the wireframe is about reading order and what surrounds the text. Wireframe one article with real headings rather than placeholders, because heading length changes the layout more than anything else on the page.

1. Title, author, date and a cover image box
2. Short introduction that answers the question in the title
3. Body with H2 sections, a table or image box where needed
4. Author box, related articles and a newsletter or product prompt

How to Wireframe a Website in Seven Steps

To wireframe a website, list your pages, decide the goal of each, write draft copy, then draw boxes in order for mobile and desktop. Review with the people who must approve it before adding any styling. These seven steps take a small site from a blank page to an agreed plan.

1. List every page. Write a simple sitemap: Home, About, Services, Work, Contact, and any templates such as a blog post or product page.
2. Give each page one goal. "Book a call" or "Start a trial" is a goal; "tell people about us" is not.
3. Write the headlines first. A draft headline and button label for each block, in plain words. Balsamiq's advice to use real content early applies here.
4. Order the blocks. Put what a visitor needs to decide first at the top. Our hero section guide covers the first screen in detail.
5. Draw the mobile version. Stack the blocks in one column and check that nothing important falls far down the page.
6. Add the desktop version. Decide where blocks sit side by side, and keep the same order as mobile.
7. Review and change. Walk the client or your team through each page with the goal in mind. Figma's guide puts it well: don't get too attached to your wireframe.

If the site is a single long page, the steps are the same but every section becomes a block on one canvas; our guide to one-page website design covers section order and anchor links.

Wireframing for Mobile

Wireframe the mobile layout as its own frame, not as an afterthought, because Google indexes the mobile version of a page. Plan for one column, short blocks and tap targets large enough to hit with a thumb. A desktop wireframe squeezed into a phone frame usually hides something important.

Google's mobile-first indexing guide says it uses the mobile version of a site's content, crawled with the smartphone agent, for indexing and ranking. So anything you cut from the mobile wireframe is content search engines may never see. Keep the same content on both, and change only the layout.

• Targets: WCAG 2.2's target size rule asks for pointer targets of at least 24 by 24 CSS pixels, or enough spacing around smaller ones. Draw buttons and menu links at a realistic size.
• Navigation: decide what the mobile menu holds and whether the main button stays visible outside it.
• Tables and side-by-side blocks: decide how they stack or scroll on a narrow screen.
• Forms: one field per row, with labels above the fields.

Website Wireframing Tools Compared

You can wireframe with paper, Balsamiq, Whimsical or Figma; the right tool is the one your team will actually review in. Paper is fastest for a first pass, Balsamiq and Whimsical keep things deliberately rough, and Figma suits teams who will take the same file all the way to a finished design.

Whimsical's pricing page also lists AI wireframes that turn a text prompt into editable wireframes. Treat any generated layout the same way as a template: a starting point you still check against your page goals and your real content.

From Wireframe to Finished Site With a Template

A template can replace the high-fidelity stage: pick one whose page order already matches your wireframe, then swap in your copy. Every Waida Studio template has a Figma design file, so you can rearrange sections in Figma first and build on Framer, Webflow, HTML, Next.js or Astro afterwards.

Compare your wireframe with a template's page list block by block. If most blocks match, a template saves the visual design stage entirely. If your wireframe needs a section the template lacks, note it; a single new section is a small job, while a different page structure means a different template. Our guides to Figma to Framer and Figma to Webflow cover the handover.

These two are our own templates, and both are free with a free Waida account on every platform, Figma file included.

Zelda: Agency and Studio Sites

Zelda is a dark design agency template with 13 pages: a home page with hero, projects, services and contact, a projects archive, case study pages, about, services, process and a contact page with structured intake. It matches the first wireframe example above almost exactly.

Check out Zelda template

Medonix: SaaS and Product Sites

Medonix is a medical SaaS template with 13 pages: a home page with positioning, features, social proof and calls to action, feature pages, pricing, customers, solutions, a compliance and security page, a blog, about and contact. It suits the SaaS wireframe above, in health tech or any other product.

Check out Medonix template

Every other Figma file is $19 on its own, or all 46 come in the Figma bundle for $49. Figma files are sold separately from the Framer, Webflow and code versions.

Website wireframe examples are most useful as a checklist: list the blocks, order them by what a visitor needs first, draw mobile before desktop, and agree on the plan before styling anything. Paper, Balsamiq, Whimsical and Figma all work; pick the one your reviewers will open.

When the structure is settled, you don't have to design every page from scratch. Browse the Figma website templates, where each design file is $19 or $49 for all 46, with Zelda's and Medonix's free. If you'd rather hand the whole job over, our customisation service adapts a template to your brand for $499.