Pixel Perfection

A lot of designers throw around the term pixel perfection. But what does it really mean? Googling it really didn’t help. With this article, I am going to not only attempt to define it but also give clear examples on how to achieve it. I will also share design files from which you can deconstruct and analyze.

Download .sketch files

You’ll need Sketch to open these files:

Sharpness

“Sharp” is defined as razor-edged and honed. It’s the opposite of blurry. In other words, outlines are well-defined, texts are more readable, shapes are easily distinguishable. But beware, just like in photography, there can be too much sharpness, and that gives designs an unnatural, heavy look. You can strike the perfect balance of sharpness by not stretching elements from its original size and by comparing to reality. If you look outside the screen and really pay attention to the outline of things, you’ll notice a fine crispness and natural polish. That’s your balance. Good sharpness is unmistakable. An outline is an outline, it doesn’t mistake itself as the background or a shadow.

By looking closely at this design, you’ll notice a light shadow and a white shadow. They’re clearly defined – not too dark and not too light because that how I intended them to be. That’s the level of importance that I gave them. Also, they’re not mistaken as anything else. Had I made the light shadow whiter, it could be seen a double, blurry white shadow and that would destroy the purpose of that sharpness I was aiming for.

Perfect Position & Dimension

Understanding perfection is not enough. You need to apply the right techniques within the application context. In Photoshop and Sketch, that means resizing and positioning your shapes using round numbers. Half pixels are detrimental to pixel perfection. When you place a shape composed of many sub-shapes, you will spot uneven pixels. It’s important to quickly scan with your eyes the sharpness of the outlines and make proper adjustments.

In Photoshop, that means pixel snapping vector points manually by selecting them, then Command + Shift dragging them. See how the Facebook logo is a lot sharper on the right?

In Sketch, it’s even more precise because you can simply select each sub-shape and edit round the numbers (x, y, width and height). The toggle circle is much sharper on the right.

Obsession

Pixel perfection is an obsession and a standard to which serious designers live by. It’s a learned skill that needs nurturing in a fast-paced, technology-driven industry. It is even more unobvious now that pixels are getting denser every day. Ten years ago, when 800×600 displays and pixel fonts were the standard, it was a lot clearer to spot the imperfections. Today, you almost have to use a magnifier in order to distinguish the pixels on a screen. That’s why it’s more necessary than ever to rely on tools like Sketch for pixel snapping and for rounding the numbers to be absolutely certain that your design is pixel perfect.

Go ahead and download my .sketch files and spot the half pixels. You may find some and if you do, pat yourself on the back because you now have pixel perfection in your blood.