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.
The One Pixel Rule by @MengTo http://t.co/qsOGryXCHK
The One Pixel Rule by @MengTo: http://t.co/3xkpg5LZf4
The One Pixel Rule by @MengTo http://t.co/zrahwFVKIG #Design #app
The One Pixel Rule by @MengTo: http://t.co/D28lASavya
The One Pixel Rule by @MengTo: http://t.co/RuNWwEsz0d
The One Pixel Rule by @MengTo:http://t.co/unmRCFfxfR
The One Pixel Rule by @MengTo: http://t.co/IgQwSxlsZV
The One Pixel Rule http://t.co/zNrwlQJIg0
The One Pixel Rule http://t.co/pZjRZ6R9BB via @zite
The One Pixel Rule by @MengTo: http://t.co/RShpWrfSoN
Designing for retina using “The One Pixel Rule” http://t.co/nDjFFIjIDO
The One Pixel Rule by @MengTo: http://t.co/h8jYVpRGIC
La règle du “Un pixel” avec #retina #mobile #2x http://t.co/XSLKrZfJGK
The One Pixel Rule http://t.co/ktiThlaAfA
The one pixel rule: http://t.co/Oc2oOw0XhE #article
The One Pixel Rule: http://t.co/0p01fxFIXg
The One Pixel Rule http://t.co/rJAK6zKDhe
I’ve been doing this for a while. Don’t mindlessly double everything. Savor the details.
The One Pixel Rule: http://t.co/KukytjrTQ5
Thanks for caring so much about the details and for sharing your craft.
Thank you for reading and spreading!
The One Pixel Rule by @MengTo: http://t.co/7CfLOqgXg3
The One Pixel Rule http://t.co/Vl1jhNmvIV
The One Pixel Rule http://t.co/rG0AEfXfEE
[…] The One Pixel Rule […]
[…] Правило одного пикселя, сиречь о создании и дизайна под Retina […]
The One Pixel Rule by @MengTo: http://t.co/7C5anlWC1b
The One Pixel Rule by @Mengto http://t.co/sKwFutgbrU
Definitely worth giving a thought at least “@freakypixels: The One Pixel Rule http://t.co/p2HQrs9FYm”
The One Pixel Rule http://t.co/EKkFFn4H87 #ios design tip by @mengto
[…] 《The One Pixel Rule》by Meng To […]
The One Pixel Rule : http://t.co/kfoXwVL8ZA
The One Pixel Rule http://t.co/EgiaTIydx3
The One Pixel Rule http://t.co/7Xz6W1vhzt via @SidebarIO
The One Pixel Rule by @MengTo: http://t.co/uFF4LTUnrG
The One Pixel Rule by @MengTo: http://t.co/4gDZOc6PGA
the one pixel rule, instead of the old double pixel approach. http://t.co/VTuurmN3RS
Good stuff to think about when designing for retina displays: The One Pixel Rule by @MengTo: http://t.co/Oxt1KuZbUy
I have encountered this problem on designing mobile app. The One Pixel Rule by @MengTo: http://t.co/cQu0mWe6yA
The One Pixel Rule by @MengTo: http://t.co/2lKvMycaMo
The One Pixel Rule http://t.co/v4tjgCqWbu
Phenomenal piece here. @mengto The One Pixel Rule http://t.co/pIdTymBLPx http://t.co/FBD7g60h5g
The One Pixel Rule
http://t.co/M535qaQj4E
The One Pixel Rule by @MengTo: http://t.co/QAC2FBRbJy
The One Pixel Rule by @MengTo: http://t.co/YhsWKIIexw
The One Pixel Rule http://t.co/IxdGJMrnM5
The One Pixel Rule by @MengTo: http://t.co/AQtl9HW5JJ
The One Pixel Rule by @MengTo: http://t.co/OElUYmoUFc
The One Pixel Rule http://t.co/39lvbTO4NN
The One Pixel Rule (designing for retina displays) : http://t.co/eGE5EPfS4a
[…] § Designing for Retina: The One Pixel Rule. […]
The One Pixel Rule by @MengTo: http://t.co/XqTIKJfBzo
Download the wireframes in Sketch for #iOS Wireframe and #iPhone Wireframe http://t.co/XfJJKjJx8t #Webdesign #Mobile
The One Pixel Rule #webdesign #appdesign http://t.co/1M9nRURmep
The One Pixel Rule by @MengTo: http://t.co/5Xg0cD47Jl
The One Pixel Rule by @MengTo: http://t.co/kf4b8tr1As
The One Pixel Rule by @MengTo: http://t.co/6vE3MdPVYk
Еще раз про дизайн мобильных приложений http://t.co/fdNGMUYDum
The One Pixel Rule » http://t.co/jphD23eHiY #retina #ios
Importance of 1px and what the rule means for app design by @MengTo: http://t.co/XMkKmrAR5E
The One Pixel Rule by @MengTo: http://t.co/h7oN6JgARM Excelente blog de diseño.
The One Pixel Rule http://t.co/fdjk5RBqkz
The One Pixel Rule http://t.co/kpO0H3BVjw
Oh Dios! los diseñadores de apps de iOS descubriendo el mundo de los diseños para multiples tamaños http://t.co/8zdoVzHVzO
The one pixel rule http://t.co/1OyXJdXMfi
The One Pixel Rule by @MengTo: http://t.co/l0j8VyK0Nz
The One Pixel Rule by @MengTo: http://t.co/LZK43wRR8B *great read :)
Interesting post about the one-pixel rule on mobile : http://t.co/2fWbVDJCIk
[…] The One Pixel Rule […]
The One Pixel Rule http://t.co/6PXehpUEKD by @mengto
The “One Pixel Rule” in App Design – http://t.co/s492Yihqyd
The One Pixel Rule by @MengTo: http://t.co/tALKBzlveb
The one pixel rule – http://t.co/Yn3dSGoscZ via @pekpongpaet
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.
You are absolutely right, I just hid them. Will put a button to show them as I think that some tweets are pretty valuable.
About the technology part, I guess I should add “every hand who owns a smartphone” or something to that nature. Thanks!
There’s no need to be rude – treat people nicely, even if you disagree with them.
The One Pixel Rule by @MengTo: http://t.co/NTwPZCm34V
One Pixel rule , A good read http://t.co/sTexKwOMCx
The One Pixel Rule by @MengTo: http://t.co/6XZQKYYUep
The One PIxel Rule – a different way of approaching retina design http://t.co/du7i0RTX7S #design #ui #ux
The One Pixel Rule http://t.co/hVo74BpWFE #webdesign #grafik
The One Pixel Rule http://t.co/W7h1BApSG3
The One Pixel Rule – Design for Retina http://t.co/YPuAJZoL65
The One Pixel Rule – http://t.co/ebsb0NldGz
The One Pixel Rule http://t.co/G7PRcxcLpv 【这篇文章最近很火啊~】
http://t.co/0NJzui0Cr9
The One Pixel Rule
http://t.co/xpQA7YFjwm
“@ivane: The One Pixel Rule http://t.co/QNd7q7OmKO 【这篇文章最近很火啊~】”
[…] The One Pixel Rule […]
The One Pixel Rule – http://t.co/3nDbweYsTh
The One Pixel Rule http://t.co/MONcMbXYjH via @mengto
Designing for retina? Here’s a handy little rule – http://t.co/5WAfR4CqeD
[…] Check it out […]
The One Pixel Rule by @MengTo: http://t.co/3yC1F1rIgJ #design #ui
“The One Pixel Rule” by @mengto is a fantastic approach to designing for high PPI screens: http://t.co/T9AuKEIkVJ
The One Pixel Rule – Интересная статья на английском, Правило Одного Пикселя. / / http://t.co/Hv4ubQrcGr.. http://t.co/xjn8Igd97F
The One Pixel Rule by @MengTo: http://t.co/6QXig5PLJ3
[…] § Designing for Retina: The One Pixel Rule. […]
The One Pixel Rule http://t.co/cGRTt5W3dz
The One Pixel Rule by @MengTo: http://t.co/eyF4Elbx5V
@amuino no siempre ;) http://t.co/luoV9u2mpa
The One Pixel Rule http://t.co/LYlFUOtpdY
Not to rule them all, just for lines and shadows ► The One Pixel Rule – Design for Retina http://t.co/3OUB8qNwY3
[…] The One-Pixel Rule […]
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!
Every designer should know the 1 Pixel Rule http://t.co/6dHH7NCP21 #design #pixel #perfection #retina
The One Pixel Rule – Design for Retina http://t.co/JuNapAw1fu
[…] 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 […]
[…] Check it out […]
Hi,
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
Thanks
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.
http://myfreecamtokengenerator.org
Hi,
If you want to join our site and find way to get psn codes check us out.
Thanks for caring so much about the details and for sharing your craft.
を盛大に、Swatchグループ(香港区)総裁Mr . Kevin RollenhagenやSwatch(香港やマカオ区)副総裁谢兰诗さん(がナンシーだ)特別招待した「シアターの女神家元」陈法拉(Fala)、「シアターの女神」楽瞳(Cilla)、「新晋の日本の歌姫」の松岡李それはどうも(Linah)や「Baby前スキャンダルジェームズParry彼氏」を演じ、工夫をこらした方式Swatch 2011の両の大きい旗艦腕時計シリーズを含む世界に翻訳され、New Gent Coloured及び新しいフルBlooded腕時計シリーズ、ゆっくり悦目に心がめまぐるしく。 http://www.eevance.com/tokei/gaga/index.html
中国に進出して50年余りの日本シチズン会社、50歳の年に「ネット」、中国で控えめ起動時計ネット直販。1月24日、本紙記者からシチズン時計(中国)有限公司(略称シチズン」)によると、2007年の試運転の1段の時間後、IWC スーパーコピーシチズン中国でネット直販公式サイトが開通し、2008年には一層の発展。 http://www.bagkakaku.com/vuitton_wallet/wallet/145.html
スーパーコピー商品N級当ブランドコピー通販サイトはブランド財布、ブランドバッグのスーパーコピーを専門に 扱っています。コピーブランド 代引き,ルイヴィトンコピー 日本での通販オンラインショップ販売を含め 開業6年の実績を持ち、ご安心してご利用下さい。ブランド N級 ブランドコピー販売 弊社はルイヴィトン、グッチ、ロレックス、オメガ等世界 有名なブランド コピー品を販売しております。スーパーコピーのネット通販最安値が探せるサイトですスーパーコピー専門の販売ショップです。ご安心してお買い物をお楽しみく http://www.gowatchs.com/news_cat-12.html
同様にこれらの魅力的な機微のすべての商標、クラブでより明らかにしようと、ダイヤルブローバ時計マンチェスターユナイテッド・クラブの冠の上で見られることができます。 ブランド時計コピー激安通販 有名な頂上、1971年以降は、シャツの上の中心部分を飾る時のサブダイヤル、と悪魔(愛情”として知られるフレッド・ファンによって赤」)、竜頭の上で見られることができます。 http://www.bagkakaku.com/vuitton_bag/2/N55213.html
jant tamiri işleri başta olmak üzere tüm araçların çelik alüminyum ve demir jantları eğik, kırık ve çatlakları itina ile düzeltilir ve tamir edilir.
[…] The One Pixel Rule […]