Why Designing for the Web in Photoshop Sucks
by Arik
Web design is almost not even a real industry without Adobe Photoshop. I mean seriously, think about it. You can’t walk into any web designer’s office/workspace without seeing at least a trial of Photoshop. It’s a staple of web design. Well, a staple in any creative field for that matter. After all these years, I’ve come to hate it. It’s time to [partially] remove it from the tool belt. Hit the jump to find out my reasons.
I’m over-reacting? You sir can shut up.
So here’s the deal. 79.63% of your time as a web designer is spent editing code in a text editor or web development IDE. Hacking on code (be it html, css, javascript, ruby, or whatever) is just a part of being a web designer. If anything, Photoshop is an unnatural fit for this line of work.
Don’t worry, this topic has been covered from many different angles before. But I’m fresh with it, so eat it. Look, Photoshop is awesome. I wouldn’t even be a designer if it were not for Photoshop. Sure, design is more than just a software application or tool, but Picasso would be a worthless hack without a good brush. Now following are the reasons why I think photoshop sucks for web design, finally!
Photoshop wasn’t built for iteration
For every change you make in Photoshop, you have to replicate it in the browser. God bless your soul if you have to do all this while a client is patiently waiting to see updates. You see, Photoshop only allows you to design a web layout in theory and not in reality. So you’re crossing your fingers every time you slice out a design. Frankly the whole process just sucks. Since CSS, HTML and Javascript are the end product, why not just start there to begin with? Headaches gone.
Besides, iterating a design is far easier in markup and css. If you know what you’re doing, the whole process can be downright beautiful and almost enjoyable and since the design is already coded, there’s no more “design time in photoshop”. It’s in the browser already!
Photoshop doesn’t do “interaction”
This point stands to be repeated as originally stated by Ryan Singer of 37signals and instead of murdering you with my own brand of eloquence, here is the quote from Ryan himself:
You can’t click a Photoshop mockup. This is probably the number one reason we skip static mockups. They aren’t real. Paper isn’t real either, but paper doesn’t have that expectation. A Photoshop mockup is on your screen. If it’s on your screen it should work. You can’t pull down menus in a Photoshop mockup, you can’t enter text into a field in a Photoshop mockup, you can’t click a link in a Photoshop mockup. HTML/CSS, on the other hand, is the real experience.
And the argument goes, “Your design process may call for skipping Photoshop, but ours doesn’t”. First of all, no one said you had to absolutely stop using Photoshop. However, you do need to stop using it for actual interaction design as it just doesn’t make sense.
Photoshop doesn’t scale
Yep, that’s exactly what I mean. When I say “scale” in this context, I mean driving a u-haul truck up a road-less mountain. You ever try adding things to a design you made 3 months ago in Photoshop? Let me tell you, it sucks the major nut of a donkey. Layers are messy and strewn about like a dirty college dorm and you probably forgot to organize, group and name your layers like a “real” designer should.
Essentially you have to throw the original design out and start from scratch again. Sure, you can pull out a few buttons, patterns and other bits, but it’s really just a monumental waste of time.
Photoshop rant is over. Long live Photoshop.
Like I said, Photoshop is awesome. It will always be in my tool belt. But while it’s not the best tool for reality-driven interaction design, it still serves my needs as a designer at just about every level. This rant is not to suggest you throw out the one tool that got you where you are. It’s more of a reminder that some octagon pegs just aren’t meant to fit in circular holes and no you can not use sand paper for the edges.
Comments
I love it when people complain like this but don’t offer an alternate solution. Great, you hate Photoshop and list why its bad for devs. Ok, then what are my other options? This article is pointless and not useful unless you are targeting Adobe hoping they read it and make Photoshop more developer friendly.
@Jeremy,
Usefulness is relative. So I’ll just ignore that. But I am sorry that you disagree. This post is clearly not a write-up on alternatives to Photoshop. If it were, I would have titled this post, “Alternatives to Photoshop”. As a matter of fact, this post is more about design process than about tools and maybe that wasn’t communicated effectively. For that I apologize.
But if you want options, try a pencil and paper. That’s worked well for me on many occasions. If you’re showing to clients, use Visio or OmniGraffle which are both great for wire-framing and allow you to add super basic interaction bits like submitting a form, clicking a button/link or moving between pages. Not to mention there are tons of resources for designing web layouts with those tools.
The whole point of the post was to suggest that the final product shouldn’t be in Photoshop. That is not where a design should end and for me, that’s not where I want it to start either. Every design decision you make in photoshop is an arbitrary guess at how it will look in the browser. You can get really close and for some that’s good enough. For others it may not be. It’s really up to you what you should use because everyone’s process is different. It’s all about the best tool for the job in relation to your own process.
I can make a PSD 100% the same in Firefox. While there will be discrepencies like font pixelation and smoothing (like on older macs everything looks bold), but if iwanted to spend the extra 20 hours to make it look perfect for each browser out there, it’s possible.
I agree with your post however, and I’ve sort of regressed back to the layout sketching on a whiteboard or notebook. Soooooo much better! Then take it into a wireframe software app like you mentioned, let the client see an idea come to life. Rather than wait 3 months for 50 PSDs of each page. Have you ever had like 200 elements in your design and moving things around gets messy?
I used Fireworks for a while because of the interactive states you can create and the easy vector tools and web sets, but it’s a resource hog and the process of saving images to the web was tedious. I now use a blend:
What you’re saying is start with the HTML and CSS? I’ve never tried that before….
Well essentially yes. While the process hasn’t been that successful for me while under the gun, I find it to be freeing when I’m not under deadline. But this year I’m hoping to improve on the process so that I can do it fast and that means pre-writing a bunch of stuff.
i hate that photoshop is so counter intuitive. Every time i go to do something the way it makes sense to me…the selection is blacked out or i get a box saying you can’t do that.
yes photoshop is awesome in what it can do, but doing it is nothing less a big pain in the arse and having to learn a new language.
Artist should be able to using photoshop to do art like an artist would….not like a programmer would!