Now that I’m no longer using photoshop for prototyping, I wonder if it still has a place in my workflow besides just image processing. What are new ways to use photoshop in adaptive/responsive workflows?
Sherpa Dan Mall answers:
Great question! When I want to show someone the best representation of a web site, I shoot for the highest fidelity in the shortest amount of time. That dichotomy between fidelity and efficiency is a balancing act. When helping people envision a brand new house to move into, a showroom may take weeks to build and furnish, but a blueprint or a 3D rendering might only take a day or two. The showroom is more representative because it’s closer to the end result, but it’s also more expensive to tear down and/or revise if changes are needed. In any field where you get to a result through iteration, approximations are necessary.
Embrace Approximations
The value of Photoshop for me has always been that it’s the path of least resistance to the most expressive result. It’s a great tool for me to quickly get to some useful approximations. Using more waterfall-like processes in the past, a comp was the quintessential best approximation. But comps are generally based on the premise that this was how everyone would see the site: 960-ish pixels wide on a desktop computer. We know better than that; in our multi-device world, people access the web from the palms of their hands to the dashboards in their cars. Designing “full comps” for all of the permutations is a zero-sum game.
Visual Inventory
What’s a designer to do in a post-“full comp” era? We need better approximations. The first great approximation that I generally use is a link. I send my clients links and say, “Here’s how they did it. Would that work for you?” I collect those into a document called a Visual Inventory.
Element Collages
Once we have that conversation, I turn to Photoshop to start creating my next favorite approximation: element collages. These are usually ideas that I’m most excited to get out of my head and into pixels. No need to care at this stage whether what you’re designing is a good idea or even possible; the main goal here is expressiveness. I’m looking to establish art direction, the touchy feely stuff. When I show element collages to clients, I’m looking for feedback like, “It feels too dense,” or, “The colors are too bright.” If you start hearing feedback like, “Could we move that a bit to the left?” then you’re being too detailed (or your client is).
Use What Works for You
Sure, you could get this same level of approximation in code instead of Photoshop. In fact, my friends over at Sparkbox make what they call a Style Prototypea staple in their process. For me, however, it’s back to the quickest method of expressiveness. When I’m writing code, my brain isn’t in creation-mode; it’s in debug-mode. All sense of expressiveness is usually stifled in place of “correctness.” And, no offense, but most sites I come across that were “designed in the browser” look “designed in the browser,” if you know what I mean.
The short answer is that there’s no shame in using Photoshop as part of a modern web design process. All this time, we’ve been trying to use it as like a fountain pen and totally missed how great it is as a paint roller. You can use it really well to make some broad strokes. Don’t be afraid to use Photoshop for the big picture stuff and save the fine details to decide in the browser.
Happy Photoshopping!