A wireframe is a bare-bones drawing of a webpage that shows where things go, not what they look like

A wireframe is a straightforward layout sketch that maps out the structure of a webpage: where the header sits, where the navigation lives, where content blocks go, and how they relate to each other. It has no colors, no fonts, no images — just rectangles and labels. The purpose is to decide the arrangement and flow before you write any code or design anything visual.

You create a wireframe to answer questions like: Should the search box be in the top right or top left? Does the sidebar go on the left or right? How much space does the main content need? Should the footer have one column or three? These decisions affect how users move through the page and how straightforward it is to build. A wireframe forces you to think about structure separately from decoration, which saves time later when you're actually coding.

Wireframes range from rough pencil sketches on paper to detailed digital mockups with measurements and annotations. Most developers start loose and add detail only if they need to share the wireframe with someone else or hand it off to a designer.

Key Takeaways

  • A wireframe shows layout and structure only — no colors, fonts, or images — so you can focus on how the page is organized before you design it.
  • You can sketch wireframes on paper with a pencil, or use free tools like Figma, Balsamiq, or even a text editor to draw boxes and labels.
  • Start with the biggest sections first: header, main content area, sidebar, footer. Then break those into smaller pieces.
  • Label every box with what goes inside it so anyone reading the wireframe knows whether that rectangle is a button, a form field, an image, or a block of text.
  • A wireframe is a thinking tool for you and a communication tool for your team — it should be fast to make and straightforward to change.

Start with paper and pencil if you are working alone

The fastest way to wireframe is to grab a piece of paper and a pencil. Sketch rectangles for each major section: draw a thin rectangle across the top for the header, a wider rectangle below for the main content, maybe a narrower rectangle on the side for a sidebar, and another thin one at the bottom for the footer. Label each box with what it contains.

Paper wireframes are useful because they are fast, they do not require you to learn software, and they force you to think in rough shapes instead of getting stuck on details like exact spacing or font size. You can erase and redraw in seconds. If you are the only person who needs to read it, paper is often the right choice.

The downside is that paper wireframes are hard to share, hard to revise once they are done, and hard to measure if you need to know exact widths or heights. If you are working with a designer or another developer, or if you need to hand off the wireframe to someone else, move to a digital tool.

Use Figma or Balsamiq for wireframes you need to share

Figma is a free online design tool that works in your browser. Open a new file, use the rectangle tool to draw boxes, add text labels inside them, and arrange them on the canvas. Figma lets you share a link with other people, so they can view your wireframe and leave comments. You can also export it as an image or PDF.

Balsamiq is a tool built specifically for wireframing. It has a library of pre-drawn shapes — buttons, form fields, navigation bars, image placeholders — that you drag onto the canvas. This is faster than drawing rectangles by hand in Figma, and the result looks intentionally rough, which signals to viewers that this is a sketch, not a finished design. Balsamiq has a free trial and a paid plan; many teams use it because it is faster than Figma for wireframes.

Other options include Wireframe.cc (a straightforward browser-based wireframing tool), Adobe XD (part of the Creative Cloud suite), or even a Google Drawing or Lucidchart document. The tool matters less than the habit of sketching before you code. Pick one, learn it well enough to draw boxes and add labels, and move on.

Organize your wireframe from largest sections down to smallest details

Start by drawing the page-level sections. Most websites have a header at the top (containing logo, navigation, maybe a search box), a main content area in the middle, possibly a sidebar, and a footer at the bottom. Draw these as large rectangles first. Do not worry about exact proportions yet.

Then break each section into smaller pieces. Inside the header, draw separate boxes for the logo area, the navigation menu, and the search box. Inside the main content area, draw boxes for the headline, the body text, images, and any calls to action. Inside the sidebar, draw boxes for filters, related links, or ads. This hierarchical approach keeps you from getting lost in details.

Label every box clearly. Instead of leaving a rectangle blank, write inside it: "Hero Image", "Product Title", "Price", "Add to Cart Button", "Customer Reviews", "Related Products". The labels tell anyone reading the wireframe what content goes in that space and what its purpose is.

Decide on layout patterns that match your content

Common wireframe layouts include single-column (everything stacked vertically), two-column (main content on the left, sidebar on the right), and three-column (sidebar left, main content center, sidebar right). Mobile wireframes are almost always single-column because the screen is narrow. Desktop wireframes often use two or three columns.

Think about what content matters most and give it the most space. If you are building a product page, the product image and description should dominate. If you are building a blog, the article text should be the largest element. If you are building a search results page, the results list should take up most of the space, with filters on the side.

Do not try to fit everything equally. Wireframing forces you to make choices about hierarchy and importance. If you cannot fit something on the page without making it tiny, that is a signal that you need to rethink the layout or cut the content.

Add notes and measurements if the wireframe will be handed to a developer or designer

If you are the only person who will read the wireframe, labels and rough proportions are enough. If someone else will build or design from your wireframe, add more detail: write the width of the main content area (for example, "960 pixels"), note the spacing between sections, mark which elements are clickable, and explain any interactions (for example, "Clicking this button opens a modal" or "This menu expands on hover").

Annotations are notes you add to the wireframe to explain decisions or clarify intent. Write them directly on the wireframe or in a separate document. Examples: "This sidebar is hidden on mobile", "This form has three steps", "This dropdown filters the list below", "This image is a placeholder — actual size TBD".

Measurements and annotations turn a wireframe into a specification that a developer or designer can follow. Without them, people guess at your intent and often guess wrong.

Test your wireframe by walking through a user task

Once you have drawn the layout, trace through a realistic task: "A user lands on the page. Where do they look first? Can they find the search box? Can they add something to their cart? Can they get to the checkout?" If the answer to any of these is "I am not sure", your wireframe is not clear enough.

A good wireframe makes the user's path obvious. The most important content should be straightforward to find. Navigation should be consistent. Forms should flow logically from top to bottom. If you have to explain your wireframe to someone, it needs revision.

Wireframes are cheap to change. If you realize the sidebar should be on the left instead of the right, or the footer needs more sections, or the main content area is too narrow, erase and redraw. This is exactly why you wireframe before you code — changes take minutes on paper or in Figma, but hours once you have written HTML and CSS.

Frequently Asked Questions

Should I wireframe on paper or in a tool?

Paper is faster if you are working alone and do not need to share the wireframe. A digital tool like Figma or Balsamiq is better if you are collaborating, need to revise frequently, or want to export the wireframe as an image or PDF to share with your team.

How detailed should a wireframe be?

A wireframe should show layout and structure, not visual design. Include labels for every section, note the major content blocks, and add measurements or annotations only if someone else will build from it. If you are spending time on colors, fonts, or exact spacing, you have moved past wireframing into design.

Do I need to wireframe every page?

Wireframe the pages that have the most complex layouts or the most important user tasks. A straightforward contact form page might not need a wireframe. A product page with multiple sections, a checkout flow with several steps, or a dashboard with many data elements should all be wireframed first.

Can I skip wireframing and just start coding?

You can, but you will likely rearrange things as you code, which wastes time. Wireframing takes 30 minutes to an hour and saves hours of rework later. It also makes it easier to spot problems in your layout before you have written any code.

What if my wireframe does not match the final design?

That is normal. Wireframes are starting points, not blueprints. As you code and test, you will learn what works and what does not. The wireframe got you thinking about structure early, which is the whole point. Keep the wireframe for reference, but do not treat it as a contract.