The One Pixel Rule

About two and a half years ago, Retina displays were introduced to the market. It was new then and only a few enjoyed those glorious pixel dense screens. To adapt, we designers didn’t think too hard–we simply doubled all the pixels so that they wouldn’t look blurry. Today, that technology is nearly in every hand. But we’re still stuck to that old double pixels approach. It’s time to evolve and treat each pixel individually for the modern user.

Download the wireframes in Sketch:
iOS Wireframe,
iPhone Wireframe

On the left is the stream design that I completed 6 months ago. On the right is the same design but revisited as we’re implementing it. I applied the one pixel rule.

Where To Start?

First, start with a 2x canvas with the exact resolution of the device you’re designing for. Then, simply design without thinking about dividing your pixels in half. I know it sounds counter intuitive, but believe me, it makes perfect sense later on. Lines, borders and shadows CAN be one pixel wide. In 1x, they’ll just be… one pixel.

Translating To 1x

If you read my article on How To Design Pixel Perfect Assets, you’ll notice that it doesn’t matter if the borders or drop shadows are one pixel thick, what matters is that the canvas for the asset can be divided by two. So by following that simple and manual process, you shouldn’t have any trouble designing retina-oriented assets versus non-retina. When a drop shadow is 3 pixels, play by the ear and go 1 or 2 pixels. Since you do it manually, you have complete control over how it’ll look. Be a master of your craft.

The Gain of Spacing

Using one pixel lines instead of double pixels save you space. It’s not a lot, but when you multiply the number of lines in one screen, then you have an amount worth considering. Here is a comparison of before and after I applied the one pixel rule. As you can see, the lines are finer and the shadows more subtle. In addition, I saved about 8 pixels in the whole screen because the lines are no longer 3 pixels ( 2 pixels line, 1 pixel white shadow).

More Examples

I’m seeing more and more apps applying this rule and quite frankly, the results show that more care went into the design.

Not Everywhere

The one pixel rule doesn’t need to be applied everywhere, just where it feels right. Some styles are more fun or cartoony and therefore, the double pixels fit. But knowing and being aware of this technique will help you design with more precision and care for pixel dense devices. It’s an additional tool that can be added to your arsenal in your quest for beauty and simplification.

Print VS Retina

Retina displays were invented to match the quality and resolution of books and magazines. In print, lines and typography can be extremely thin and beautiful. Likewise in Retina, a one pixel line is gorgeous and distinguishable. If you look at the recent shift in thinner typography, you’ll come to realize that it’s much thanks to the Retina movement. Because there are 4 times more pixels, the eye can now read even the thinnest text. And we’re only starting to apply that elegance and precision to Mobile and the Web.

Final Thought

As tools evolve, we design faster. On the other hand, we don’t take less time to get a product out. Why is that? Well, the simple truth is that as we become more efficient, we spend less time on the boring stuff and more time on the smaller, finer details. We delight our users with more complex interactions, animations and beautiful pixels, which in turn takes more time to execute. That’s just in our nature, we want to perfect our craft.

“Good design is thorough down to the last detail – Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.” – Dieter Rams

We design for the medium and if the medium has evolved, then we must too. In the world of mobile, high pixel density displays outnumbers the normal ones, so it’s only natural that we start designing specifically for them. Hopefully in a year or two, this approach will also apply to desktop computers.

By the way, I’m currently reading Dieter Rams: As Little Design As Possible. It’s a massive book with high resolution pictures of his minimalist work. I’m learning so much. The foreword by Jonathan Ive alone is worth the price of the book.