Mar 27 2013

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:

music-player

Blog-Original

Tweet_2x

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.

pixel-line

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.

pixel-photoshop

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?

pixel-sketch

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.

0 tweets

62 responses to “Pixel Perfection”

  1. Pixel Perfection: A lot of designers throw around the term pixel perfection. But what does it… http://t.co/fjrOMlv0X1

  2. @trey_mckay says:

    Another well-written and insightful post by @MengTo. (His blog looks great on mobile as well ++) http://t.co/Y36caYYS4F

  3. @LukyVJ says:

    Pixel Perfection by @MengTo: http://t.co/cWpp0G45JR

  4. @gielcobben says:

    Pixel Perfection by @MengTo: http://t.co/nKh3ieiTIh

  5. @kuswanto says:

    What’s Pixel Perfection? http://t.co/NkzCcrfMHk

  6. Pixel Perfection » http://t.co/eLUfUqg9ix #graphic #ui #ux #design

  7. @aurielz says:

    Pixel Perfection by @MengTo: http://t.co/aAFulE2LGF

  8. Chase Giunta says:

    I could be wrong but, I think Meng To likes Sketch… ;P

  9. Pixel Perfection, the truth. by @MengTo: http://t.co/fYT2fMpY3K

  10. I love reading posts like this: Pixel Perfection http://t.co/SWS5K6wm8v by @MengTo #design #ui #ux #psd

  11. @tikaszvince says:

    Pixel Perfection | Design Blog http://t.co/NaIr3yZ35D #weblabor

  12. moojoo says:

    Great post, Meng. As a new designer, it is very inspiring to see somebody strive towards perfection.

  13. @pixelradius says:

    Pixel Perfection by @MengTo: http://t.co/YDQbKLv3Gb

  14. @cssradar says:

    http://t.co/QaBy5sz0QG | ピクセルパーフェクトなデザインをするということ。1pxに神が宿るのであれば、サブピクセルの行方についても考える。Meng ToではSketch推しなので、Sketchのサンプルも提供。

  15. Nice little roundup of Pixel Perfection by @MengTo: http://t.co/nVhWJk96IW

  16. @Madedigital says:

    Anyone learning to use Sketch?. Heres some Sketch files to download. Here http://t.co/fqkLHoAupV and here http://t.co/6g8AvfhGop

  17. Chris says:

    i love these articles and wish more than anything Sketch would come out for Windows so I can have a play with it

  18. Have I mentioned how awesome iOS dev weekly is? Yes? Well, I’m doing it again: http://t.co/LHlDtNvRaG via http://t.co/6MDlwo43j1

  19. @novikoff says:

    Pixel Perfection by @MengTo: http://t.co/JHbRUDxec4

  20. @littlehj says:

    Pixel Perfection by @MengTo: http://t.co/IXsL0cQmJC

  21. @kwiboo says:

    Think you’re pixel perfect? are you sure? Our creative director @duncanlaud1 was discussing this earlier this week – http://t.co/W0eGvjFtTJ

  22. @gnatok says:

    Pixel Perfection by @MengTo: http://t.co/ACCSGDPmL0

  23. Pixel Perfection http://t.co/9KrvDhFXP4 (via Instapaper)

  24. […] my previous blog posts, I have been a strong advocate for rounding fractional numbers for Pixel Perfection results. Well, Dominik showed me this neat feature in Sketch that specifically helps you round the […]

  25. @pitchmak says:

    What is Pixel Perfection? by @MengTo: http://t.co/RuYpTCgZN9

  26. @thedaneray says:

    Pixel Perfection by @MengTo: http://t.co/1CCXu7dZfQ

  27. @thedaneray says:

    “Pixel perfection is an obsession and a standard to which serious designers live by” #truth http://t.co/1CCXu7dZfQ

  28. @logotweek says:

    Pixel Perfection by @MengTo: http://t.co/wMNGPcsQbd

  29. Caleb says:

    Keep up the great articles–especially write ups about Sketch–and kudos for pushing pixel perfection :)

  30. […] Pixel Perfection by Meng To […]

  31. […] Edge”, I created a shortcut in Actions called “Refine Tool” so now I can make Pixel Perfection with just a […]

  32. […] Pixel Perfection by Meng To […]

  33. […] again: Take a look at Meng To’s article to learn more about pixel […]

  34. […] again: Take a look at Meng To’s article to learn more about pixel […]

  35. Rachel says:

    could you tell us where the half pixels are, so if we don’t spot them we can compare? I haven’t looked much yet but the first file I’ve looked at looks great.

  36. Kien Tran says:

    Could you make an article about differences between Sketch and PTS, which one is better?

  37. designer says:

    Lifestyle products without compromising on functionality, quality & the design aspects.

    They have a long lifespan and often come with adjustable options for dimming.
    Place one bed behind the other against the wall, and create a storage partition in between.

  38. We are a bunch of volunteers and starting a new
    scheme in our community. Your website offered us with
    useful info to work on. You have done an impressive job and our entire neighborhood will be thankful
    to you.

  39. Angela says:

    ..Hard coding pixel dimensions is something that I’ve been doing in Illustrator for years, and with much more precision. Someone please tell my why Sketch is superior all of a sudden?

  40. Chris says:

    Why doesnt sketch pixel snap by default. That’s what they advertise on their home screen. I keep finding crap in my files that are half pixels.

  41. Thanks to my father who told me concerning this
    web site, this webpage is in fact awesome.

  42. Excellent posts. today i’m able to make smarter wire frame. Thank you for giving this excellent posting.

  43. Elise says:

    I like what you guys aree up too. This sort of clever work and reporting!
    Keep up the excellent works guys I’ve added youu guys to blogroll.

  44. […] Meer over pixel perfectie vind in dit artikel. […]

  45. düşük hapı sipariş

Leave a Reply