Great Design Hurts

I’m going to share a design theory that I’ve been working on implementing into my own workflow for the past year or so: pixel perfect mockups. To some it might be obvious, but its a tenant 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 8 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 last year at SXSW 2008 that I was introduced to the idea of “pixel perfect” design mockups. Michael Lopp (author of several great design books and a senior engineering mgr 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, and 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.

“That’s it!”, I thought, “the idea that will revolutionize my design process”. And indeed it was.

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:

1. Perfect margins
2. Perfect padding
3. Perfect font usage
4. Perfect borders & backgrounds
5. Consistent color usage
6. Intelligent deviations from the first 5 rules.

What is ‘perfect’?

Simple – it means that they are 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 time there is a sidebar block. With font & color, it also 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 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). Finally, borders & backgrounds should also be consistent – I’ve seen some comps where every border & HR are different shades of the same color – this is silly and it looks sloppy.

The Arguement Against Perfection

Before I go another step though, let me offer a counter-argument to the idea already forming in your mind.

“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 my manifesto. 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, in 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, 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 signoff OR spend 4 hours on a design and another 4 fixing dumb mistakes before you get signoff.

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. Heck, 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 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.

Oh, and 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’ll (and your client) will know when it is. This theory of ‘pixel perfect comps’ doesn’t rely upon 100% results 100% of the time, it relies upon the basic attitude that you bring to each project. After a year of trying it myself, I can say it’s well worth the pain.

• Enjoy the Article? Help me out by sharing it:
• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Tweet about it