The Post-PSD Era

Are we entering the Post-PSD Era of web design?

Throughout my career, I’ve watched immensely talented designers waste a shitload of time creating fully fleshed-out comps of what a website could look like. Pixels get pushed, details are sweated, pages are printed out, hung on walls, and presented to clients. Clients squawk their feedback, then designers act on it. They repeat this dance until everyone is content (or until nobody gives a shit anymore, which happens more often than you’d think). Only then do those pristine comps get handed (more like shoved) over to developers to build.

It’s an increasingly-pathetic process that makes less and less sense in this multi-device age. I’m not making a case for ditching Photoshop altogether and designing solely in the browser (where are the blend modes in Chrome dev tools again?) but rather better understanding how we use Photoshop in modern web design (thanks Trent).

Photoshop is great for:

• Creating and editing graphics. Duh. Creating/editing graphical elements is Photoshop’s wheelhouse.
• Establishing what Andy Clarke refers to as design atmosphere: the colors, textures and general feel of a design. This in my opinion is Photoshop’s greatest advantage over designing things solely in a browser or on paper.
• Sketching – No doubt Photoshop, napkin sketches and paper prototypes can be much faster than coding out a prototype. However, I will say with tools like Codepen it’s getting pretty damn easy to sketch out an idea in code pretty fast.
• Developing Style Tiles, mood boards, etc. Again this more or less relates to the atmosphere of the design.

Photoshop is not great for:

• Creating fully fleshed-out comps – It’s literally impossible to articulate every environment, resolution, user preference and circumstance in Photoshop. Stop trying. Stop with all the “iPhone view,” “iPad view” and “Cinema display” view. There’s far more to it than that.
• Articulating states – Hovers, clicks, and other interactive elements are better prototypes than in shoddy Photoshop layer comps. There’s a lot more that goes into how something works (performance, responsiveness, ergonomics, general feel) than just the visual differences. Again it’s one thing to sketch out an idea, but I can speak from experience that designers can go overboard with this type of thing.

Use what tools you’re comfortable with, but know when those tools stop making sense. Play the tools in your toolkit to their respective strengths, and sort out a way to communicate your design ideas to clients without forcing them to envision what a fully-polished final printed out product could look like.

Perhaps this post should have been named Death to the Waterfall.