Website wireframe

Turn what the company wants to say into the structure of a page: which sections, in what order, each one answering the visitor's next question. The wireframe decides what the copy has to fit, so it comes before the words.

When to use it

• A new homepage, product page, campaign landing page, pricing page or book-a-demo page.
• A redesign, after /website-score has shown which sections are weak.

Don't use it for the final words (that's /website-copy), for the page list across the whole site (that's /site-architecture), or for a brand identity.

Inputs

Required:

• Page purpose: homepage, product, campaign, pricing or book-a-demo, and the one action you want the visitor to take.
• Who the page is for, from context/icp/.
• What to say, from context/positioning/ and context/messaging/.

Helps if you have it: proof you can use (logos, quotes, numbers, case studies), competitor pages from context/competitors/, and your brand tokens from context/brand/ if you have them.

Agency users: swap context/ for clients/<client>/context/. If positioning or messaging is missing, ask for a one-line value proposition and the top three benefits, and flag that the structure rests on a draft message.

Steps

1. Fix the goal. One primary call to action per page, and at most one secondary. Produces: the CTA and the success action.
2. Map the visitor's questions in the order they'll ask them: what is this, is it for me, what problem does it solve, how does it work, why believe you, what does it cost or risk, what do I do now. Produces: a question list.
3. Pick reference pages. Look at 4 to 8 live pages for the same page type and audience. a1.gallery is a good library if you have it; otherwise search the web or use the competitor pages. Take section order and proof placement as cues, never the copy or layout wholesale. Produces: a short list of references with what each does well.
4. Choose the sections that answer those questions. The usual run: hero, logo bar, problem, how it works, benefits or features, proof, objections or FAQ, final CTA. Cut any section that doesn't answer a question. Produces: the block sequence.
5. Spec each section: its job, the copy zones (headline, subhead, body, CTA label), the visual (product screen, diagram, photo, none) and the proof it carries. Produces: one spec block per section.
6. Plan mobile. Say how each section stacks, what gets hidden or shortened, and where the CTA repeats. Produces: mobile notes.
7. Build the mock in plain HTML with Tailwind, React, or markdown boxes, whichever the user's team uses. Grey boxes and placeholder labels like [Headline, under 100 characters]. Produces: a file a designer or developer can open.

Book-a-demo pages

First check a demo is the right ask: if the product can be tried self-serve, offer that to low-intent visitors. If it is, the form is the hero, the header is logo-only with no nav, and nothing on the page links away from the booking.

What good looks like

• Each section answers one visitor question, and the order follows how they'd ask them.
• One primary CTA, repeated at sensible points, never competing with a second ask.
• Proof sits near the claims it supports and near the CTA.
• Copy zones carry length limits: headlines under 100 characters, subheads under 150.
• Visual values come from your brand tokens in context/brand/ if you have them, not invented colours or fonts.

Mistakes to avoid

• Starting from a template and filling it in, instead of starting from the visitor's questions.
• Three feature grids in a row with generic icons. Show the product instead.
• Putting proof at the very bottom where nobody scrolls.
• Lorem ipsum. Placeholders should say what goes there and how long it can be.
• Copying a reference site's structure exactly. Your message decides the order.

Output

Save to outputs/website/MMYY-wireframe-<page>.md, with the mock alongside as .html or .jsx if you built one:

# Wireframe: <page>
Goal: <primary CTA>    Audience: <ICP>    References: <list>

## 1. Hero
Job: ...    Copy zones: H1 [<100 chars], subhead [<150 chars], CTA "..."
Visual: ...    Proof: ...    Mobile: ...
## 2. ...

Next step: write the words with /website-copy, then test the riskiest section with /ab-testing.