5 ms·

Why we skip Photoshop when mocking up websites

42 points by mcantor 17y ago

tvon 17y ago
Yes, using a graphic design app is inappropriate if you're not doing any graphic design.
- blasdel 17y 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.
  - tvon 17y 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.
    - psyklic 17y ago
      What do you mean by "loss" of Fireworks? It is still sold by Adobe as part of CS 4.
      - tvon 17y ago
        Holy crap, I had no idea. My mistake.
- jonny_noog 17y 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-photoshop/ 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 17y 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 17y ago
  I believe that they since hired a couple of graphic / UI designers, who it seems use Photoshop a lot more
teej 17y 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 17y ago
Didn't they later come out with a post explaining how they _use_ Photoshop for mockups?
- unalone 17y 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 17y 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.
- unalone 17y ago
  Don't knock it if it works. I don't see what makes Photoshop better than scribbling on a page.
neovive 17y 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 17y ago
  I like DENIM for clickable mockups http://dub.washington.edu:2007/projects/denim/ http://dub.washington.edu:2007/projects/denim/
- adamhowell 17y 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 17y 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 17y ago
This post caused an absurd amount of controversy when it was originally posted. Is it really necessary to rehash all of it?
- mcantor 17y 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 17y ago
So wait, are they writing HTML/CSS by hand? That's a bit stupid.
- gojomo 17y 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 17y 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-save-in-photoshop http://37signals.com/svn/posts/1821-work-in-photoshop-dont-s...
- puns 17y 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 17y 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 17y 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 17y 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 17y 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.

42 points by mcantor 17y ago

tvon 17y ago

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

blasdel 17y 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.
- tvon 17y 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.
  - psyklic 17y ago
    What do you mean by "loss" of Fireworks? It is still sold by Adobe as part of CS 4.
    - tvon 17y ago
      Holy crap, I had no idea. My mistake.
jonny_noog 17y 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-photoshop/ 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 17y 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 17y ago
I believe that they since hired a couple of graphic / UI designers, who it seems use Photoshop a lot more

teej 17y 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 17y ago

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

unalone 17y 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 17y 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.

unalone 17y ago
Don't knock it if it works. I don't see what makes Photoshop better than scribbling on a page.

neovive 17y 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 17y ago
I like DENIM for clickable mockups http://dub.washington.edu:2007/projects/denim/ http://dub.washington.edu:2007/projects/denim/
adamhowell 17y 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 17y 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 17y ago

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

mcantor 17y 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 17y ago

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

gojomo 17y 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 17y 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-save-in-photoshop http://37signals.com/svn/posts/1821-work-in-photoshop-dont-s...

puns 17y 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 17y 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 17y 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 17y 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 17y 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.