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