What a mockup is and why it comes before development
A mockup is a picture of each page as a visitor will see it: layout grid, fonts, colours, buttons, photos and copy. It is usually built in Figma, where you open a link and leave comments right on the screen instead of passing files around in Telegram.
The point is the cost of a mistake. Moving an enquiry form to a better spot in a mockup takes minutes. Doing the same on a finished site means rebuilding the layout and testing everything again. A mockup is not a formality; it is the cheapest way to test an idea.
Do not mix up three different things. A wireframe answers where things go, a mockup shows how it looks, and a clickable prototype shows how it behaves.
Stages of a website design mockup
Order matters: goal and structure first, styling second. If you start with attractive pictures, the discussion quickly becomes a debate about taste instead of what the visitor should do.
- Brief: what the company sells, who the buyer is, and which action you want — a call, an enquiry, an order through Telegram.
- Page structure and the sequence of blocks on each page.
- References and style: logo, brand colours, examples of sites you like and dislike.
- Screens for phone and desktop.
- Revisions and sign-off by one responsible person.
- Handover to the developer: styles, sizes and exported graphics.
What to account for in the Uzbekistan market
Many visitors arrive from a phone, coming from Instagram, Telegram channels or Meta ads. So it is wiser to design the mobile screen first and adapt the desktop version afterwards, not the other way round.
- Two languages. Uzbek copy is often longer than Russian, and buttons and headlines must hold up to that.
- Contact options — call, Telegram, a form — should sit in plain view, not only in the footer.
- If you take online orders, paying with Click or Payme should be a clear step without extra fields.
- Real photos of products, the team and the premises: stock images are spotted at once.
- Prices in sum and a familiar phone number format.
- Light images: connections outside the capital can be unreliable, and a heavy page loses visitors.
What drives the price
Cost depends on the number of unique screens, not the number of pages: ten product cards on one template count as one screen. Beyond that, it is affected by the complexity of interactions and animation, whether icons and illustrations are needed, whether the brand style is created from scratch or a brand book already exists, how many revision rounds are included and whether you need two language versions.
A template-based mockup can be perfectly fine for a simple landing page. For an online shop or a service with several user paths, a template usually falls short. A realistic figure can only be given after the brief, not from the sentence “we need a website”.
Common mistakes on both sides
Most problems come not from a weak designer but from how the process is organised.
- The mockup is drawn with “Lorem ipsum”, and the real headlines do not fit later.
- Only the desktop version is approved.
- Feedback is gathered from ten people and each pulls in a different direction. Name one decision-maker.
- Choices follow the director’s taste instead of how customers behave.
- Five equal buttons compete on one screen and nobody knows what matters most.
- Nobody outside the company sees the mockup before launch.
How to review and accept the work
Walk through the mockup as a customer would. Open the first screen and answer within a few seconds: what does the company do, what does it offer, where do I tap? Check the awkward states too: a form error, an empty cart, a very long product name.
Decide in advance how you will measure results: goals in analytics, tracking of calls and clicks to Telegram. Without that, a month later you will not know whether the new design helped or the site simply looks different.
Where to start
If you need a turnkey site, from mockup through launch and analytics, the markdev team can look at your task and suggest which screens to tackle first. Tell us what your business does and where customers come from today, and we will discuss a suitable format.
FAQ
How is a mockup different from a finished website?
A mockup is a static picture of the pages where structure and appearance are settled. A finished website is working code that runs in a browser. Changing a mockup is easier and cheaper, so revisions belong at that stage.
Can I skip the mockup?
For a very simple page, sometimes, but the risk of rework grows. For a shop, a catalogue or a site with several services, a mockup usually pays for itself by exposing mistakes before development.
What tool are website mockups made in?
Most often Figma. It runs in the browser, lets you comment directly on the screen and makes it easy to pass sizes and styles to the developer.
Do I need a separate mockup for mobile?
Yes. Menus, long headlines, forms and buttons look different on a small screen. It is better to approve the mobile version together with the desktop one, not afterwards.
What should the contract specify?
The number of revision rounds, the approval process, the list of files you will receive and the timeline. That way you avoid arguing about them midway through.
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.