Critics talk about “perfection” a lot, often meaning “most appropriate.” While I agree that that can be half the battle, I think more credit needs to be given to perfectly executed designs... also known as “pixel-perfection.” Let’s compare the two in the following examples:
Make Your Point
“Perfect” designs are consistent; they know what they want to say and pick the correct layout, theme, and copy to make their point.Sell Your Point
“Pixel-perfect” designs are all about details. They impress you with their devotion to seemingly trivial concerns. Most are so small that pixel-perfection becomes literal. Hours can be spent correcting the color, positioning, and opacity down to single percentage points. As a whole, a viewer might not notice... but if and when they do, the design will continue to impress (and then some).Above
WhiteHouse.gov is a beautiful website with a stellar layout and a distinct aesthetic. From afar, our execs have a perfect website.Right and Far Right
This website is also pixel-perfect. After finishing the content, our eyes begin absorbing the ceiling decor, the 1px lines, and the consistent spacing and fonts. Even the tiny American flag icon is detailed down to the folds.Almost There
Perfect designs can be amazing at first, but then deprecate over time. Viewers may initially love a site’s aesthetic, but then notice flaws and inconsistencies in its implementation.All the Way There
Pixel-perfect designs become more impressive over time, not less. As a viewer’s eyes finish the content, they begin to dissect the visuals themselves. Because pixel-perfect designs are theoretically flawless from top to bottom (from afar and close-up), they will compound interest over time instead of losing visual value (puns!).Above
Blizzard.com used a slider menu to showcase its current and future game offerings in a way that looks beautiful while being distinctly “Blizzard-style.”Right and Far Right
Colors, lines, and shadows are all flawless from afar and up-close. Perfection is choosing “ice” as the theme. Pixel-perfection is knowing to add a 1px blue highlight to drive that theme home.A Good Start
Perfect designs succeed because they were planned well: the correct design and aesthetic choices were made at the beginning, making the final product look correct. For many designers, this is the most important goal.A Good Job
Pixel-perfect designs outshine the merely perfect ones because they reflect flawless execution not only in the planning phase, but also in implementation and revision. Said revision is especially important; there are no perfect first drafts, just like in writing. Pixel-perfection is a commitment to excellence at all stages of a project.Above
Google.com has evolved alongside the brand that it represents. Google has reinvented its own aesthetic, introducing more black and redefining itself as a web application hub (and not just a search engine).
There are two things to remember. First, you cannot achieve pixel-perfection without first finding perfection. The greatest execution means nothing if the design itself is inappropriate and poorly planned. That’s why pixel-perfection means excellence in all phases of a project, not just its execution.
Second, don’t pursue pixel-perfection obsessively; it’s an asymptotic concept. Almost any designer can look at his or her own work and find a dozen “flaws.” Some spend so long pursuing perfect execution that they overly delay or excessively revise and redo. “Pixel-perfection” is a standard that we should aspire to meet. I know that even this page’s design has problems. Through constant revision, however, I hope that it has at least approached pixel-perfection.
God, I just hope there aren’t any typos.
Fin.