Short answer: A website wireframe is a simple plan of a page: which blocks it has, in what order, and where the menu, buttons and forms go. It’s usually gray boxes and plain labels, made before the design so everyone agrees on the structure first.
What a website wireframe is
Balsamiq, the maker of a wireframing tool, calls a wireframe the skeleton of a digital project. It focuses on layout and where content goes, not on colors, fonts or visual polish.
The Interaction Design Foundation describes wireframes as basic visual representations of the structure and layout of a page or app. They show where headers, buttons, navigation and content blocks go, so designers, developers and everyone else involved work from the same plan.
Tom Lowry of Figma puts the reason this way: a wireframe gives people an early window into the project, before anyone has spent a lot of time polishing it.
Low, mid and high fidelity
Fidelity is how closely a wireframe resembles the finished page. A low-fidelity wireframe is a rough sketch or block diagram, usually in black and white or gray, about layout and structure.
A high-fidelity wireframe adds real content, accurate spacing, type, colors and brand elements, so it looks close to the final design. Figma also describes a mid-fidelity step that helps designers iterate and shape the final design.
Balsamiq’s advice is to start with a low-fidelity wireframe while you decide what to build, and add detail once the idea is set.
Wireframe, mockup and prototype
| Deliverable | What it shows | When it comes |
|---|---|---|
| Wireframe | Structure and layout: blocks, order, menus and buttons | First, because it’s the fastest to make and change |
| Mockup | What the final design will look like | After the wireframe |
| Prototype | A close simulation of the product that people can click through | Before building, to test the design with people |
From Balsamiq’s guide to wireframes, read November 3, 2026.
NN/g, a user experience research firm, notes that wireframes are a great way of showing layout but don’t describe interaction well. A prototype covers that: NN/g calls it a candidate design you can put in front of people. Our UX vs UI guide explains how user experience and interface design differ.
What to put in a website wireframe
The Interaction Design Foundation lists the parts a good wireframe usually has: the layout and structure, the navigation, a content hierarchy that puts the most important content first, the interactive elements like buttons and forms, and notes that explain decisions.
Draw it at the size your visitors use. Figma suggests matching their screen and lists 393 by 852 pixels for a phone and 1,440 by 1,024 for a desktop.
Our guides to the website header and the website footer cover two blocks that almost every page of a site shares.
How to make a website wireframe
- Write down the goal of the page and the one action you want visitors to take.
- List the blocks the page needs, from the header to the footer.
- Put the blocks in the order a visitor needs them, the most important first.
- Draw each block as a gray box with a label, on paper or in a tool.
- Use real headlines and button text where you can, even rough ones, instead of placeholder text.
- Draw the page again at phone size and see where each block lands.
- Show it to someone, note what confuses them and fix the boxes before anyone designs.
Once the structure is settled, it moves on to a mockup and the design. Our guide to landing pages covers what a page built for one action needs.
Our own home page as a wireframe
On November 3, 2026, we read our English home page as a wireframe, in a browser at 1,440 and 390 pixels wide.
It has seven blocks in the same order at both widths: the opening, a short statement, our services, our work, our process, the blog and contact. The footer comes after them.
On a computer the page is 14.1 screens tall, and the contact block starts 11.2 screens down. On a phone it’s 16.8 screens tall, and contact starts 12.1 screens down.
The order puts contact last, so the header carries the way there. It stays fixed as you scroll: on a computer it shows “Write to us” on every screen, and on a phone the same link sits in the menu its Menu button opens.
That’s the kind of decision a wireframe is for: where the main action sits, and how a visitor reaches it from any block.
Before you move on to the design
- The page has one goal and one main action.
- Every block has a label and a reason to be there.
- The blocks follow the order a visitor needs.
- Buttons and forms say what they do.
- A phone version places every block.
- Someone outside the project has seen it.
RememberSettle the blocks and their order in gray boxes first: a wireframe is faster to change than a finished design.
If you want a site planned this way, our web design service can do it with you.
Quick answers about website wireframes
What is a wireframe in web design?
A wireframe is a simple plan of a web page that shows its structure: the blocks, their order, the navigation and where buttons and forms go. Balsamiq calls it the skeleton of the project, without colors, fonts or visual polish.
What is the difference between a wireframe and a mockup?
Balsamiq puts it this way: wireframes focus on structure and functionality, while mockups show what the final design will look like. The wireframe comes first, and the mockup adds colors, type and images on top of that structure.
Should a wireframe have colors?
Usually not at first. Figma suggests starting in grayscale, with few fonts and boxes in place of graphics, so the conversation stays on structure. Color and type come later, in a high-fidelity wireframe or the mockup.
What tools can I use to make a wireframe?
Pencil and paper work for quick sketches, and Balsamiq lists them first among wireframing tools. Software like Balsamiq or Figma helps when a team needs to share, save and change wireframes, or turn them into mockups.
Do I need a wireframe for a small business website?
It helps even for a site of a few pages. A wireframe lets you agree on what each page holds and where the main action goes before anyone spends time on design. Wireframes are also quick to create and easy to change.
Sources
Read on November 3, 2026. Balsamiq, What is a wireframe? A guide for non-designers; Figma, What is wireframing?; Interaction Design Foundation, Wireframes; Nielsen Norman Group, UX Prototypes: Low Fidelity vs. High Fidelity and Wireflows: A UX Deliverable for Workflows and Apps. Our own case: our English home page read in a browser at 1,440 and 390 pixels wide, November 3, 2026.