graphicpush

Thoughts on branding, design, writing and life by Kevin Potts. Established 2003.

Why I Use and Love Photoshop for Mockups

While I understand how Photoshop can get in the way of building web-based applications, for client work it is the single most important step in the website design process. Clients are paying me to craft the refinement and detail they expect in the final design, and working in a pure HTML/CSS world does not allow that visual development to happen.

This is partially a response to that recent post on 37signals that everyone is chattering about, and partially a commentary on my own workflow. Jason describes in some detail the fact his company skips the Photoshop mockup stage, going “right from a quick paper sketch to HTML/CSS.” What is not 100% clear to me is whether he is discussing internal projects, or contract work for clients. I’m guessing the former.

Since I do not develop Web 2.0 applications for myself, I really do not have the experience to judge whether skipping Photoshop and going right to HTML is the most productive methodology. Maybe it is. However, I can confidently state with the weight of experience that following that path with clients would result in much wailing and gnashing of teeth.

My own methodology is not complex. I have not, after all, deviated from this process in almost ten years. In my proposals, I always outline exactly what’s going to happen and when.

Typical Process

  1. Rough sitemap and (sometimes) a wireframe. I use FreeMind to quickly build a first draft navigation and architecture. To complement it, I sometimes (about 30% of the time) build a crude wireframe in Illustrator to show basic placement of elements, especially if the site’s interface is going to be complex. I retain a library of simple vector elements to build these wireframes in about an hour.
  2. Photoshop. Once the client and I agree on the general sitemap, I dive right into Photoshop building detailed mockups. Most often, the client gets three different versions; when I’m feeling particularly confident, they get two.
  3. HTML and CSS. Once we agree on the design, I can develop the HTML and CSS at ludicrous speed. Since the design is signed off on1, I know exactly what and how to build. There’s nothing over which to anguish.
  4. Development. Usually Textpattern. Duh.
  5. Launch!

Details Are for Now

The richness of Photoshop allows me to explore ideas and iterations in a purely visual manner. There’s no missed tags, browser bugs, float breaking, hunting for hex values, agonizing over margins or trying to remember that stupid border-collapse property. Everything in Photoshop is organic; I can endlessly piddle over layers, colors, type, grid and more. Of course my knowledge of what’s technically possible with CSS keeps me in check, but sometimes I even surprise myself in what that kooky language can accomplish.

For commercial design, I simply do not buy the idea that details are for later. Why? Because my clients don’t buy that idea. If there’s one thing I’ve learned in my first decade of professional design, it’s never tell the client “now imagine this.” Most of them simply do not have that capacity — not because they aren’t smart, but because they do not have the training or right-brain leanings to “imagine” the design that seems to be so clear in a designer’s head. The best way to demonstrate a visual idea is to visually demonstrate the idea.

Clients love detail. Most understand the big picture — why the navigation is on the top, why the logo doesn’t spin 900 times a second, why Flash is retarded. They want to obsess over the details. They’re paying me to bring to life the nuance and refinement that they lack the creativity and skill to realize. They don’t want to see a slowly evolving HTML prototype — they want to see what the final product is going to look like, and could not care less how it gets built.

Whatever

Maybe Photoshop gets in the way of 37signals’ “rapid iterative prototyping”. Whatever. Their solutions are technically sound but not particularly detailed; like most applications, the visual simplicity helps users employ the technology most effectively.

For my client work, Photoshop is the single most important tool in my arsenal. It allows me to capture the design — the branding, the navigation, the typography, the grid — without agonizing over the technical details of CSS. I can design freely and without constraint. Yes, some designs that I put hours into will not get used by any client. But that’s OK, because some eventually see the light of day anyway.

1 What a weird sequence of prepositions.

, , , ,

commentary + criticism

Travis Vocino

wrote the following on Monday June 9, 2008

Do you really give clients 3 different mockups?

I always found that to be counter-productive. I’m not sure where it started but I definitely don’t agree with it. If a client isn’t happy with the direction, change it.

Giving them 3 directions to go down isn’t what they’re paying you for. They want <em>you</em> to define that direction.

St├ęphane Bergeron

wrote the following on Monday June 9, 2008

I work exactly the same way you do and for exactly the same reasons. Clients want to see the details, they want to see the finished look. Heck, I do too. I need to design freely without the contraints of HTML and CSS. I’ll worry about those later. The only difference is that I use Fireworks and Illustrator. I positively hate Photoshop for design and layout work as I work a lot faster in a vector based app. I also find them a lot easier to deal with for iterative design work.

Interesting that you use FreeMind to build site architecture. I use MindManager myself but I love the power of mind maping to organize information. A mind map can become a much richer repository of information than a traditional site diagram created in a flowcharting app can.

Anyway, good post!

Micah

wrote the following on Tuesday June 10, 2008

Great article!

I use www.mind42.com for my own mind mapping/architecture. It’s keyboard friendly and you can attach details to nodes. I heartily recommend it.

Lawrence Salberg

wrote the following on Wednesday June 11, 2008

Great post. Thanks for the insight.

I started using SmartDraw this past year for what you use FreeMind for. It is an absolutely fantastic product. I can even do basic wireframes in it, in addition to sitemaps, org charts, and much more. Best $200 I’ve spent in a while.

Then I use (gasp!) Fireworks MX 2004 – even though I own a perfectly good copy of PhotoShop CS2. I’ll slice someone else’s PS files easily, but I just haven’t made the move fully. Was going to buy Fireworks CS3 when I bought Dreamweaver CS3 last year, but thought… what for? I’m happy with MX 2004.

Since then, I’ve read a few things that made me think twice about that in terms of productivity, but I’ll probably just wait for CS4.

Then into D/W for my CSS magic and into TextPattern or some other system.

I liked how you said knowing CSS keeps you in check, as I often am thinking along those lines when I design (if you can call my lack of artistry a ‘design’). But sometimes I miss the challenge of taking some graphic design student’s impossible mockup and turning it into valid XHTML and CSS, despite me having to send it back for a few revisions (uh, this page is 1100 pixels wide.. no can do). Sometimes those impossible designs make you better.

I think 37 Signals, as much as I like Jason’s thinking at times, has got itself lost the past year with turning out one crazy idea after another (and not too many new products I’ve noticed). It’s almost like they are link-baiting the development world – and we all seem to fall for it and go crazy trying to make sense of what is, for most of us, utter nonsense. Not saying they’re wrong – just so far out of reach from the rest of us that they might as well be wrong.

Wouldn’t surprise me to see them post a blog saying that online project management is dead and they are shutting down Basecamp. We’d all go crazy about it, but hey.. more inbound links for them, so maybe in Friedman’s warped mind that is the end goal. Who knows with them?

Rajesh Roy

wrote the following on Wednesday July 2, 2008

Hi! Well I had a great time reading this wonderful article on Photoshop. Photoshop has always been my first choice as far as design is concerned specially because of the features they provide. Using photoshop does make my job much easier as it is so very user friendly. Photoshop is really an excellent designing tool.
And as the new upgraded version keep coming in form of CS2 and now CS3 the photoshop is getting better and better.

Photoshop is definitely designers first choice.

Thanks
Rajesh Roy

Ram

wrote the following on Sunday August 17, 2008

Nice to know your methodology…I bet this is what most of us follow!

Mel

wrote the following on Wednesday November 12, 2008

I agree on the one mockup approach. We started doing this recently and we get to yes with our clients much quicker.