I’m going to share a design theory that I’ve been working on implementing into my own workflow for the past couple of years: pixel perfect mockups. To some it might be obvious, but its a tenet so crucial to my own design process now that I’d say it’s been the single most influential idea that I’ve been presented with in over 10 years of designing.
To adopt this theory isn’t just another step in the design process, it’s a perspective changing revolution of the mind that will undoubtedly improve the quality of every design you ever work on from now on. Want to be a better web designer and take on bigger projects? Read on.
Great Design Hurts
It was a few years ago at SXSW 2008 that I was first introduced to the idea of "pixel perfect" design mockups. Michael Lopp (author of several great design books and a senior engineering manager at Apple) was on the panel for a session entitled, "Great Design Hurts"; His speech was hilarious and as littered with as much profanity as a Bill Maher episode. Among his incredibly insightful lecture points was a little gem that explained how at Apple, each designer is devoted to the idea of pixel perfect comps. That is, each and every comp passed around the company is so precise, so pristine, so detailed that the casual viewer can’t tell the difference between the design comp and a fully coded screenshot.
...Each and every comp passed around the company is so precise, so pristine, so detailed that the casual viewer can’t tell the difference between the design comp and a fully coded screenshot
"That’s it!", I thought, "the idea that will revolutionize my design process". And indeed it did.
See, to begin each and every design project with the intention of following it through to the very last pixel changes just about every aspect of the design process. Even if you don’t actually follow through every time, the very notion of having started the design with that intention will have dramatic effects on the final product.
After a month or two of trying this out, my PSD’s were cleaner, my files moved faster, my projects weren’t ’dragging’ in their later stages anymore, and I was spending less time on the phone with clients trying to explain the difference between a rough design mockup and the finished product. Oh, and I was being hired more, which is a good metric to follow by any measure.
So what makes a pixel perfect comp? Essentially, it’s designing a mockup (esp. a web mockup, but it can be anything) as if you were styling it by code in the first place. If you’ve worked at all with CSS/HTML you’ll know what I mean. It includes:
- Perfect margins
- Perfect padding
- Perfect and consistent font usage
- Perfect borders & backgrounds
- Consistent color usage
- Intelligent and justifiable deviations from the first 5 rules.
Let me elaborate upon this idea though; When most designers begin a project, they design is as if it’s just a mockup. The knowledge that some developer or Quality Assurance specialist is going to come in later and fine-tune everything limits how much time and effort they put into the individual designs.
What happens next is natural to most designers: Clients are told that images and icons are "just placeholders". Lorem Ipsum text gets used in place of real content. Heck, even navigation and other major user interface elements get swapped with "filler" content until right before the launch in most cases.
What is "Perfect"?
"Perfect" means that every element of every design comp is exactly as you intend them to be in the final programmed product.
With margins & padding, this means that they are consistent across the entire site design. If each sidebar block in a design is intended to have a 10px margin, then design it that way each and everyt time there is a sidebar block.
With font & color, it means consistent use across the site. Design each piece of font as if it were a linked to an HTML element (ie: all H1’s are always 18px, bold, Georgia using black color). Don’t deviate - as one of my favorite project manager’s once told me, there really shouldn’t be more than 3 or 4 font styles on any single page unless you have a damned good reason to do it. If you are using a specific color of red as a highlight color on the site, make sure that it’s that exact color of red in every single place (unless you’ve got a reason for it to be different).
Borders, HR rules, & backgrounds should also be consistent - I’ve seen some comps where every border & HR are different shades of the same color - this ultimately leads to comps looks sloppy and unprofessional. To an untrained eye, it’s easy to see when a design feels half-baked... even if that person can’t put their finger on exactly what’s wrong.
Finally, use icons, images, titles, and text that are as near to the real thing as possible. If you’re redesigning a website, use the content that they already have published instead of Lorem Ipsum. If the client says that they have new icons or images that they’ll use in the redesign, ask for them and include them in the design.
Remember, we’re striving to create design comps that are so precise that they look like screenshots of the actual, live, coded implementation.
The Argument Against Perfection
Before I go another step though, let’s address the obvious counter-arguments. Cost. Time. Effort. Frustration... the argument already forming in your mind might sound like this:
"If I spend the time it takes to meticulously detail each and every design mockup that passes through my hands, I’ll be spending 3x as much time on design... not to mention the fact that if the client doesn’t like the design, it all goes in the trash".
A fair argument, and one that certainly has it’s merits, but it’s not enough to derail this article :) Remember, the goal isn’t to make every design mockup actually perfect (that would be insane and expensive) - the goal is to change your approach to design. The fact is that the pixel-perfect approach isn’t really practical in lots of cases... but that should stop you from striving for it.
Let’s examine the benefits of pixel perfect comps and then we’ll return to this argument.
Benefits of Pixel Perfect Mockups
It forces you to be more organized. More organization means less time spent wrestling with your PSD’s and more time spent kicking ass at design.
No more explaining to clients. If you’ve designed a comp perfectly, that is, everything is in the place that you intended it, you don’t have to explain to clients that what they see in the design comp isn’t actually what will be in the final product.
No more explaining to developers. This comes especially in handy when your client sends your design comps off to a development team in India where lengthy explanatory emails just don’t translate. If their only job is to code EXACTLY what they see on the comp, it reduces the chances that they’ll misinterpret any design specs. And heck, it’s even easier for the fluent programmers that I work with; They get to focus on programming, not trying to figure out if I want 10px margins or 15px margins.
Less time spent in QA. Quality analysis, if you’re not familiar, is the nails-on-the-chalkboard final rounds of design where you go back into a rough ’proposed’ design and prep it for final presentation. To developers, this is also the name of the final ’pre-launch’ round where each and every detail, functional bug, and stray pixel get’s straightened out. Sure, in small projects you might never go through a QA cycle; but in larger projects that have the budget, you simply don’t walk away from a project until this step is complete and the cleaned up source file is handed over.
Happier Art Directors/Clients. If your art director (or whatever his/her title is) is able to spend less time nitpicking the details on your comps and more time giving valuable directions, their blood pressure (and yours) will inevitably go down during design review meetings.
More professional looking final results. Yes, your comps will look more professional. Now that you’re spending less time explaining or making excuses for sloppy mockups, you can spend more time raising your rate...
The Counter-Punch
So, as a response to the argument against pixel perfect comps, I’ll make these final points.
Your comps should already be perfect. It’s the end-goal of any design project, and if you’re not getting there eventually, it might just be because you never meant to in the first place.
It takes LESS time than the alternative. Pick one: spend 6 hours meticulously designing a web mockup and get client approval quickly OR spend 4 hours on a design and another 4 fixing dumb mistakes before you finally get the client to sign off on a design.
Edits & Revisions happen faster this way, not slower. If you’ve designed your mockup using this mentality, and your PSD is organized to reflect this, each subsequent set of revisions that the client requests will happen at lightning speed.
Excellent mockups mean less time in development. This saves you (or your client) cash. This is the basic tenant of rapid prototyping - get it right before it goes into an expensive development cycle.
It’s the biggest gap between small projects and big budget gigs. The simple fact is that a recruiter looking for freelancers to take on their projects uses "attention to detail" as the single most indicative measure of whether a freelance designer is capable of tackling a major web project. If you’ve got a portfolio full of sloppy comps, it’s just going to be that much harder to prove that you’re trustworthy and capable.
Final Thoughts and Caveats
I said it before, but it’s my final point. You won’t actually achieve pixel perfection on every comp and that’s fine. There is a time and a place for the rough-sketch-comp and you (and your client) will know when it is. This theory of ’pixel perfect comps’ doesn’t require 100% results 100% of the time, it only dictates the basic attitude that you bring to each project. After years of working on this in my own projects, I can say it’s well worth the pain.
Have a different point of view or a comment? Start or join the discussion below in the comments section!
