I’ve attended several tech/design conferences recently, and one mental scorecard I was keeping tabs on was how many designers still use Photoshop for their web design comps. Consistently, many of the designers I spoke to still predominantly chose Photoshop as their tool of choice for their visual design comps.
Why? I’ll admit, I was a long-time user of Photoshop for design comps…probably because I came from an era where “liquid metal” effect in web design was all the rage. This was an age we’d mockup intricate image-heavy designs, chop them up, then build HTML tables all around them…remember those days?
I can imagine Photoshop being a good tool of choice in a previous era of web visual design, but is this still the appropriate tool in today’s design and development culture?
Frankly, I’d like to kill our dependence on Photoshop and the “liquid metal” era. I think right now is the perfect storm for designers to explore, try out different tools, and perhaps ditch Photoshop altogether…and here are my top reasons why. In this article, I’ll illustrate my personal experience and reasons for switching from Photoshop to OmniGraffle for visual design comps.
Photoshop is not Agile
In today’s agile design and development culture, design needs to be flexible to change, experimentation, and evolution. Photoshop is not an efficient tool to explore rapid design experiments.
The best way to illustrate this point is through a simple use case example. Imagine if you have 10 simple square boxes that hold different paragraphs of text in your Photoshop document. You’d probably have 20 layers already, 1 layer for each box and 1 layer for each text element within a box.
Now imagine if you wanted to change those boxes into wider rectangles and have the text grow to the new shape of the container. Some of you already might be cringing…but these are the exact types of experiments we must make 100 times throughout the day as a visual designer.
Why would we use Photoshop for these tasks? Just to do a little experiment, I took this use case and replicated the effort needed to do this in OmniGraffle versus Photoshop. It was 20 times faster to accomplish this in OmniGraffle! Now imagine every time you wanted to experiment with minor sizing tweaks on all 10 boxes to get things just perfect…painful! You can see why design teams get extremely agitated with design changes…this is not fun in Photoshop.
Photoshop is not Consistent With HTML/CSS Behaviors
To illustrate this point, let’s take the above example with the 10 boxes. Let’s say those boxes now have rounded corners, and we wanted to see how different corner radius values “felt”. Now, like the above example, we wanted to change the sizes of those boxes that have rounded corners.
Ouch! With Photoshop, those rounded corners are hard-coded pixels. You can’t just simply change their shape like you’d do in CSS with border-radius.
Stretching and shrinking these raster shapes totally destroys the beauty of the shape. This is the point where a visual designer using Photoshop would tell their boss that this simple task would take a day or two to provide several different “looks”. Sound familiar?
With OmniGraffle, this simple experiment with visual design tweaking would take only a couple of minutes max. With OmniGraffle, the behaviors and attributes of elements work a lot more like HTML and CSS…with properties like borders, border radius, shadows, gradient fills, padding, etc.
The Proliferation of Flat Design
Flat design has arrived in a big way. It makes sense: clean design, prioritize content and readability, and less reliance on heavy graphics. Today’s design community has embraced design simplicity. Even watching the live feed of the 2013 WWDC introduction to iOS 7, it’s clear Apple is finally moving away from skeuomorphism and embracing flat design.
Take a quick look at some of your favorite most used sites, you’ll notice in the anatomy of the page, the graphic elements are not that complicated…most times producible with pure HTML/CSS. Once again, the era of “liquid metal” consuming the whole page is dead. Just as an experiment…I took a page from Twitter and created a pixel-perfect visual reproduction in OmniGraffle. This exercise took less than 1 hour.
Photoshop as a Subscription Product
In case you don’t know by now, Adobe recently announced that Photoshop will be software that users will need to pay a monthly fee for. I’m really not sure how this decision will play out business-wise, but so far, it doesn’t seem very well received by loyal Photoshop enthusiasts who are used to owning their software.
This decision by Adobe might be what precipitates the perfect storm for a generation of designers looking for Photoshop alternatives for creating comps more efficiently…and just as beautiful. Compare this to OmniGraffle, where you can purchase the standard version for $99 and the pro version for $199.
Conclusion
It’s important to always look for tools that increase efficiency, fits into today’s workflow, and relevant for the current design trends. For today’s web design and layout needs, I personally think OmniGraffle is a very enjoyable tool to use, even though it’s marketed mainly as a wireframing tool.
Is it the perfect tool to build comps? Of course not. I think it’s only a matter of time before another software will better understand a visual designer’s daily pain points, and solve them even more effectively. In the meantime though, I think it does a pretty great job.
I think Photoshop can potentially still have a place in visual design. It’s arguably still a good tool for asset production…but perhaps even in this area, there may be specialized tools out there that accomplish the task better.
For example, to create favicons, I’d just use Icon Slate which costs $4.99. Or for logos and more complex graphics work, I’d choose a vector-based app like Illustrator or Fireworks. Once again, when we use these tools day-in and day-out, finding the right tool for the job can save us countless wasted hours and creative frustration.