Mar 7 2013

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.

Stream-Full

Download the wireframes in Sketch: iOS Wireframe, iPhone Wireframe

one-stream

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).

one-people

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.

one-more

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.

Stream-Details

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.

0 tweets

108 Responses to “The One Pixel Rule”

  1. @jackhumbert says:

    The One Pixel Rule by @MengTo http://t.co/qsOGryXCHK

  2. @tristanremy says:

    The One Pixel Rule by @MengTo: http://t.co/3xkpg5LZf4

  3. @jcsizmadi says:

    The One Pixel Rule by @MengTo http://t.co/zrahwFVKIG #Design #app

  4. @hellohynes says:

    The One Pixel Rule by @MengTo: http://t.co/D28lASavya

  5. @lisibet says:

    The One Pixel Rule by @MengTo: http://t.co/IgQwSxlsZV

  6. The One Pixel Rule http://t.co/pZjRZ6R9BB via @zite

  7. The One Pixel Rule by @MengTo: http://t.co/RShpWrfSoN

  8. Designing for retina using “The One Pixel Rule” http://t.co/nDjFFIjIDO

  9. The One Pixel Rule by @MengTo: http://t.co/h8jYVpRGIC

  10. @adoreau says:

    La règle du “Un pixel” avec #retina #mobile #2x http://t.co/XSLKrZfJGK

  11. @garnerkory says:

    I’ve been doing this for a while. Don’t mindlessly double everything. Savor the details.

    The One Pixel Rule: http://t.co/KukytjrTQ5

  12. Kevin Flores says:

    Thanks for caring so much about the details and for sharing your craft.

  13. The One Pixel Rule by @MengTo: http://t.co/7CfLOqgXg3

  14. The One Pixel Rule by @MengTo: http://t.co/7C5anlWC1b

  15. @kfriedson says:

    The One Pixel Rule by @Mengto http://t.co/sKwFutgbrU

  16. @wojteeek says:

    Definitely worth giving a thought at least “@freakypixels: The One Pixel Rule http://t.co/p2HQrs9FYm”

  17. The One Pixel Rule http://t.co/EKkFFn4H87 #ios design tip by @mengto

  18. The One Pixel Rule http://t.co/7Xz6W1vhzt via @SidebarIO

  19. @erinliona says:

    The One Pixel Rule by @MengTo: http://t.co/uFF4LTUnrG

  20. @MadeByWater says:

    The One Pixel Rule by @MengTo: http://t.co/4gDZOc6PGA

  21. @sylviang says:

    the one pixel rule, instead of the old double pixel approach. http://t.co/VTuurmN3RS

  22. @amberkarnes says:

    Good stuff to think about when designing for retina displays: The One Pixel Rule by @MengTo: http://t.co/Oxt1KuZbUy

  23. @miraculove says:

    I have encountered this problem on designing mobile app. The One Pixel Rule by @MengTo: http://t.co/cQu0mWe6yA

  24. @phollow says:

    The One Pixel Rule by @MengTo: http://t.co/2lKvMycaMo

  25. @argonyx says:

    Phenomenal piece here. @mengto The One Pixel Rule http://t.co/pIdTymBLPx http://t.co/FBD7g60h5g

  26. The One Pixel Rule by @MengTo: http://t.co/QAC2FBRbJy

  27. The One Pixel Rule by @MengTo: http://t.co/YhsWKIIexw

  28. @nICO_MENEZ says:

    The One Pixel Rule by @MengTo: http://t.co/AQtl9HW5JJ

  29. @miracsinir says:

    The One Pixel Rule by @MengTo: http://t.co/OElUYmoUFc

  30. @Reuno says:

    The One Pixel Rule (designing for retina displays) : http://t.co/eGE5EPfS4a

  31. [...] § Designing for Retina: The One Pixel Rule. [...]

  32. @niccios says:

    The One Pixel Rule by @MengTo: http://t.co/XqTIKJfBzo

  33. Download the wireframes in Sketch for #iOS Wireframe and #iPhone Wireframe http://t.co/XfJJKjJx8t #Webdesign #Mobile

  34. The One Pixel Rule #webdesign #appdesign http://t.co/1M9nRURmep

  35. @pipes_lee says:

    The One Pixel Rule by @MengTo: http://t.co/5Xg0cD47Jl

  36. @chrisdasie says:

    The One Pixel Rule by @MengTo: http://t.co/kf4b8tr1As

  37. @emfeha says:

    The One Pixel Rule by @MengTo: http://t.co/6vE3MdPVYk

  38. @ikurilka says:

    Еще раз про дизайн мобильных приложений http://t.co/fdNGMUYDum

  39. Importance of 1px and what the rule means for app design by @MengTo: http://t.co/XMkKmrAR5E

  40. @estereomar says:

    The One Pixel Rule by @MengTo: http://t.co/h7oN6JgARM Excelente blog de diseño.

  41. @ferdy182 says:

    Oh Dios! los diseñadores de apps de iOS descubriendo el mundo de los diseños para multiples tamaños http://t.co/8zdoVzHVzO

  42. @gauchomatt says:

    The One Pixel Rule by @MengTo: http://t.co/l0j8VyK0Nz

  43. The One Pixel Rule by @MengTo: http://t.co/LZK43wRR8B *great read :)

  44. @Upskydown says:

    Interesting post about the one-pixel rule on mobile : http://t.co/2fWbVDJCIk

  45. @Many_Angles says:

    The One Pixel Rule http://t.co/6PXehpUEKD by @mengto

  46. The “One Pixel Rule” in App Design – http://t.co/s492Yihqyd

  47. @chriskloss says:

    The One Pixel Rule by @MengTo: http://t.co/tALKBzlveb

  48. @earboz says:

    The one pixel rule – http://t.co/Yn3dSGoscZ via @pekpongpaet

  49. Chris G says:

    Thanks but I’m really not seeing the benefit to those visiting this page of listing the 71 ping/trackbacks? There’s only 1 actual comment on the page, and that’s what I might like to read.

    “Today, that technology is nearly in every hand.” Really? I highly doubt that.

  50. The One Pixel Rule by @MengTo: http://t.co/NTwPZCm34V

  51. @shan_gautam says:

    One Pixel rule , A good read http://t.co/sTexKwOMCx

  52. @nerdnotfool says:

    The One Pixel Rule by @MengTo: http://t.co/6XZQKYYUep

  53. The One PIxel Rule – a different way of approaching retina design http://t.co/du7i0RTX7S #design #ui #ux

  54. The One Pixel Rule http://t.co/hVo74BpWFE #webdesign #grafik

  55. @samuelemic says:

    The One Pixel Rule – Design for Retina http://t.co/YPuAJZoL65

  56. @ivane says:

    The One Pixel Rule http://t.co/G7PRcxcLpv 【这篇文章最近很火啊~】

  57. @ihtml says:

    “@ivane: The One Pixel Rule http://t.co/QNd7q7OmKO 【这篇文章最近很火啊~】”

  58. The One Pixel Rule http://t.co/MONcMbXYjH via @mengto

  59. @NEVERBLAND says:

    Designing for retina? Here’s a handy little rule – http://t.co/5WAfR4CqeD

  60. [...] Check it out [...]

  61. @sdachos says:

    The One Pixel Rule by @MengTo: http://t.co/3yC1F1rIgJ #design #ui

  62. “The One Pixel Rule” by @mengto is a fantastic approach to designing for high PPI screens: http://t.co/T9AuKEIkVJ

  63. @manyahin says:

    The One Pixel Rule – Интересная статья на английском, Правило Одного Пикселя. / / http://t.co/Hv4ubQrcGr.. http://t.co/xjn8Igd97F

  64. @nicemondays says:

    The One Pixel Rule by @MengTo: http://t.co/6QXig5PLJ3

  65. [...] § Designing for Retina: The One Pixel Rule. [...]

  66. The One Pixel Rule by @MengTo: http://t.co/eyF4Elbx5V

  67. @simonvart says:

    Not to rule them all, just for lines and shadows ► The One Pixel Rule – Design for Retina http://t.co/3OUB8qNwY3

  68. Jordan says:

    You use the term “2x” canvas. Is this a Sketch specific thing (I’m on a PC so no Sketch for me) or do you literally mean zoom in to 2x? – btw, thanks for the great forward thinking on pxl dense screens!

  69. Every designer should know the 1 Pixel Rule http://t.co/6dHH7NCP21 #design #pixel #perfection #retina

  70. The One Pixel Rule – Design for Retina http://t.co/JuNapAw1fu

  71. [...] depth. In fact, it does a lot of things right. It has vitality. It’s truly modern with its 1 pixel lines, thin typography and white UI. Unlike Android’s Dark/Gray UI, Microsft’s Black and [...]

Leave a Reply