Why we skip Photoshop when mocking up websites

Photoshop is:

  An extremely good interface for editing and retouching photographs
  Okay for doing painting and bitmap art creation
  Mediocre for doing graphic design -- alignment and layout are frustrating
  Abysmal for doing web design that isn't brochure-like

Omnigraffle is a terrific example of a general graphic design app that is suitable for web design.

I remember reading this article when it was originally posted last year and thinking that it makes sense for 37S to skip Photoshop mainly because they already have a strongly defined, common visual style for their web apps. I get that the 37S visual style could be seen as "not doing any graphic design" and I assume this is meant in an at least partially facetious way, so don't worry, I get the joke and the serious point contained within it. I am however happy to stand up and say that I am one of those who likes the bare visual style that 37S pioneered.

But none the less, skipping the non-functional mock-up stage does not make so much sense for your average (say, freelance) web designer/developer who is directly servicing multiple clients, each of whom expects a completely different visual style for their website. I remember following a link (somehow connected to this 37S post, maybe in the comments or something) to this post:

http://www.pixelhavenllc.com/weblog/designers-who-skip-photo...

And thinking that sums it up pretty well for me.

As often seems to be the case, some people think that what 37S says works for them should invariably work for everyone else without modification and if it doesn't, then that somehow invalidates any value that their advice may have had. o_0

I like DENIM for clickable mockups

http://dub.washington.edu:2007/projects/denim/

Agreed, one of the more pleasant surprises at Google was that almost the entire Apps UX team used Fireworks. Photoshop users eventually made the switch b/c they were in the minority.

Yeah I use FW for all my projects. Much easier than PS for web stuff. PS was really designed for print anyway while FW was designed from the beginning to be a web designer's tool.

Their new designers are adding a lot more visual touches to the interface, too. The original 37signals style consists mainly of HTML elements styled with CSS, and with all the controls unstyled, e.g. form controls. When you're not creating new images for buttons, backgrounds and boxes, then there really is little point to use Photoshop -- you just need to mock up the layout, and that can be done on paper.

When you're adding a lot of visuals, you'll end up using them in the final product, which is where designing that stuff and laying it out in Photoshop becomes more practical. It really depends on the style of the UI and how heavily it relies on custom images.

I believe that they since hired a couple of graphic / UI designers, who it seems use Photoshop a lot more

I found the controversy fascinating. Yes, there is a danger of a circular debate ("Well, yes, but X"; "Well, yes, but Y"; "Well, yes, but X", etc...), but the article forced me to reconsider my assumptions, and that's great. Even if I still use Photoshop, it's good to examine why.

firebug saves doing a refresh, and makes dynamically editing css a pleasure. The webdeveloper toolbar "edit css" functionality is ok too, if you want to copy/paste css.

I don't think so. There was a popular article from somebody else at the time that was a counterpoint, but it was entirely external.

Don't knock it if it works.

I don't see what makes Photoshop better than scribbling on a page.

You don't mock things up in hand-crafted HTML/CSS? What do you start with? (Dreamweaver?)

(Sometimes my first mockup of a UI is monospaced plaintext in a draft email!)