Why I never design a site in Photoshop

http://christeso.com/why-i-never-design-a-site-in-photoshop

by christeso • 15 years ago

35 26 15 years ago

wccrawford2• 15 years ago

Actually, it seems to me that this post means we're missing something. Photoshop isn't doing every thing it could be for web designers.

Any time I've used Photoshop or another image app, I've been frustrated by the need to save my layered image, and then manually also export the final image into place to see it in the design. There should be something in place for that.

Of course, I could write a script that uses imagemajick or something, I suppose... If I did much design work. Actually, I'm already thinking about it now, even though I rarely do design. Could be a fun project.

Silhouette3• 15 years ago

Isn't that sort of thing more in the realm of Fireworks?

Photoshop has never really been designed to support web graphics. It just happens that many people are familiar enough with it to get decent results anyway.

wccrawford2• 15 years ago

Thanks. I'll have to look into Fireworks. I think I actually bought it in a bundle a while back, but haven't tried using it. (I'm not really a designer, so...)

jinushaun• 15 years ago

Sounds like you want Fireworks, which was designed for web design and prototyping.

As someone who is actually in the web design industry and uses Photoshop everyday, I know quite well that Photoshop was never intended to do web design, even though my colleagues and I try. Certainly better than web designing (i.e., creating exportable assets) in Illustrator...

endtwist• 15 years ago

These constant articles and discussions about why not to use Photoshop for web design is starting to remind me of this Onion article: http://www.theonion.com/articles/area-man-constantly-mention...

But in all seriousness…while Photoshop may not be the best tool for the job, mocking things up on paper, whiteboard, Illustrator, Omnigraffle, Fireworks, or whatever your visual weapon-of-choice is, is invaluable. You learn a lot more about what works and what doesn't when you're not worrying about whether or not that "float" you just put in to your third <section> column will properly align the element with the first two.

There is a real reason UX/UI and designers exist; please don't crap all over these professions just because you know your code better than you know design fundamentals.

christeso4• 15 years ago

I'm not crapping on anyone. I came up as a designer, with fundamentals. Actually I was a print designer. Even more fundamental. I don't know code better than design. Nor do I know design better than code.

I wrote the post to relay the method I use to design, highlight it's efficiencies, express opinions on process, and hopefully inspire more to try it out.

usejoy• 15 years ago

Photoshop is so lame:))) Draw your ux logic, than illustrate gui. Coding is not the way to think about design. Use prototyping tools. Cleat flow ideas. Than implement them in html/css. Use any graphic editor to illustrate. For gui stuff i prefer Fireworks. For illustration-painting, accent use sketchbook pro/artrage/pixelmator.

christeso4• 15 years ago

I use omnigraffle for initial flows. I should have put that in the post.

I don't think Photoshop is lame. I love it for what I use it for.

kodisha2• 15 years ago

Quora? Really?

I mean, look at this page, it has almost no graphic elements http://www.quora.com/Joel-Lewenstein/Life-Without-Photoshop

The whole site is one color header and bunch of comments.

Good luck designing one of those cssmania.com like sites (when your client ask you to) without Photoshop.

kodisha2• 15 years ago

Here is random example i found on cssmania: http://www.hungarianwinesociety.co.uk/

I would like to hear how would you design this kind of site without PS?

Silhouette3• 15 years ago

> I would like to hear how would you design this kind of site without PS?

Not speaking for anyone else, but my usual design process goes something like this:

1. Identify the structure, in pure information terms.

2. Get a basic idea of the layout, often using just a pencil and paper, or a quick mock-up tool like Balsamiq.

3. Implement the basic structure using HTML, typically as a set of divs nested in some reasonable way.

4. Implement the basic layout using CSS, just enough to position the divs in the right sort of places.

5. Add a bit of placeholder text/images and start styling the details as necessary.

The answer to your exact question, however, is "I wouldn't". I think the page you cited is horrible on just about every level, and if that's the kind of result you are looking for from using PS, you're welcome to it.

alsomike• 15 years ago

I write all my PDFs directly in PostScript instead of using InDesign or Illustrator, because that way it's breathing instead of catatonic or whatever.

