From mockup to pixel perfect: how we build to an approved design

The mockup was approved on a Tuesday. By Friday the site was on the preview address, and the owner's first message was that the headline looked a little off. It was off by the width of a pencil line, and that was enough to matter.

What approved actually means

When a client signs off on a design, they are not approving a general direction that the build is free to interpret. They are approving a picture. The gap between the photo and the headline. The weight of the button. The way the three service cards line up. So when the built page drifts from that picture, even a little, the owner sees it immediately, and what they feel is not "this is slightly different." What they feel is "they did not build what I agreed to."

That feeling is expensive. It turns the review from a celebration into a punch list, and it makes the owner look harder at everything else we have done.

Why built pages drift

Design tools and code do not speak the same language. A mockup says a gap is a certain size; the code has a default of its own. A font looks one way in the design file and renders a hair heavier in a browser. A button that was a fixed width in the mockup stretches when the real words inside it are longer. None of this is anyone's fault. It is the normal friction between a picture and a working page, and it is why "close enough" happens whenever nobody plans against it.

The reconcile pass

After the first build is working, and before anyone outside the studio reviews it, we do a dedicated pass whose only job is to make the built page match the approved mockup. It is not a bug hunt and it is not a content check. It is a comparison, with the mockup open on one side of the screen and the live preview on the other.

1. Walk the page top to bottom, one section at a time. Does the hero match? The photo crop, the headline size, the position of the button, the space above and below. Fix it before moving on.
2. Check the type scale. Every heading level, the body size, the small labels. If the mockup has three sizes, the page has three sizes, not five.
3. Check the rhythm. The gaps between sections should repeat the same few measurements. Uneven gaps are the most common thing an owner notices without being able to say what is wrong.
4. Check color. Buttons, links, backgrounds, the accent line under a heading. Exact values from the brand, never a near match.
5. Check the states nobody mocks up: a hovered link, a pressed button, a form field with an error, a card whose title runs long.

Then the same walk again on a phone. Not the phone view inside a desktop browser; an actual phone in hand. A build that matches the mockup on a monitor and breaks the headline into three awkward lines on a phone is not finished.

Where it tends to go wrong

• Real content is longer than placeholder content. A service name that fit on one line in the mockup wraps to two on the site and shoves everything below it down.
• Photos arrive in a different shape than the frame, and the crop hides the part of the image that mattered.
• The font loads late and the whole page shifts as it arrives.
• Spacing was set by eye in one place and by rule in another, and the two never agreed.
• A section that was designed with four items has six in real life, and the grid was never asked to handle that.

Each of these is small and each of them is visible. The reconcile pass exists to catch them when the fix takes a minute, instead of after launch, when it takes a meeting.

Why we do not call it polish

Polish sounds optional, something you do if there is time left at the end. Matching the approved design is not optional; it is the delivery. A custom home builder would not hand over a house where the kitchen island sits a few inches from where the plans put it. The client would notice, and then they would wonder what else moved. A website is no different. The mockup was the plan, and the build is held to it.

The pass also protects us. A page that matches the mockup exactly is a page where the review conversation is about the business, not about pixels. The owner talks about the words and the photos and what to say to customers, which is the conversation we want to be having.

This is how every site, app and dashboard leaves the studio: built to the picture the client approved, checked on a real phone, with the small differences fixed before the owner ever has to point them out.

Questions people ask