Why I Use and Love Photoshop for Mockups
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
- 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.
- 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.
- 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.
- Development. Usually Textpattern. Duh.
- 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.
Comments.
Travis Vocino
- wrote the following on Monday June 9, 2008
Stéphane Bergeron
- wrote the following on Monday June 9, 2008
Micah
- wrote the following on Tuesday June 10, 2008
Lawrence Salberg
- wrote the following on Wednesday June 11, 2008
Rajesh Roy
- wrote the following on Wednesday July 2, 2008
Ram
- wrote the following on Sunday August 17, 2008
