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.


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.

0 tweets

111 Responses to “The One Pixel Rule”

  1. @jackhumbert says:

    The One Pixel Rule by @MengTo

  2. @tristanremy says:

    The One Pixel Rule by @MengTo:

  3. @jcsizmadi says:

    The One Pixel Rule by @MengTo #Design #app

  4. @hellohynes says:

    The One Pixel Rule by @MengTo:

  5. @lisibet says:

    The One Pixel Rule by @MengTo:

  6. The One Pixel Rule via @zite

  7. The One Pixel Rule by @MengTo:

  8. Designing for retina using “The One Pixel Rule”

  9. The One Pixel Rule by @MengTo:

  10. @adoreau says:

    La règle du “Un pixel” avec #retina #mobile #2x

  11. @garnerkory says:

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

    The One Pixel Rule:

  12. Kevin Flores says:

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

  13. The One Pixel Rule by @MengTo:

  14. The One Pixel Rule by @MengTo:

  15. @kfriedson says:

    The One Pixel Rule by @Mengto

  16. @wojteeek says:

    Definitely worth giving a thought at least “@freakypixels: The One Pixel Rule”

  17. The One Pixel Rule #ios design tip by @mengto

  18. The One Pixel Rule via @SidebarIO

  19. @erinliona says:

    The One Pixel Rule by @MengTo:

  20. @MadeByWater says:

    The One Pixel Rule by @MengTo:

  21. @sylviang says:

    the one pixel rule, instead of the old double pixel approach.

  22. @amberkarnes says:

    Good stuff to think about when designing for retina displays: The One Pixel Rule by @MengTo:

  23. @miraculove says:

    I have encountered this problem on designing mobile app. The One Pixel Rule by @MengTo:

  24. @phollow says:

    The One Pixel Rule by @MengTo:

  25. @argonyx says:

    Phenomenal piece here. @mengto The One Pixel Rule

  26. The One Pixel Rule by @MengTo:

  27. The One Pixel Rule by @MengTo:

  28. @nICO_MENEZ says:

    The One Pixel Rule by @MengTo:

  29. @miracsinir says:

    The One Pixel Rule by @MengTo:

  30. @Reuno says:

    The One Pixel Rule (designing for retina displays) :

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

  32. @niccios says:

    The One Pixel Rule by @MengTo:

  33. Download the wireframes in Sketch for #iOS Wireframe and #iPhone Wireframe #Webdesign #Mobile

  34. The One Pixel Rule #webdesign #appdesign

  35. @pipes_lee says:

    The One Pixel Rule by @MengTo:

  36. @chrisdasie says:

    The One Pixel Rule by @MengTo:

  37. @emfeha says:

    The One Pixel Rule by @MengTo:

  38. @ikurilka says:

    Еще раз про дизайн мобильных приложений

  39. Importance of 1px and what the rule means for app design by @MengTo:

  40. @estereomar says:

    The One Pixel Rule by @MengTo: 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

  42. @gauchomatt says:

    The One Pixel Rule by @MengTo:

  43. The One Pixel Rule by @MengTo: *great read :)

  44. @Upskydown says:

    Interesting post about the one-pixel rule on mobile :

  45. @Many_Angles says:

    The One Pixel Rule by @mengto

  46. The “One Pixel Rule” in App Design –

  47. @chriskloss says:

    The One Pixel Rule by @MengTo:

  48. @earboz says:

    The one pixel rule – 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:

  51. @shan_gautam says:

    One Pixel rule , A good read

  52. @nerdnotfool says:

    The One Pixel Rule by @MengTo:

  53. The One PIxel Rule – a different way of approaching retina design #design #ui #ux

  54. The One Pixel Rule #webdesign #grafik

  55. @samuelemic says:

    The One Pixel Rule – Design for Retina

  56. @ivane says:

    The One Pixel Rule 【这篇文章最近很火啊~】

  57. @ihtml says:

    “@ivane: The One Pixel Rule 【这篇文章最近很火啊~】”

  58. The One Pixel Rule via @mengto

  59. @NEVERBLAND says:

    Designing for retina? Here’s a handy little rule –

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

  61. @sdachos says:

    The One Pixel Rule by @MengTo: #design #ui

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

  63. @manyahin says:

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

  64. @nicemondays says:

    The One Pixel Rule by @MengTo:

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

  66. The One Pixel Rule by @MengTo:

  67. @simonvart says:

    Not to rule them all, just for lines and shadows ► The One Pixel Rule – Design for Retina

  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 #design #pixel #perfection #retina

  70. The One Pixel Rule – Design for Retina

  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 [...]

  72. Yecine says:


    I have a question, it might be silly but i’ll ask it anyway

    As sketch is an vector design tool why should we care desgning in 2x and managing half pixels ?

    If we do it in 1x we won’t have all those problems


  73. J says:

    One-pixel design shows utter contempt for users, not consideration. The examples you give show that perfectly: it’s barely possible to see the separation between separate items. Saving one pixel’s worth of screen line isn’t worth the sacrifice in readability.

    Please, UI designers, STOP FOLLOWING APPLE BLINDLY. Do what actually makes sense.

Leave a Reply