Pixel perfect development
Ashutosh Agrawal
Google Gemini - Engineering Leader | Ex-JioCinema, Ex-hotstar, Ex-hackerrank | Angel Investor — 11+ YOE / 7+ YOE Streaming - IPL 2018-24 / ICC WC / Big Boss / etc.
History behind this:
One of the things that I heard very frequently when I joined in my current organization (BabyChakra, We are hiring!) was that “Dude we need quality, How do we get that?” For first I thought that it was about the absence of good QA hence there were a lot of bugs in the product, So I went ahead and solved that problem. But still the team was not happy. So one day they come and say that see how this another app “looks” so awesome, why can’t we build a similar app. That’s when I realized that the problem was just not with the bugs but the “Quality of product” we are shipping as a team.
One of the things I heard from the developers was that designs and specs are not concrete and hence it’s hard to build quality stuff. Okay! Let’s fix that. Got a properly designed android feature to devs, and got the same outcome as it used to be before.
Me: 'Now what dude!'
Dev: This looks nice, everything works.
Me: That’s right but that’s not how it should have got build, the design is different and this is different.
Dev: “It looks same”
That’s when I coined this term “Pixel Perfect Development”
What is Pixel Perfect Development?
When a designer has worked hard in building a screen for users, when a product manager had spent hours on working on user flows. I believe it’s our responsibility to ensure that what we finally ship should be real as per the design at the pixel level. When I look at the design I look at every minute detail on UI, from button background to the blur on drop shadows, be it the margin, padding, etc. For me, everything should be pixel perfect.
You will say it cannot be pixel perfect!
True!
They can be 99% pixel perfect. It’s just figure of speech.
What I want to achieve is that your developed feature should be as good as design intact it should look even more beautiful than design, challenging the designer! It should just create the wow effect.
So how do I build things pixel perfect?
You need to start looking at things at very minute level. Because if they are fixed at the minutest scale then they will cause repel effect on all the other components. When I look at an element this is how it looks to me:
The layout is one perspective, another couple of real important things are: font sizes, alignment. I think a UI kit definitely helps you doing pixel perfect development. If you don’t have one just look at the current design. and build it scalable!
I think that’s pretty much it. Do Pixel perfect development and create wow effect. In the end, it’s not the high-tech which creates a wow but a very great UI!