
Why we skip Photoshop - terpua
http://www.37signals.com/svn/posts/1061-why-we-skip-photoshop
======
webwright
The problem with religion like this is inflexibility.

The takeaway should be, "get to a functional prototype ASAP and don't sweat
pixel level perfection if you use it", but eschewing Photoshop is not always
the right path for design iteration.

The question designers should ask is "what is the most productive way to
iterate/experiment with this design?" Oftentimes, it's in code. Sometimes it's
in Photoshop. Hell, sometimes I take a screenshot of a working app and fiddle
with it in Photoshop.

And statements like, "Photoshop gives you too many tools to focus on the
details. When you use Photoshop you can’t help but pay attention to the
details." piss me off about as much as statements from their previous posts
like, "People who are workaholics are likely to attempt to fix problems by
throwing sheer hours at the problem."

Just because people CAN do something (focus on details or work inefficiently
because they are throwing hours at the problem) don't mean that the DO.

------
alaskamiller
Because it's the wrong tool.

<http://labs.adobe.com/technologies/fireworkscs4/>

~~~
vegashacker
Neat. I didn't know about this. Is it cool? I'm going to try the beta right
now.

~~~
josefresco
It's very cool, but is in danger of being killed since Adobe bought Macromedia
as there's now overlap between FW and Illustrator. And Adobe is generally
pretty evil.

Let's hope they keep it around.

~~~
poppysan
Adobe had image-ready to compete with fireworks. Upon acquiring the Macromedia
products, they canceled the image-ready line. Illustrator is a vector
editing/illustration suite. Fireworks is a web graphics suite. No need to
worry, there is no major overlap (or at least not enough to warrant canceling
a popular software title).

------
josefresco
Horrible advice from a company who has never lost their ass on a project when
the client didn't like their HTML/CSS 'mockup'.

