How to make a website wireframe

01What a wireframe is, and why bother

A wireframe is a skeleton of a page: where things go and how important each is, without color, fonts or final images. Deciding structure separately from style is faster, because moving a gray box is easier than moving a finished design, and it keeps conversations about what the page should do separate from conversations about how it should look.

Most website problems are structure problems: the wrong thing first, too many competing actions, important information buried. A wireframe catches them when they are cheap to fix.

02Step by step

1. 1Write the page's jobOne sentence: "Get small business owners to book a free consultation."
2. 2List the contentEverything the page needs to say to do that job: headline, proof, services, pricing, FAQ, contact.
3. 3Order by importanceWhat must a visitor see first, second, third? That becomes the top-to-bottom order.
4. 4Sketch boxesA rectangle per section, labeled: "Headline + one line + button", "3 client logos", "Photo of team".
5. 5Do mobileStack the sections for a narrow screen; decide what shrinks, hides or reorders.
6. 6Test and refineShow it to two or three people in your audience and ask what the page is for and what they would click.

03Fidelity: how detailed should it be?

04Tools

Paper and a pen are the fastest tools and the hardest to over-polish. For shareable wireframes, Figma and similar design tools have wireframe kits, and many AI builders now generate a first layout from a description that works as a live wireframe. Whatever you use, resist adding style too early.

• Paper or whiteboard: fastest for exploring.
• Figma, Penpot or similar: shareable, reusable components.
• AI builders: a clickable first layout from a description.

05Wireframing the whole site, not just pages

Before individual pages, sketch the site map: the list of pages and how they connect. A small business site might be a homepage linking to services, about, a few case studies and contact, with the main navigation showing four or five items. Deciding this first stops pages from overlapping and makes navigation simpler, because every page has a clear reason to exist. It also shows search engines a tidy structure, which helps them understand what each page is about.

06Common wireframing mistakes

Copying a template's structure instead of starting from your content; designing only for desktop; using placeholder Latin text, which hides whether your real words fit; and treating the wireframe as final instead of something to test. Hierarchy matters most: visual hierarchy in web design explains how importance turns into layout, and what should a landing page include? gives a proven section order for single-goal pages.

Once structure is agreed, move on to visual design: how to make a beautiful website covers that stage, and how to turn a Figma design into a website covers getting it built.