Part 2: The Design App of Yesterday
"Photoshop is dead".
That's the familiar quip that's made its way around web design circles for some time now. In Part 1, we explored next-gen design apps (like Reflow, Webflow, Froont, and Macaw) as a response to the question "if not Photoshop, then what?". However, as we look to what's next in a future-oriented industry, I find myself wondering if the problem isn't in our software or where it falls short, rather, the integration of it in our workflows and processes.
Struggles with the Browser
In almost every way, designing in the browser is superior to designing in Photoshop. Efficiency is a huge part of web design, and since CSS provides the necessary properties to render a "complete" design, the theory of using it exclusively became attractive. Cutting out the traditional step of making full-page Photoshop comps seemingly saved a large amount of time.
For many of us, myself included, what was sacrificed was the quality of the design.
"I’ve tried, goodness knows I’ve tried, but my designs end up suffering, looking boxy, bland and uninspiring." - Sarah Parmenter
I disclaimer my point here by saying that there are a ton of talented designers who can meld CSS with strong design concepts incredibly well. I wish I were one of those people. But in an similar proclamation of transparency, I've failed to achieve the level of integrity I know I'm capable of if I'm exclusively designing in the browser. That probably has a lot to do with this:
"When you're at the point of fighting your tools, you're not expressive anymore." - Dan Mall
For those in similar situations, there's an apparent notion that comes to mind: "I was expressive in Photoshop, but it wasn't efficient. What now?". Well, perhaps it's time to spring some new life back in to the once "dead" Photoshop. To do so, however, means we'll need to take what we know about using it and turn it on its head. Completely.
Your New High-Fidelity Sketchpad
We've always regarded Photoshop as the canvas for our work, probably because the artwork we create is on this thing called the canvas. Seems logical. But that concept is tied to us creating fully detailed, complete comps at the beginning of our projects, which has its faults. Instead, if we get in the browser sooner through interactive wireframes and low-fidelity prototypes, we have freedom to construct the core of the site: the content, the layout, and the usability of it. The browser is the canvas.
So what happens when we have those gray boxes and we're ready for some style? We've used any number of style documents to apply color, fonts, and imagery to our prototypes. But there's that piece about things looking "boxy, bland, and uninspiring" that still nags at us. Perhaps it's not everywhere, just in some spots. The most apparent remedy is to further sketch ideas for the bland section at hand. It's at this point that I'd like to introduce you to your new high-fidelity sketchpad: Photoshop.
One last conflict to resolve: we don't have original PSD artwork of our site. Flat screenshots are laborious to modify and work with. There has to be a better option than recreating whatever section we're working on from HTML/CSS to PSD. Relax. There is.
The Bridge: Page Layers
Page Layers is somewhat of a revelation to me, since at it's core, it's a HTML-to-PSD tool. Before the scenario we just described, I would have absolutely no interest or use for such a thing. However, I've been using it to grab a page and translate it to a fully-layered PSD, ready for tinkering. The Page Layers app is a browser, especially useful for exporting PSDs of those funky, in-between widths where your design is breaking. Now I can tweak backgrounds, navigation bars, buttons, and pretty much anything else, all in the expressive environment I feel proficient, efficient, and creative in.
If you're interested in Page Layers, you can buy it from the Mac App Store. The investment has paid for itself, in my opinion, and it should only get better from here.
P is for Photoshop, That's Good Enough for Me
What took me hours to fine-tune in CSS, working though possibilities in code, I've been able to sketch in Photoshop in a fraction of the time, usually with better results. I'm reminded of something Sesame Street did with Cookie Monster not too long ago. In an effort to address the alarming consumption of sweets among children, Cookie Monster declared "Cookies are a sometimes food". Cookie Monster is still the lovable character we've come to know and love (my one-year-old daughter is president of that fan club), but he's backed off advocating for a 100% cookie diet.
A similar approach can be taken with Photoshop: it's a sometimes software. Traditional use has placed far too heavy a workload on it. However, when we scale our use of Photoshop back to occasional hi-fidelity sketching and asset creation, it becomes an incredibly handy tool to have in our belts.
The Craftsman
In Part 1, we also explored what any of this has to do with you personally. I've always been of the mindset "use the right tool for the right purpose at the right time". If you use Photoshop, great! If not, great! The underlying concept here isn't that Photoshop is the best web design app for everyone, rather, we designers should be looking to refine our tools. A true craftsman/craftswoman is a master of everything they wield. They're up-to-date on the minutia of their industry, and they've been around long enough to know which approaches are worth taking.
The infinite-device world we live in has presented those who design the web with an interesting circumstance to ponder: Desire to master your craft or get lost in the mix if you're content just getting by. As a client, you'll want craftsmen and craftswomen navigating you through the web in 2013 and beyond. If you're looking for one, how they view their tools should be a good indication.
