Why we skip Photoshop when mocking up websites(37signals.com)
37signals.com
Why we skip Photoshop when mocking up websites
http://37signals.com/svn/posts/1061-why-we-skip-photoshop
12 comments
Yes, using a graphic design app is inappropriate if you're not doing any graphic design.
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
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.
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.
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
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 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.
I like DENIM for clickable mockups
http://dub.washington.edu:2007/projects/denim/
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.
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...
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.
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.
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.
This post caused an absurd amount of controversy when it was originally posted. Is it really necessary to rehash all of it?
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.
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.
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 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.
Things are a bit different if you are starting to build a brand from scratch.
Didn't they later come out with a post explaining how they _use_ Photoshop for mockups?
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.
"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.