Website Mockup Design: Stages, Mistakes and Sign-Off

What a mockup is, and how it differs from a wireframe and a live site

A mockup is a visual design of your pages: colours, fonts, grid, buttons, images and real copy. It is usually built in Figma, so you can open a link, scroll through the pages and leave comments right on the screen.

Do not confuse it with a wireframe. A wireframe shows structure only: blocks and their order, with no styling. It is a rough diagram agreed before design begins. A live site is the next step, with front-end code and back-end logic. If you skip the mockup and hand the task straight to a developer, changes have to be made in code, which is usually slower and costs more.

What the work on a mockup includes

A good studio does not start by drawing. First it needs to understand your business, your audience and the action the site exists for: an order, a call, a booking or a payment. Everything else follows from that.

• Brief: what you do, who you sell to, how you differ from competitors, which sites you like and why.
• Structure: the list of pages and the order of blocks on each, so the path to an enquiry stays short.
• Copy and assets: headlines, descriptions, photos, prices or terms. A mockup full of placeholder text is misleading.
• A design concept for the home page: style, colours, fonts, first screen.
• The remaining pages built on one system: catalogue, product card, contacts, forms.
• The mobile version and tablet adaptation.
• Element states: hover, form errors, an empty cart, a confirmation message after submitting.

What to consider when designing a mockup for Uzbekistan

Most visitors arrive on a phone, from an Instagram link, a Telegram channel or a Meta ad. So the mobile version should be designed first, not squeezed down from the desktop one. Buttons need to be large, a phone number and Telegram should be one tap away, and forms should be short.

Language is the second point. If the site will run in Russian and Uzbek, check the mockup in both: a headline that fits on one line in one language can wrap in the other and break the block. Plan a language switcher and some spare room for longer text from the start.

The third is contact and payment. In many niches people would rather message on Telegram or call than fill in a long form. If you sell online, the mockup should include clear payment steps through Click or Payme and a page with delivery terms for Tashkent and the regions. These screens are often forgotten and then appear at the last minute without much thought behind them.

Common mistakes in mockup projects

The first mistake is approving the mockup in desktop view only. The second is accepting it with placeholder text and later finding that the real text does not fit. The third is vague feedback such as “make it prettier”, which leads to endless rounds of revisions.

Another problem arises when the decision is made by someone who is not responsible for sales. The director likes the design, but the sales team sees that the site does not answer customers’ main questions. Agree in advance who signs off the mockup, and give that person the list of those questions.

What affects the price and timing

The cost of a mockup is made up of several factors: the number of unique pages, the complexity of the interface, animation and illustration, whether a brand identity is needed, the number of language versions, and the number of agreed revision rounds. Pages built from one template cost less than a dozen with different structures.

Timing depends not only on the designer but on you: quick replies, ready copy and photos shorten the work noticeably. Ask the studio for a written scope and revision terms so you know exactly what the price includes.

How to sign off a mockup: a short checklist

Before handing the mockup to development, walk through it as a customer, not as the owner.

• From the first screen it is clear what you offer and for whom.
• The main action button is visible on every page.
• The mobile version is shown for all key pages.
• The copy is real, not filler.
• All form states and error messages are included.
• Fonts, colours and buttons are consistent across pages.
• The file is delivered with source files and notes for the developer.

What comes next

An approved mockup is the foundation for front-end development and analytics setup: you can see in advance which buttons and forms to track, so you can later measure how many enquiries the site brings. At markdev we build websites end to end, from structure and mockups to launch and analytics. If you have a task and are unsure where to begin, tell us about it and we will suggest a sensible scope without extra pages.