Why I never design a site in Photoshop

These constant articles and discussions about why not to use Photoshop for web design is starting to remind me of this Onion article: <a href="http://www.theonion.com/articles/area-man-constantly-mentioning-he-doesnt-own-a-tel,429/" rel="nofollow">http://www.theonion.com/articles/area-man-constantly-mention...</a><p>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 &#60;section&#62; column will properly align the element with the first two.<p>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.

I get kind of annoyed with these smug, pseudo-contrarian articles about, what boils down to personal preference.<p>The right answer is: Use the right tool for the right job.<p>* If it's a simple brochureware template, you might be able to knock it out in HTML from the start.<p>* If it's graphically complicated, with a lot of rich visuals, starting in Photoshop or Fireworks may be your best bet.<p>* 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.<p>* 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.<p>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.

Quora? Really?<p>I mean, look at this page, it has almost no graphic elements <a href="http://www.quora.com/Joel-Lewenstein/Life-Without-Photoshop" rel="nofollow">http://www.quora.com/Joel-Lewenstein/Life-Without-Photoshop</a><p>The whole site is one color header and bunch of comments.<p>Good luck designing one of those cssmania.com like sites (when your client ask you to) without Photoshop.

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.<p>Agree or not, try new things. Try old things. Make an informed decision.

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.<p>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.<p>Edit: Downvotes? I'm not being sarcastic, I truly find this method useful.

I'm not sure how <i>refactoring</i>, 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!<p>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.

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.<p>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.<p>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.

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

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.<p>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.<p>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.

I like Balsamiq to mockup site UIs.

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.

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.