Matching the design is a measuring job

A store we are getting ready for launch has a designed menu and cart, the kind with a proper dropdown panel, image tiles and a styled cart drawer. The sections were built and looked close to the design. Close is where a lot of redesigns stop, so this session was the other half of the job: put numbers on the design file, put numbers on the build, and close every gap between them.

What we did

The design panel is a card inset a precise distance from the page edges, with tile columns on fixed tracks, a set gap, and a side rail at a specific width. We measured all of it out of the file rather than judging it from a screenshot, then measured what the browser was actually rendering.

The numbers found things the eye had passed. The tile tracks were wider than designed and the side rail narrower, which together made the panel feel subtly off without anyone being able to say why. A dividing line between columns had been given the same colour as the panel background, so it had never rendered at all. A badge colour had crept in from an earlier styling round and matched nothing in the brand palette, while the design file sampled an exact token the theme already owned.

The best find was in the checking itself. A breakpoint had been written at exactly the width of the design artboard, so at that width the browser was already showing the narrow fallback layout. Every check at the design’s own width was measuring the wrong layout and reporting failures that were not real. Moving the breakpoint off the round number fixed the measurements everywhere.

What to take from it

A redesign is approved as a picture, but it ships as hundreds of numbers, and the difference between the two is where builds quietly drift. Eyeballing catches the misses of forty pixels and waves through the misses of ten, and it is the tens that make a finished site feel slightly cheaper than the design that was paid for. Ask whoever is building yours how they check the result against the file. The answer you want involves measuring both sides. The answer you usually get is that it looks right.