I recently gave an interview where they told me to develop a UI based on a .jpg snapshot as a task.
Focusing on scalability, I wrote a sensible markup and a re-usable CSS thinking they would judge me on the basis of the code quality.
Little did I know, they rejected me saying the developed UI is not "Pixel Perfect".
But, can a UI ever be "pixel perfect" to the design? As a UI Developer, have I been focusing on something wrong all along?
Rodrigo Garcia
Ninja man
Yeah an UI can be pixel perfect. However the question is where it makes sense. For example things like border-radius, font-sizes, image / icons sizes, colors, line-heights etc. can and should be pixel perfect if you get a design.
But it gets tricky on things like margins and paddings if they are not good designed. By that I mean if the paddings and margins have weird numbers like 23px or if they are not consistent in the design.
However if then you could make it pixel perfect, but I would not, if I had to work with magic numbers.
I've had clients who literally made a screenshot of my coded website and placed it directly over the design(PSD) to see if it was pixel perfect... I've given up on making it pixel perfect, because it just takes too long to get it to that level of perfection. And as mentioned, responsive design throws even more factors into the mix.
Luckily, I'm designing the company website (my full time job), so I have full control over both design and code ;)
Yes. There is a big caveat though, in that it has to be feasible first.
I believe that Pixel Perfect is the wrong way to go on anything. We have a lot of different of devices from cellphones, tablets, laptops, televitions, etc and each has a different pixel resolution. So in my way of thinking is what would you like a one or two resolutions perfect pixels that look very clean and neat but fails on every other resolution or do you want a design and functional web, app, webapp that runs perfectly on every screen size. Of course all your fonts-sizes, colors, images-sizes, icons-sizes, etc should be the same size but a design should not be perfect pixel. Also as a Front-End Developer, you waste a lot of time making sure that every part of the design is pixel perfect moving something one or two pixels, measuring the psd for every single part and pixels and realising that the design wasn't even pixel perfect and have wrong sizes on every part is a total waste of time. I did a single view in about two and a half day pixel perfectioning it, when I could've done the same stuff with scalable and more responsive perfectioning it in less than a half of the time and the end product is way more expensive and way less adaptable.