feverishaaron• 15 years ago

I get kind of annoyed with these smug, pseudo-contrarian articles about, what boils down to personal preference.

The right answer is: Use the right tool for the right job.

* If it's a simple brochureware template, you might be able to knock it out in HTML from the start.

* If it's graphically complicated, with a lot of rich visuals, starting in Photoshop or Fireworks may be your best bet.

* If it is an application with numerous cases and a potentially complicated interface, starting with a clickable modeling tool, like Axure, might be the wisest approach.

* Roll your own approach for a particular interface problem. Axure sucks for modeling mobile application interfaces, but hey, some dude figured out how to make a usable wireframing model with Keynote.

I've used all three methods, and each has their advantages and tradeoffs. Personal preference often dictates how we work, but the project requirements may force us to re-evaluate these preferences in favor of a more efficient means of completing the project.

acabal• 15 years ago

I agree, and I do the same. I'm not a professional designer (or a very good one at all), and CSS is great over Photoshop because I don't know--and don't have the time to learn--how to use Photoshop's vast library of features. It's easier to just use a CSS reset, open up Firebug, adjust elements until I get to something that looks alright, and take it from there. And if I want to adjust something later, it's a simple matter of changing a property in Firebug and the entire site changes instantly. No messing with layers or what have you.

For super serious designers with lots of non-CSS-able elements, Photoshop is great. But for someone like me who wants something presentable done in a way that I'm already familiar with, HTML and CSS iteration is the way to go.

Edit: Downvotes? I'm not being sarcastic, I truly find this method useful.

petercooper• 15 years ago

There was a big discussion about this on HN a couple of years ago when 37signals weighed in on the topic: http://news.ycombinator.com/item?id=828544 (worth reading)

kneath• 15 years ago

If you've spent 14 years designing and never even tried to design a site in Photoshop I can't possibly fathom how you could have an opinion of the process.

Agree or not, try new things. Try old things. Make an informed decision.

christeso4• 15 years ago

I've tried. I just never finished. This is informed.

stcredzero2• 15 years ago

I'm not sure how refactoring, as I understand it as a programmer, applies to a UX/UI design. Are you making changes to your design that have zero effect on your design's semantics? That's what it would mean for code refactoring -- a change that has no visible effect!

CSS/HTML/Javascript can be refactored in this sense, but I'm not sure refactoring a design can mean anything quite like what it means to refactor a program.

strager• 15 years ago

I think the author intended to say "iterating" instead, for example.

stcredzero2• 15 years ago

Well, it's not as if I stick with the academic definition of refactoring myself.

bmelton2• 15 years ago

To those of us that know Photoshop really well, the process is more advanced than what the author suggests. For me, Photoshop is equivalent to pencil and paper -- I can see where things ought to be, how they actually might look on screen, and whether or not it is visually appealing.

I don't fault the author for having his own process, as it seems to be working for him, but having never done it the other way, I can't imagine how he can condemn it. The argument seems, at a glance, akin to a lifelong vegetarian railing against steak.

I don't work too dissimilarly, in that I will start a layout in Photoshop, start coding, then drop back into Photoshop when I need a new visual element, but when I need to plop a logo or button onto the page, I generally have it at least roughed out in Photoshop. My process works for me, generally, and I've done it both ways, but without prototyping the page in some way, I have a harder time envisioning what to code.

christeso4• 15 years ago

Good thoughtful response. And, we actually use the same process. I do use Photoshop for elements, buttons, logos etc as you do. To be clear, what I stated in the post is I don't do ui or ux or layout in PS.

bmelton2• 15 years ago

Do you draw out your UI/UX first? Do you use paper? Balsamiq? Anything like that?

All I'm saying is that if you're comfortable in Photoshop, it makes a pretty good mockup tool. I forego pen and paper, and jump straight into Photoshop, and that's what works for me. Squares on a paper just doesn't give me a good picture of what I'm doing.

I'm impressed that you can visualize a site layout in code, but it doesn't work as well for me. To each their own.

dkersten• 15 years ago

I like Balsamiq to mockup site UIs.

Why I never design a site in Photoshop

Related Stories