Templates
Website Wireframe Example: 6 Labeled Layouts + Copyable Template
Six labeled website wireframe examples — homepage, business, landing, ecommerce, portfolio, and mobile — plus a copyable blank wireframe template and an HTML wireframe you can open in a browser.
A website wireframe is a low-fidelity sketch that maps where each element of a page goes — header, navigation, content, and footer — before any visual design begins. This page shows six labeled website wireframe examples that cover the layouts you will reach for most: a homepage, a business site, a landing page, an ecommerce store, a portfolio, and a mobile layout. Each one is drawn as a labeled block diagram you can read at a glance and copy as plain text, and a blank template at the end lets you draw your own.
A wireframe is the structural plan you agree on before a single pixel is designed, so it belongs at the front of your website proposal, right alongside the website structure examples that show how pages connect into a whole site.
What a wireframe is (and what it is not)
A wireframe captures structure only: what blocks exist on the page, where they sit, and how the eye moves down the page. Colors, fonts, and photography have no place in a wireframe — if you find yourself picking a shade of gray, you are designing, not wireframing.
| Document | Fidelity | Shows | Purpose |
|---|---|---|---|
| Wireframe | Low | Blocks, layout, content order | Agree on structure before design |
| Mockup | Medium | Visual style, typography, color | Agree on the look before build |
| Prototype | High | Working clicks and interactions | Test flows before build |
Every wireframe, no matter the page type, captures the same handful of regions:
- Header and logo
- Primary navigation
- Hero or page title
- Content sections
- Call to action
- Footer
- Key interactions (links, forms, buttons)
How to read the wireframes on this page
Each wireframe below is an original block diagram drawn in text. The boxes represent page sections, and the label inside each box says what that section holds. The short list under each diagram names the same sections in reading order, because the order — not the fancy styling — is what a wireframe decides.
Homepage wireframe
The homepage is the front door: it has seconds to say what the site is about and where to go next. The hero-first skeleton below is the layout most homepages share, and it is the one the business, portfolio, and ecommerce example pages are all variations of.
HOME / — homepage wireframe
+--------------------------------------------------------------------+
| [Logo] [ Nav: Home | About | Work | Contact ] [CTA button]|
+--------------------------------------------------------------------+
| HERO H1: one headline [CTA] |
| subhead: one sentence that says what to do |
+--------------------------------------------------------------------+
| TRUST STRIP: rating, years, or review highlights (3-4 short items) |
+--------------------------------------------------------------------+
| CONTENT: three cards side by side |
| [card] [card] [card] |
+--------------------------------------------------------------------+
| PROOF: testimonial or client logos (optional, high value) |
+--------------------------------------------------------------------+
| FINAL CTA: a repeat of the main action |
+--------------------------------------------------------------------+
| FOOTER: links, contact, legal |
+--------------------------------------------------------------------+
The sections in order:
- Header — logo, navigation, and a persistent CTA
- Hero — one headline, one subheadline, one primary CTA
- Trust strip — the reasons a stranger can believe the page
- Content — the features, services, or stories you came to show
- Proof — optional testimonials or logos that back the claims
- Final CTA — a repeat of the main action near the end
- Footer — contact details and legal links
Business website wireframe
A business site has one job: turn a stranger into a lead. That job drives the order of the sections below — every block exists to build trust and push toward the phone number or the contact form. See the structure in the real world on the business website examples page.
BUSINESS / — business website wireframe
+--------------------------------------------------------------------+
| [Logo] [ Nav: Services | About | Reviews | Contact ] [Phone no.] |
+--------------------------------------------------------------------+
| HERO H1: service + outcome [CTA] |
| subhead, license or badge line |
+--------------------------------------------------------------------+
| TRUST STRIP: years in business, licenses, review rating |
+--------------------------------------------------------------------+
| SERVICES: three or four cards (title + one-line description) |
| [card] [card] [card] |
+--------------------------------------------------------------------+
| PROOF: testimonials or before/after work |
+--------------------------------------------------------------------+
| FINAL CTA: "Request a free estimate" |
+--------------------------------------------------------------------+
| FOOTER: hours, service area, contact |
+--------------------------------------------------------------------+
The sections in order:
- Header — logo, navigation, and a phone number that never disappears
- Hero — the service and the outcome it delivers
- Trust strip — licenses, years, and review ratings
- Services — a grid of what you offer
- Proof — testimonials or completed work
- Final CTA — one clear way to become a lead
- Footer — hours, service areas, and contact details
Landing page wireframe
A landing page is the narrowest page type: it has exactly one job and every section points at it. All the effort is spent on the headline, the supporting promise, and the form or button that completes the action. This is the layout to reach for when a page exists to collect an email, sell a download, or book a call.
LANDING / — landing page wireframe
+--------------------------------------------------------------------+
| [Logo] [Nav links, small]|
+--------------------------------------------------------------------+
| HERO H1: the offer [Primary] |
| subhead: the supporting promise [Secondary] |
+--------------------------------------------------------------------+
| BENEFITS: three columns, what the visitor gets |
| [benefit] [benefit] [benefit] |
+--------------------------------------------------------------------+
| HOW IT WORKS: three numbered steps |
+--------------------------------------------------------------------+
| SOCIAL PROOF: one testimonial or a logo strip |
+--------------------------------------------------------------------+
| SIGNUP: name + email + [Submit] (the whole point of the page) |
+--------------------------------------------------------------------+
| FOOTER: small print, contact, privacy |
+--------------------------------------------------------------------+
The sections in order:
- Header — logo and minimal navigation (links that do not compete)
- Hero — the offer and the primary CTA
- Benefits — what the visitor gets
- How it works — three steps to remove doubt
- Social proof — one believable voice
- Signup — the single action the page asks for
- Footer — small print and privacy
Ecommerce website wireframe
An online store leads with two things: the product and the trust signals that answer "can I buy here safely?" Everything else — search, categories, and shipping promises — exists to get a shopper to a product card and then to checkout. The ecommerce website examples page shows the finished version of this structure.
SHOP / — ecommerce website wireframe
+--------------------------------------------------------------------+
| ANNOUNCEMENT BAR: free shipping over $75 |
+--------------------------------------------------------------------+
| [Logo] [ Nav: Shop | New | Sale ] [Search] [Cart (2)] |
+--------------------------------------------------------------------+
| HERO: headline + CTA into the catalog |
+--------------------------------------------------------------------+
| CATEGORY TILES: shop by product type |
| [tile] [tile] [tile] |
+--------------------------------------------------------------------+
| FEATURED PRODUCTS: grid of product cards |
| [card] [card] [card] |
| image · name · price · add-to-cart |
+--------------------------------------------------------------------+
| TRUST STRIP: returns, shipping, secure checkout, rating |
+--------------------------------------------------------------------+
| NEWSLETTER: closing reason to stay in touch |
+--------------------------------------------------------------------+
| FOOTER: links, policies, payment badges |
+--------------------------------------------------------------------+
The sections in order:
- Announcement bar — shipping threshold or promotion
- Header — logo, category navigation, search, and cart
- Hero — one headline and a CTA into the catalog
- Category tiles — routes shoppers by product type
- Featured products — the product cards that earn the click
- Trust strip — returns, shipping, secure checkout, ratings
- Newsletter — a reason to stay in touch
- Footer — links, policies, and payment badges
Portfolio wireframe
A portfolio page is proof of the work itself, so the work grid gets the most space and the bio stays short. The goal is to show range in seconds and make the next step — contact — impossible to miss. See how real portfolios structure themselves on the portfolio website examples page, with a one-page resume variant on the personal website examples page.
PORTFOLIO / — portfolio website wireframe
+--------------------------------------------------------------------+
| [Name] [ Nav: Work | About | Contact ] [Resume] |
+--------------------------------------------------------------------+
| HERO: "I am a ..." + one sentence + [See the work] |
+--------------------------------------------------------------------+
| SELECTED WORK: filterable grid of project cards |
| [card] [card] [card] |
| [card] [card] [card] |
+--------------------------------------------------------------------+
| ABOUT: short bio + photo + the clients you have worked with |
+--------------------------------------------------------------------+
| CONTACT: email + social links + [Hire me] |
+--------------------------------------------------------------------+
| FOOTER: name, copyright, back to top |
+--------------------------------------------------------------------+
The sections in order:
- Header — name, a few links, and a resume link
- Hero — who you are and one clear next step
- Selected work — the grid that does the selling
- About — a few sentences and a real photo
- Contact — email, social links, and the hire action
- Footer — copyright and a back-to-top link
Mobile wireframe
On a phone the same content stacks into one column, the menu collapses behind a button, and every tap target needs to be thumb-sized. Mobile is not a separate page — it is the same content re-ordered for a narrow screen, which is why a mobile wireframe is part of the same design pass. The responsive website example page shows how that one column comes to life in code.
MOBILE / — mobile wireframe (the homepage, phone width)
+--------------------------------------------------------+
| [Menu] [Logo] [Phone icon]|
+--------------------------------------------------------+
| HERO |
| H1 (wraps to two or three lines) [CTA] |
+--------------------------------------------------------+
| TRUST STRIP: swipeable row of 3-4 short badges |
+--------------------------------------------------------+
| CARD (full width, one per row) |
+--------------------------------------------------------+
| CARD |
+--------------------------------------------------------+
| CARD |
+--------------------------------------------------------+
| FINAL CTA: full-width, thumb-reachable button |
+--------------------------------------------------------+
| FOOTER: stacked links with larger touch targets |
+--------------------------------------------------------+
The sections in order:
- Header — a menu button, the logo, and a single persistent action
- Hero — the headline, shortened so it reads on a small screen
- Trust strip — a swipeable row instead of a wide bar
- Content cards — stacked one per row
- Final CTA — a full-width button a thumb can reach
- Footer — stacked links with bigger targets
The wireframe as HTML you can open
The wireframes above are readable and copyable as text, but you may also want a version you can actually open in a browser. The file below renders the homepage wireframe as real gray boxes in a window. Copy it, save it as wireframe.html, and double-click it to open.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Homepage wireframe - Basic Website Example</title>
<style>
:root { --line: #94a3b8; --fill: #e2e8f0; --text: #334155; }
* { box-sizing: border-box; }
body {
font: 14px/1.5 system-ui, -apple-system, sans-serif;
color: var(--text);
max-width: 880px;
margin: 2rem auto;
padding: 0 1rem;
}
.wf { border: 2px solid var(--line); border-radius: 6px; }
.row {
display: flex;
gap: 8px;
align-items: center;
padding: 10px;
border-bottom: 2px solid var(--line);
background: #fff;
}
.row:last-child { border-bottom: 0; }
.box {
border: 1px dashed var(--line);
background: var(--fill);
padding: 6px 10px;
border-radius: 4px;
text-align: center;
}
.grow { flex: 1; }
.label { font-size: 12px; color: #64748b; }
</style>
</head>
<body>
<h1>Homepage wireframe</h1>
<div class="wf">
<div class="row">
<span class="box">Logo</span>
<span class="box grow">Nav: Home · About · Work · Contact</span>
<span class="box">CTA</span>
</div>
<div class="row">
<div class="grow">
<div class="box">H1 headline</div>
<div class="box">Subheadline</div>
</div>
<span class="box">Primary CTA</span>
</div>
<div class="row">
<span class="box grow">Trust strip - rating, years, reviews</span>
</div>
<div class="row">
<span class="box grow">Card</span>
<span class="box grow">Card</span>
<span class="box grow">Card</span>
</div>
<div class="row">
<span class="box grow">Final call to action</span>
</div>
<div class="row">
<span class="box grow">Footer - links, contact, legal</span>
</div>
</div>
</body>
</html>
Copyable blank wireframe template
Use this blank sheet to sketch your own wireframe. Copy it, fill in the brackets, and draw each section as a box top to bottom in reading order. It works for any of the six layouts on this page — the sections are the same, only the order and emphasis change.
# Blank wireframe sheet
Project: [Project name]
Page: [Homepage / Business / Landing / Shop / Portfolio / Mobile]
Goal: [What a visitor should do on this page]
Draw each section as a box, top to bottom, in reading order:
1. [Header - logo, navigation, persistent CTA]
2. [Hero - headline, subheadline, primary CTA]
3. [Trust strip - optional]
4. [Main content - cards, lists, or text blocks]
5. [Proof - testimonials, logos, reviews]
6. [Closing CTA - repeat the main action]
7. [Footer - contact, links, legal]
Notes for this page:
- Primary action: [the one action this page must produce]
- Content order, most to least important:
[1] ______________________
[2] ______________________
[3] ______________________
- Mobile: [what changes, reorders, or disappears on a phone]
- Outgoing links from this page: [which pages this page points to]
How to draw a wireframe
The template only helps if you fill it with real decisions. Five steps keep the sketch useful:
- State the page's one job. Write the action a visitor should take before you draw a single box. If you cannot name it, the wireframe has no reason to exist.
- List the content it needs. Write down every block the page must contain, then order it from most to least important to the goal.
- Draw each content group as a box. Put the boxes top to bottom, in the order you chose. The arrangement of those boxes is the wireframe.
- Label every box and name the CTA. A box labeled "hero" is still vague; a box labeled "H1 + subhead + primary CTA" is a decision someone can approve.
- Sketch the mobile version before you design. Stack the columns, collapse the menu, and check that the main action is thumb-reachable. Doing this while sketching is free; doing it after the design is not.
The wireframe is the cheapest artifact on the project to change, which is exactly why it comes first: a mistake fixed on paper costs minutes, the same mistake fixed in code costs days. Knowing the website structure of the whole site before you wireframe individual pages keeps the page-level boxes consistent with the navigation.
FAQ
Website wireframe FAQ
What is a website wireframe?
What is the difference between a wireframe, a mockup, and a prototype?
Do I need a wireframe for every page?
How detailed should a wireframe be?
What tool should I use to make a wireframe?
Can I copy the wireframes on this page?
Is a wireframe part of a website proposal?
Where to go next
The wireframe is the first plan you sketch; the other templates around it cover the rest of the lifecycle. The website proposal example turns the wireframe into a scope and a price, the website audit report example reviews a site that already exists, and the website maintenance plan example keeps the finished site healthy after launch.
To see these skeletons filled in with real content, browse the website examples. To move from sketch to working code, start with the HTML website example or the responsive website example, and keep the whole set of copyable documents in the templates library.