A beautiful mockup is not yet a good website

A mockup is one state at one width. A website is every state at every width. The gap between them is where projects lose time and budget, with both sides feeling they are in the right.

What is usually missing from a mockup

• In-between widths. 1440 and 375 are drawn, but screens come at 768, 1024 and 2560 - and somebody will decide those anyway; the only question is who.
• Long text. The headline fits two lines because a designer wrote it. The client's actual service name takes four.
• Empty states. A case list with no cases, a cart with no items, a search with no results.
• Element states: hover, keyboard focus, pressed, disabled, form error, loading.
• The longest and shortest possible content: names, prices, numbers, country names.

When these are absent, the developer decides during the build - quickly and without you. Sometimes they guess right. Sometimes you see it at the demo and ask for changes, and that is a second paid iteration for something one more Figma frame would have prevented.

What makes a design buildable

Not beauty - repeatability. If a mockup has eight shades of grey, four corner radii, and spacings of 13, 15 and 18 pixels side by side, that is not a style but the absence of a system. In code such a page becomes a set of exceptions, each of which has to be remembered.

A buildable design has a bounded set of decisions: a spacing scale, a type scale, a few colours with roles, components instead of copies. Then the build becomes assembly rather than redrawing and - more importantly - the next page costs less than the last one.

A design system is not for the designer's tidiness. It is for you, so that the tenth page of the site does not cost what the first one did.

Two things worth checking while still in Figma

Text contrast. Light grey on white looks delicate in a mockup and is unreadable on a phone outdoors. The minimum is 4.5:1 for normal text and 3:1 for large. A plugin checks it in a second and saves repainting half the site later.

The size of anything a finger must hit. A 16px icon is pretty and easy to miss. The tap area should be noticeably larger than the icon itself - which does not spoil the look, because what grows is the transparent zone, not the drawing.

How we work with it

We take a design on together with a review: what is unambiguous in it and what will have to be agreed. The uncertain parts are raised before the build, not after. This is not bureaucracy - it is the cheapest moment to change anything, because what changes is a rectangle in Figma rather than a finished component with logic.

And separately: having no design at all is a perfectly fine starting point. The worse case is a beautiful design drawn without regard for the fact that a website has to be made from it.