What a prototype is, and how it differs from a design
A prototype is the grey skeleton of a future website. Blocks are drawn as rectangles, headlines as placeholder text, photos as frames. There are no brand colours, fonts or retouched images. That is deliberate: nothing distracts the eye, so the conversation stays on meaning and flow.
A design mock-up answers the question “how does it look?”. A prototype answers “how does it work?”. When the two get mixed, the owner spends half an hour picking a button shade, while nobody notices that the button sits below four screens of text.
Why prototype before design
A structural mistake on a wireframe is fixed with a conversation and a few moved rectangles. In a finished design the same mistake means rebuilding screens, and after development it means a developer redoing work. The later a problem is found, the more it costs.
This matters most for small businesses in Tashkent and the regions, where a website budget is often planned as a single push with no room for several rounds of rework. Imagine a clinic whose main goal is booking appointments, yet the price list is buried in the third section. On a prototype you see it at once. In a polished design it is much easier to miss.
There is a side benefit too: a prototype forces you to answer questions that tend to be postponed. What single action do we want from the visitor? What doubts will they have before getting in touch? How are we different from the other results they are comparing us with?
How the prototyping process works
The order is usually the one below, and each step can be shown to the client before moving on:
- Define the goal of the site and the main action: a call, an enquiry, an order, a Telegram message.
- Describe who arrives and from where, whether Instagram ads, Google search, a Telegram channel or OLX, and what they want to find out.
- Build a site map and the links between pages.
- Sketch the key screens: block order, forms, buttons.
- Link the screens with transitions so the prototype can be clicked through.
- Review, adjust and lock the approved version.
What kind of prototype different sites need
A business card site or landing page needs only a few screens, but block order still decides a lot: the offer, proof, the logic behind pricing, the form. If traffic comes from targeted ads, most people will open the page on a phone, so it is smart to start the wireframe from the mobile screen.
An online shop or catalogue is more demanding: filters, product pages, the cart, checkout, delivery options, payment via Click or Payme. Every extra form field risks losing a buyer, and it is easier to spot such a field on a wireframe than in a live shop.
If the site connects to a CRM, a customer account or a Telegram bot, the prototype shows what data the user sees and where notifications arrive. Some questions that would otherwise surface during back-end development are answered in advance.
What to check when approving a prototype
Look at the prototype as a customer, not as the owner. Ideally, invite the person who talks to buyers every day: a sales manager knows the real questions better than any brief.
- Is it clear within seconds what you do and who it is for?
- Is the path to an enquiry short, and is the contact button reachable without long scrolling?
- Can people choose how to reach you: form, phone, Telegram?
- Are the usual objections answered: price, timing, guarantees, address?
- Are any needed sections missing: delivery, payment, reviews, contacts?
- Does the page read comfortably on a phone?
- Do you need Russian and Uzbek versions, and how does a visitor switch between them?
Common mistakes
The first is skipping the stage because “the site is simple”. Even a compact structure can end up with blocks in an awkward order. The second is showing the client static images rather than a clickable flow, which makes it impossible to judge navigation. The third is debating colours and fonts at the wireframe stage and blurring the main question.
Do not expect a perfectly linear process. During detailed design a small structural gap sometimes appears, and it is wiser to fix it straight away than to carry it to the end of the project. Big decisions, however, should be made on the prototype.
Prototyping in markdev projects
At markdev, the prototype is part of turnkey website development: first the structure and approval, then design and front-end build. The cost of this stage depends on the number of screens and the complexity of the user scenarios, not on visual polish.
If you are planning a website and want to see its logic before spending budget on design, describe the task to the markdev team. We will go through the structure with you and suggest where to start.
FAQ
Do I need a prototype for a simple business card site?
Yes, even a compact one. A few screens can still end up with blocks in an awkward order, and a wireframe shows this before design begins.
How is a prototype different from a design mock-up?
A prototype shows structure and logic without final styling. A design mock-up adds colours, fonts and images, and it is produced after the prototype is approved.
Which tool is used to build a prototype?
Most often Figma, because it makes it easy to assemble blocks and link screens so the client can click through the flow. Simpler tools work for the very first sketch.
When do I need a clickable prototype?
When the logic is complex: multi-step forms, a catalogue with filters, a customer account, checkout with payment. You need to see whether a person can complete the whole journey.
Can the prototype be changed after approval?
Yes, but the later it happens, the more it costs. The cheapest structural changes are made before design starts, so review the wireframe carefully.
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.