How do you match pixel perfect accuracy in front-end of webapps?
In most of the projects I've worked on so far, I've heard this term "pixel-perfect", IMO honestly I think it's impossible. How do other frontend engineers manage it? I was thinking there should be a tool like this https://flawlessapp.io/ for webapps.
1 comments
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.
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.