Why Photoshop simply doesn't work

I’ve designed a lot of websites, and as you may or may not know, I’m an advocate of building out the actual page(s) in CSS and HTML over designing them in Photoshop. For mockup design, Photoshop is broken in so many ways.

First of all, at its very best, Photoshop can only produce a static image. Sure, it can be just as nice to look at, but a web page is dynamic and has a lot of moving parts. Whether it be a javascript feature, a hover menu, tooltips, rotating galleries, or whatever, you miss out on all of those details with a static comp. It’s not fair to say, “When you click that link, it will open up a box that has X and Y.” And that’s all you can do when you’re explaining an image. Not everyone has that God-given ability to see past still life like designers often do. Clients need interaction to really get the point.

Another advantage to building out the markup is becoming aware of the possibilities and limitations up front. In the past, I’ve been handed a layered Photoshop file to chop up and put back together in HTML where certain pieces of the “design” simply would not work. Designers who live in Photoshop often don’t realize that. They add those extra shadows on overlaying text because Photoshop makes it easy to do so. But on the web, it would require an overkill solution, when it’s clearly insignificant to begin with. Designing in the browser brings those limitations to life, immediately.

And as far as the “but it’s a lot faster” argument goes, I tend to disagree. A good interface designer is typically pretty proficient in developing markup and working in CSS. Processes get established, patterns get formed, etc. And to some degree, it’s a basis for when you would otherwise have to do that anyway. Besides, there are a lot of mockup frameworks that allow you to become as efficient as possible (my personal favorite: Bones).

Don’t get me wrong, I love Photoshop. I use it almost every day. But for mocking up an entire interface? No thanks.