For a small project I spend 4-5 hours in Adobe Fireworks, then upon approval
(hint: very important if your client doesn't worship you like 37signals) I
build the pages out in real HTML/CSS/JS etc.

My sketch/mockup step is digital, I don't use dead trees.

Alaskamiller is right on, Photoshop is the wrong tool for the job.

~~~
ocskills
I hear what you're saying with regard to clients, but I think you totally
missed 37s' point. They're NOT saying "don't mockup at all". Rather, they are
encouraging an interactive process with real and _usable_ output that adapts
more easily to collaboration and change. There is nothing you can do with
Photoshop that you can't do with paper prototypes and follow-on HTML mockups.

~~~
nertzy
I'd take that even further and say that instead of nothing, there's too much
you can do with Photoshop that you can't with paper prototypes and HTML
mockups.

The ability to do drop shadows on text and use all sorts of fonts and apply a
motion blur and lens flare and opacity and all that doesn't translate well to
the Web.

It's very frustrating as a Web developer to have someone send an over-
Photoshopped mockup that won't work well as a functioning website.

------
merrick33
I don't necessarily agree / disagree however there is a whole lot more to
learn from Philipp Lenssen's interview of Kevin Fox than this post from
37signals about iterative design / usability

<http://blogoscoped.com/archive/2008-06-02-n56.html>

------
petervidani
The reasoning behind the separation in these steps is for 2 reasons:

To save time on both halves. That is, the designer is designing his/her piece
without worry of the difficulty, and the programmer is designing the framework
without worry of user intuitiveness and style.

It so often occurs that the designer and the programmer have slightly
different ways of thinking. Each party has separate concerns for the final
product, and each half should be individually thinking about the future of
their work and how each can be maintained.

This article may certainly apply to, and almost addresses, a programmer
without a sense of concern for the user's experience and general usability.

As a front-end designer, I need the mockup process for my own sake even more
than for the sake of the final product. Personally speaking, if I were to
attempt complex mockups without first laying out a grid and carefully choosing
my color palette, I would quickly be overcome with the duties of writing the
code, and the hundreds of short-term problem solving that would arrive. My
passion is never to become a flawless programmer, but it is to flawlessly
design an intuitive interface. When I am creating a mockup in photoshop, what
I'm doing in my head is pretending. I imagine over and over again that I am a
first time user to the site, and maybe even to the internet. This duty is
daunting enough without having concern over how I will make it work.

Again, this article may whisper sweet nothings to a programmer on a tight
schedule, but I can guarantee you that the time to simply layout a grid and
pretend will save you the time it takes to just load the monster application.
And I don't know about you, but I cannot imagine a site's usability on a
simple piece of paper.

~~~
scott_s
I think his comments are aimed at developers who do a lot of design, not
designers who do some development.

For a developer, making a HTML/CSS mockup is the same kind of pretending that
you're talking about. They think in HTML/CSS terms natively. It requires extra
thought for them to do a mock-up in Photoshop.

------
jsdalton
This article struck a nerve for me (in a good way). It's not just that
Photoshop is the wrong tool for the job, it's also that it encourages a
mentality in the designer which I think is totally at odds with a positive and
productive user experience. In my experience, designers spend a lot of time in
photoshop making designs that "look pretty" rather than actually useful and
useable. Photoshop also completely fails if you do embrace a more iterative
design process, where a lot of the design decisions and even feature ideas
come from creating a working product or model and actually using it.

I do appreciate those who brought up Fireworks because in all honesty I had
never heard of it. AT LEAST that encourages designers to embrace the native
aspects of the web interface and thus to design more closely to the medium.

I don't know if my comments really add any value here, but I just had to get
it off my chest. THANK GOD people are talking about this stuff though, because
I really feel like web design is going to be stuck in 2002 until people move
away from Photoshop.

------
bkbleikamp
There was a recent post on HN about Apple requiring designers to do pixel-
perfect mockups before they got approval to move forward.

I am guessing the right solution is somewhere in the middle.

------
redorb
I think you have to , have a sketching/mockup process ... before you start
coding html/css

\- If you like to sketch on paper, or do super quick mockups in photoshop it
doesn't matter. The point is don't waste too much time making it perfect just
to look at it.

~~~
rrwhite
Why can't html/css be your sketching/mockup process?

~~~
jacobbijani
Because your brain works differently during both activities.

------
jamesjyu
I actually disagree with this. I typically use Illustrator to mock things up
before going into CSS /HTML.

The reason I do this is that when I’m in CSS /HTML mode, I feel like I’m more
limited in what I can actually design. When I’m in Illustrator, I have the
freedom to explore different design elements that I might have overlooked in
CSS . I’ve solved many hard design issues in Illustrator that would have taken
me many back and forth tweaks in HTML and CSS .

The one thing I agree on is that Photoshop is a bit awkward for mockups. I
only go into Photoshop before rendering design elements into pixels.

------
jncraton
I think that there is a big difference between designing a web site for an
eventual user (37signals or startups) and designing a users web site (average
web consulting). 37signals isn't so constrained by what end users want, and
their end users generally have a better feel for how the technology actually
works. The Photoshop or Fireworks step of the process is definitely important
when dealing with users who are picky about looks and will make you redesign
the HTML/CSS/JS over very minute details.

------
ph0rque
One of my future startup ideas is a digital whiteboard, similar to
dabbleboard.com (featured here recently) that would allow you to do a quick
web ui design sketch and output the html/css (or, as long as I'm dreaming,
haml/sass) for further development.

------
figured
I enjoy using photoshop, it allows for you to easily switch up designs, a lot
faster than handcoding. Plus if you using it with ImageReady to slice and dice
it into HTML. You can't beat it for quick prototyping

------
enra
I have found that when I do sites for myself, usually use this approach and
minimize the initial design in Photoshop. For clients I try be "professional"
and use the paper-psmockup-apporove-code flow.

------
STHayden
wow... lot of anger both ways.

All I know is a as a designer at a startup I almost never use photoshop. I use
a pen and then I do mockups in HTML, CSS, and javascript. It's definitely the
fastest way for web applications.

------
sabat
Why I skip 37signals: because all those guys seem to know how to do is play
contrarian.

