Why we skip Photoshop when mocking up websites

http://37signals.com/svn/posts/1061-why-we-skip-photoshop

by mcantor • 17 years ago

42 27 17 years ago

37signals.com

tvon3• 17 years ago

Yes, using a graphic design app is inappropriate if you're not doing any graphic design.

blasdel• 17 years ago

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.

tvon3• 17 years ago

I agree (as much as I can without actually being a designer), and I think a lot of people have lamented the loss of Fireworks when Adobe gobbled up Macromedia. It's also worth mentioning that Inkscape is a good tool if you're on Linux or Windows.

That said, regardless of how mediocre or abysmal Photoshop might be for graphic/web design, it's what most people seem to be using for it these days.

jonny_noog• 17 years ago

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

ironkeith• 17 years ago

That's odd - I'm fairly certain I've seen a number of 37signals articles where they post pics from Photoshop while they're designing interfaces...

smiler• 17 years ago

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

teej• 17 years ago

Jeff Croft's comment hits the nail right on the head:

"Do you think the aesthetic you guys have developed for your products makes this no-Photoshop workflow easier for you than it might for others? ... Is it possible that your no-Photoshop workflow has actually influenced your design style?"

It's fine that 37signals chooses to skip Photoshop as a design restraint to increase flexibility and agility, but they're choosing to sacrifice a degree of aesthetic freedom along the way.

henriklied• 17 years ago

Didn't they later come out with a post explaining how they _use_ Photoshop for mockups?

unalone2• 17 years ago

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.

cb33• 17 years ago

Is it really that big of a hassle to make a quick PSD mockup that will ultimately help you visualize a site? Are those 25 minutes that tedious? I think they're doing themselves a disservice.

unalone2• 17 years ago

Don't knock it if it works.

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

neovive• 17 years ago

I find Fireworks to be a much better tool for web mockups. In the latest version, Adobe added the ability to create interactive (clickable) wireframes and mockups that can be exported to multi-page PDF's. Fireworks offers a great toolset for those who are willing give up some of the advanced image editing functionality of Photoshop for more flexibility and speed.

jamesbritt• 17 years ago

I like DENIM for clickable mockups

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

adamhowell• 17 years ago

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.

fjabre• 17 years ago

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.

bkbleikamp• 17 years ago

This post caused an absurd amount of controversy when it was originally posted. Is it really necessary to rehash all of it?

mcantor• 17 years ago

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.

omouse• 17 years ago

So wait, are they writing HTML/CSS by hand? That's a bit stupid.

gojomo• 17 years ago

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!)

antidaily• 17 years ago

I've noticed quite a bit more graphic details in their recent product pages and sign up forms. Turns out their new designers do indeed design in Photoshop: http://37signals.com/svn/posts/1821-work-in-photoshop-dont-s...

puns• 17 years ago

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.

jubos• 17 years ago

Making your mockup interactive aside, I do like using photoshop to play around with color schemes. Changing css and refreshing the page is slower than just tweaking colors in photoshop.

tjpick• 17 years ago

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.

hkuo• 17 years ago

The controversy here is so unecessary. They begin with "Why we skip..." Note, the word "we". They're making a case that works for them and may work for others that haven't considered it. They're not trying to tell you how you should do things and they're not asking people to tell them how they're wrong. People have just forgotten that there is no one way to do things.

hellotoby• 17 years ago

I think this article is a bit misleading. It's easy to skip photoshop when you already have a house style for your application and a base css template already set up.

Things are a bit different if you are starting to build a brand from scratch.

Why we skip Photoshop when mocking up websites

Related Stories