What a website prototype is and why it comes before design
A prototype shows which blocks sit on a page, in what order, and where each button leads. Colours, fonts and photos are secondary at this point. The goal is simple: agree on the logic before a designer spends days on visuals and a developer spends days on code.
Picture the owner of a coffee shop chain in Tashkent who asks for "a site like our competitor's". A week later it turns out the business needs a menu with prices in soums, a branch selector and checkout through Click or Payme, while the finished mockup contains only a good-looking home page. Moving a block on a sketch is cheap. Reworking an approved design and pages that are already coded is expensive and frustrating.
Three levels of a website prototype: from sketch to clickable model
Prototypes differ in fidelity. The more detail, the more time it takes to build and the more precisely you can judge the outcome. That is why the format should match the task rather than default to the most elaborate option.
- Wireframe (low fidelity): grey boxes and labels, often drawn by hand or in a simple editor. Good for a first conversation about sections and their order. It is easier for a client to say "drop this block" when they are not looking at an almost finished screen.
- Static mockup (high fidelity): exact sizes, real copy instead of placeholders, sometimes a close approximation of the future palette. It is easy to approve, and the developer gets clear requirements before coding starts.
- Clickable prototype: screens linked by transitions, usually built in Figma. You can walk through the route from catalogue to checkout the way you would on a live site.
- Partial fidelity: only the key screens of the main scenario are detailed, the rest stay as sketches. A sensible compromise when the budget is tight but the main customer path must be tested.
Which format your site needs
For a brochure site of a dental clinic or a renovation studio with a few screens, a wireframe followed by a static mockup is usually enough. The scenario is simple: look at services, leave a phone number or message on Telegram. A clickable demo adds very little.
An online shop, a catalogue with filters, a personal account, booking with time slots or a multi-step quote form is a different story. The risk there is not the colour of a button but a visitor who cannot find the right filter or abandons the cart on the third step. Problems like these only show up in a clickable prototype, and that is where they are cheapest to fix.
A practical rule: if the site has more than one important scenario, or steps where people choose options and enter data, build a clickable version. If the site mostly informs and leads to a single action, a mockup is enough.
Mobile first, desktop when it matters
Most visitors to local websites arrive from a phone: from Instagram, Telegram channels, Meta ads or search. So the mobile prototype should be worked out earlier and in more detail than the desktop one. The call button, the Telegram link and an easy phone-number field need to be within thumb reach, not hidden somewhere in the menu.
A separate desktop prototype makes sense when a noticeable share of customers use computers: B2B sites, complex services, portals with long tables and calculators. Screen logic differs there, and simply stretching the mobile layout produces an awkward result.
What to check before you approve a prototype
Approving a prototype on gut feeling only pushes problems into the development stage. Go through it with specific questions and, if you can, let someone outside the project try it.
Ask a stranger to complete a task without hints and watch where they stop. It is the fastest way to find weak spots.
- Is it clear from the first screen what you do and what to do next?
- Is the path to an enquiry, a call or a payment visible from any page?
- Will a visitor get lost in the catalogue and filters?
- Is there room for reviews, prices, addresses and other proof your customers care about?
- Is it defined what happens after a form is sent: a message, an email, a Telegram notification?
- Do you have enough copy and photos to fill the blocks, or will someone have to invent them on the fly?
What shapes the cost of a prototype
The price depends on the number of screens, the complexity of scenarios, the level of detail and whether a separate desktop version is needed. A quick wireframe takes little work, while a detailed clickable prototype of a shop or an account area takes noticeably more. Readiness of materials matters too: catalogue structure, copy, the list of services.
Saving money at this stage is often an illusion. A prototype costs far less than reworking finished design or programmed logic, so changes made on it are the cheapest you will ever make. The sensible order is: wireframe, approved mockup, a clickable check if needed, then final design and development.
Where to start
Define the one action a visitor should take: leave an enquiry, order, book or call. Both the structure and the required fidelity follow from that. Then collect examples of sites you like and a list of sections you expect.
The markdev team builds prototyping into turnkey website development and chooses the level of detail to fit your task, so you see the result before design and coding. If you would like to discuss your project, get in touch and we will review the task and suggest a suitable format.
FAQ
What kind of prototype does a brochure website need?
Usually a wireframe and a high-fidelity static mockup of a few screens. The scenarios are simple, so a clickable version adds little extra information.
When do I need a clickable prototype?
When the logic is complex: a catalogue with filters, a multi-step form, a personal account, checkout. It shows whether users get lost and whether navigation between sections works.
Do I need separate prototypes for mobile and desktop?
If a large share of customers use computers, as in B2B, it is better to design both. For projects with mostly mobile traffic, start with the phone and give it more attention.
How is a prototype different from design?
A prototype answers how the site is organised and how it works, while design answers how it looks. The first is agreed upon first, so visuals are not redone when the structure changes.
What tool are clickable prototypes made in?
Most often Figma: you can link screens with transitions, share the result with the client by link and collect feedback before development begins.
Let’s look at your task for free
Leave your contact — in a 15-minute call we’ll show where leads get lost and what to fix first.