The Pitfalls of Photoshop Comps

I attended college during the graphic design segue from analog to digital. We had a couple of Macs (I think they were LCs, remember those?), but they weren’t being used for actual production work yet out in the real world. We learned to do things both on and off the computer, and I’m glad I got to be a part of it.

Computers have changed the way designers work. Until you’ve hand-inked 25 variations of a logo with technical pens and india-ink-soaked brushes, you won’t fully appreciate how much time an application like Adobe Illustrator can save you compared to the way things were done in the past.

On the other hand, presentations were made quite quickly. I can draw quite well, but not very quickly. When I started work in branding and advertising, I was simply amazed at how quickly some artists could render some art director’s idea. They got a briefing, went back, drew for a few hours (mostly with markers), pasted the drawings on board, and boom. Presentation done. Okay, I’m exaggerating the process, but these people were fast.

After a while, I and many other designers started doing these analog/digital hybrid comps (many use the word mockup, you decide), a sort of glorified cut-and-paste, combining computer-set type and drawings or prints of actual photos. Type rendering was quicker, but the rest started slowing down. But, clients liked it because they had a clearer picture of what they were going to get.

Uh-oh. Now you feel it coming.

Photoshop. I don’t necessarily mean the Photoshop, just that type of application. Photoshop, Illustrator, and all these othher tools are wonderful. They help designers, absolutely. But something’s going on which is actually making clients (and even account managers) more demanding, and making things really hard on designers.

The problem with Photoshop comps is that they look too easy and they look too real. Some clients actually think you’re almost done with the work. The great thing about those old marker renderings, which are sometimes still presented to clients (only less often), is that they looked very impressive and hard to do, and they didn’t appear to be a completed product.

So wherein lies the danger? When we’re so good at making slick proposals, that the reality of the actual product causes the client to question the difference. This isn’t much of an issue with print work. It is with the Web. It’s tempting to use anti-aliasing in proposals, just to make them look good, sell better, and forget that not everyone is using a Mac; not everyone will see smooth type on-screen. Well-chosen and well-edited proposal imagery may not match what the client’s budget will allow. They may actually want that photo, and be dissatisfied with any alternatives.

Ambiguity can be important. It’s a tool. Think about the last time you read a book and then saw the movie. Most often, the on-screen movie will never beat the movie in your own head, which you made by reading the book. The ideas are there, but you fill in the details. When you present a super-comp to a client, they can’t fill in the details. Instead, they begin to focus on the details already in place. And no, Lorem Ipsum is not the answer (not completely ;-). So what is?

If you’re having no problems in this area, I salute you. Either you have a great account manager, a client who trusts you so completely that you’ve actually wasted your time showing them a preliminary design in the first place, or you’re lucky. The rest of us need to find ways to minimize the discrepancies between what we show and what the client gets, as well as ways to help us save time.

Here are some ideas (not a step-by-step!):

  • Present polished rough sketches first, then move on to comps. This allows the client to comment during the phase which takes the least amount of time. The final comp is often seen by the client as a collaborative effort, in which the client has taken part.
  • Use mood boards first. Mood boards have been around for a long time, specifically for the purpose of defining possible design directions before spending lots of valuable time on the execution of an idea which the client might not like in the first place. Don’t continue on until the mood boards have been approved.
  • Use as much of the client’s material in your comps as you can, unless the material is to be developed from scratch. If I had a dollar for every time a client wanted that specific photo or illustration which I had simply ripped from a magazine or stock book for the presentation, I’d be blogging from my beach house in the Bahamas.
  • Do use Lorem Ipsum for body text, but not for headers and navigational/functional elements. Try to be as realistic in these elements as possible. You don’t want the client to end up ignoring the design and start reading the text, but you do want to keep the difference between “Consectetuer” and “Other articles of interest” in mind.
  • Explain. Always explain to your client in no uncertain terms that this is not a finished product.
  • Don’t present digitally. Oooh. I’m going out on a limb here, but if you present to, say, five or less, try to avoid laptop or projector presentations and print and paste your comps on presentation board. This seems to somehow psychologically frame them as “conceptual”, as opposed to “almost done”.

These are just a few ideas. Please feel free to post your own methods as comments. I’m interested in how other designers approach this problem! Basically, and I’ll repeat this often enough in this blog: work gradually from loose ideas and concepts in the beginning to details in execution later on. Much time is often lost tweaking those icons, only to find that the client doesn’t like where you’ve gone with the whole. Eliminating discrepancies between comps and end results while maintaining a stunning proposal can save lots of time, and lots of money.

2 thoughts on “The Pitfalls of Photoshop Comps

  1. I saw your site and was curious as to how you implemented the right hand side bar which is equal in length to the left hand side content.

    I have tried this using css and xHTML but never worked.

    Basically, I want to ensure that my left/right navigation should be equal in height to the main content area.

    Any ideas are appreciated.


  2. Amit: you might want to take a look at Dan Cederholm’s article on A List Apart, Faux Columns, which describes a technique for what you’re looking for. Doug Bowman’s Liquid Bleach explains a technique for applying this to a liquid layout.

    Hope this helps.

Comments are closed.