Website prototyping: from user journey to review

A website prototype is a layout of pages and the links between them, without the final design. It shows where blocks sit, where buttons lead and how a visitor reaches an enquiry. It is approved before design and coding to avoid reworking the finished site.

Why you need a website prototype

A prototype helps agree on page structure and visitor actions before development. Start with a specific journey: find a service, compare terms, fill in a form and get a confirmation. Changing a layout takes minutes; changing a coded page takes hours of designer and developer time.

• The client and the team share the same picture of the site.
• The structure follows search queries and services, so SEO is built in from the first step.
• Budget and timeline are estimated against real screens.

Types of prototypes

How much detail do you need?

To discuss structure, a block layout with real headings is enough. To test navigation, prepare a clickable prototype. Figma lets you link screens and set interactions, so you can show them to the client before any code is written.

A prototype simulates the selected journeys. Data submission, payments and integrations are tested separately on the working site.

How to make a website prototype in Figma

1. Create frames for desktop and mobile (for example, 1440 and 390 pixels wide).
2. Build blocks from simple rectangles and real headings; turn repeated elements into components.
3. Use Auto Layout so blocks adapt to text length.
4. In the Prototype tab, connect buttons to the right screens and set the on-click action.
5. Open presentation mode and share a link for viewing and comments.

Figma's AI features speed up a first draft, while journey logic and headings are set by someone who knows the client's business.

What to show in the prototype

• The main path and the way back to the previous step.
• Mobile navigation, long headings and different amounts of text.
• An empty search result, a form error, loading and a success state.
• Space for service terms, contacts and field hints.

How to test a prototype

Give someone a task without hints and watch where they stop. Write down the problem, its impact and the proposed change. After making changes, run the scenario again. Five participants are usually enough to reveal the main problems.

Common prototype mistakes

• Placeholder text in place of real headings: the structure looks logical until the actual wording arrives.
• A desktop version only, although most visitors come from phones.
• Error and empty states are missing.
• The enquiry form hidden at the bottom of a long page with no repeated call to action.

What to hand over to the developer

Share a link to the approved version, a list of screens, a description of states and open questions. In Dev Mode the developer sees sizes, spacing and styles. Note which elements still need design or a technical decision. This package helps estimate the work and reduces misunderstandings during build.

At our agency, the prototype is part of the project timeline: a landing page goes live within 3 working days and a website within 10 working days after the brief is agreed and materials are received. After the prototype comes custom design, or, for a live site, a redesign that preserves rankings.

Portfolio projects

• Dental Clinic — custom structure and design for a dental clinic website with online booking

FAQ

What is a website prototype in simple terms?

It is a rough layout of pages: where blocks sit, what the headings say, where buttons lead. It is used to agree on structure before design and coding.

How is a prototype different from a design mock-up?

A prototype shows structure and journeys in grey blocks. A mock-up adds brand colours, fonts, photos and illustrations. The mock-up is built on top of the approved prototype.

Which tool should I use to prototype a website?

Figma is the main tool: you draw wireframes, link screens into a clickable prototype and hand the file to a developer. Paper or an online whiteboard is fine for sketches.

How long does prototyping take?

A landing page prototype takes about a day; a site with several sections takes a few working days. It is part of the overall timeline: a landing page within 3 and a website within 10 working days after the brief is agreed.

Does a small website need a prototype?

Yes, at least as a wireframe of the home page and one service page. It takes little time and settles most disagreements before the design stage.

Who creates a website prototype?

Usually a UX designer together with a marketer or SEO specialist: the first is responsible for usable journeys, the second for a structure that matches search queries and leads to an enquiry. The client provides a list of services, examples and quick feedback.

Sources

• Figma: Guide to prototyping