
How do you match pixel perfect accuracy in front-end of webapps? - botvader
In most of the projects I&#x27;ve worked on so far, I&#x27;ve heard this term &quot;pixel-perfect&quot;, IMO honestly I think it&#x27;s impossible. How do other frontend engineers manage it? I was thinking there should be a tool like this https:&#x2F;&#x2F;flawlessapp.io&#x2F; for webapps.
======
johncoltrane
Pixel-perfect is relatively easy to achieve at the atom level and, sometimes,
at the molecule level because we operate at small scale. A button, a text
field, the rounded corners of a card… no problem, really.

But the larger the scale the more the elements you work with interact with
each other, the more you have to adjust sizes in relations with other elements
or with the window's dimensions, the more you have to interpret the original
intentions of the designer, and the more you drift away from "pixel-perfect".

The main issue with "pixel-pefect" is an educational one: the nature of the
web is such that your app or site can be consumed via a large number of
clients with a large variety of capabilities, in a large variety of window
sizes and so on. Designers have to learn that. Project managers have to learn
that. Clients have to learn that. And they all have to accept that reality in
order to design good quality products.

Then there's a tooling issue: design tools like Sketch, Figma, InVision, or
Photoshop and friends before them, all work with pixels (let's not talk about
points) so, even if the designer thinks in proportions, he has to work with
pixels and whatever is handed down to the client and, in fine, to the
developer will be expressed in pixels. A unit that's barely used by
developers. Without good communication, the intent of the designer is lost on
the client and the developer, everyone makes faulty assumptions and no one is
happy.

