

Why I never design a site in Photoshop - christeso
http://christeso.com/why-i-never-design-a-site-in-photoshop

======
endtwist
These constant articles and discussions about why not to use Photoshop for web
design is starting to remind me of this Onion article:
[http://www.theonion.com/articles/area-man-constantly-
mention...](http://www.theonion.com/articles/area-man-constantly-mentioning-
he-doesnt-own-a-tel,429/)

But in all seriousness…while Photoshop may not be the best tool for the job,
mocking things up on paper, whiteboard, Illustrator, Omnigraffle, Fireworks,
or whatever your visual weapon-of-choice is, is invaluable. You learn a lot
more about what works and what doesn't when you're not worrying about whether
or not that "float" you just put in to your third <section> column will
properly align the element with the first two.

There is a real reason UX/UI and designers exist; please don't crap all over
these professions just because you know your code better than you know design
fundamentals.

~~~
christeso
I'm not crapping on anyone. I came up as a designer, with fundamentals.
Actually I was a print designer. Even more fundamental. I don't know code
better than design. Nor do I know design better than code.

I wrote the post to relay the method I use to design, highlight it's
efficiencies, express opinions on process, and hopefully inspire more to try
it out.

------
feverishaaron
I get kind of annoyed with these smug, pseudo-contrarian articles about, what
boils down to personal preference.

The right answer is: Use the right tool for the right job.

* If it's a simple brochureware template, you might be able to knock it out in HTML from the start.

* If it's graphically complicated, with a lot of rich visuals, starting in Photoshop or Fireworks may be your best bet.

* If it is an application with numerous cases and a potentially complicated interface, starting with a clickable modeling tool, like Axure, might be the wisest approach.

* Roll your own approach for a particular interface problem. Axure sucks for modeling mobile application interfaces, but hey, some dude figured out how to make a usable wireframing model with Keynote.

I've used all three methods, and each has their advantages and tradeoffs.
Personal preference often dictates how we work, but the project requirements
may force us to re-evaluate these preferences in favor of a more efficient
means of completing the project.

------
kodisha
Quora? Really?

I mean, look at this page, it has almost no graphic elements
<http://www.quora.com/Joel-Lewenstein/Life-Without-Photoshop>

The whole site is one color header and bunch of comments.

Good luck designing one of those cssmania.com like sites (when your client ask
you to) without Photoshop.

~~~
kodisha
Here is random example i found on cssmania:
<http://www.hungarianwinesociety.co.uk/>

I would like to hear how would you design this kind of site without PS?

~~~
Silhouette
> I would like to hear how would you design this kind of site without PS?

Not speaking for anyone else, but my usual design process goes something like
this:

1\. Identify the structure, in pure information terms.

2\. Get a basic idea of the layout, often using just a pencil and paper, or a
quick mock-up tool like Balsamiq.

3\. Implement the basic structure using HTML, typically as a set of divs
nested in some reasonable way.

4\. Implement the basic layout using CSS, just enough to position the divs in
the right sort of places.

5\. Add a bit of placeholder text/images and start styling the details as
necessary.

The answer to your exact question, however, is "I wouldn't". I think the page
you cited is horrible on just about every level, and if that's the kind of
result you are looking for from using PS, you're welcome to it.

~~~
ThomPete
That is not really answering the question.

Are you also going to design your iPhone or iPad apps in objective-c?

It's easy to use code for structure and basic skinning but if you need details
you are simply going to have to take it through some editor

~~~
Silhouette
Neither of my first two steps involves any production tools at all, so I don't
think it matters what platform(s) we're aiming for at that stage. I use the
same process whether I'm building a web front end, a mobile app, or a native
app on a PC. Usually, by the time I'm firing up Photoshop or similar tools, I
already have a pretty good idea of exactly what graphics I need and how they
are going to fit together.

------
kneath
If you've spent 14 years designing and never even tried to design a site in
Photoshop I can't possibly fathom how you could have an opinion of the
process.

Agree or not, try new things. Try old things. Make an informed decision.

~~~
christeso
I've tried. I just never finished. This is informed.

------
acabal
I agree, and I do the same. I'm not a professional designer (or a very good
one at all), and CSS is great over Photoshop because I don't know--and don't
have the time to learn--how to use Photoshop's vast library of features. It's
easier to just use a CSS reset, open up Firebug, adjust elements until I get
to something that looks alright, and take it from there. And if I want to
adjust something later, it's a simple matter of changing a property in Firebug
and the entire site changes instantly. No messing with layers or what have
you.

For super serious designers with lots of non-CSS-able elements, Photoshop is
great. But for someone like me who wants something presentable done in a way
that I'm already familiar with, HTML and CSS iteration is the way to go.

Edit: Downvotes? I'm not being sarcastic, I truly find this method useful.

------
stcredzero
I'm not sure how _refactoring_ , as I understand it as a programmer, applies
to a UX/UI design. Are you making changes to your design that have zero effect
on your design's semantics? That's what it would mean for code refactoring --
a change that has no visible effect!

CSS/HTML/Javascript can be refactored in this sense, but I'm not sure
refactoring a design can mean anything quite like what it means to refactor a
program.

~~~
strager
I think the author intended to say "iterating" instead, for example.

~~~
stcredzero
Well, it's not as if I stick with the academic definition of refactoring
myself.

------
wccrawford
Actually, it seems to me that this post means we're missing something.
Photoshop isn't doing every thing it could be for web designers.

Any time I've used Photoshop or another image app, I've been frustrated by the
need to save my layered image, and then manually also export the final image
into place to see it in the design. There should be something in place for
that.

Of course, I could write a script that uses imagemajick or something, I
suppose... If I did much design work. Actually, I'm already thinking about it
now, even though I rarely do design. Could be a fun project.

~~~
Silhouette
Isn't that sort of thing more in the realm of Fireworks?

Photoshop has never really been designed to support web graphics. It just
happens that many people are familiar enough with it to get decent results
anyway.

~~~
wccrawford
Thanks. I'll have to look into Fireworks. I think I actually bought it in a
bundle a while back, but haven't tried using it. (I'm not really a designer,
so...)

------
petercooper
There was a big discussion about this on HN a couple of years ago when
37signals weighed in on the topic:
<http://news.ycombinator.com/item?id=828544> (worth reading)

------
bmelton
To those of us that know Photoshop really well, the process is more advanced
than what the author suggests. For me, Photoshop is equivalent to pencil and
paper -- I can see where things ought to be, how they actually might look on
screen, and whether or not it is visually appealing.

I don't fault the author for having his own process, as it seems to be working
for him, but having never done it the other way, I can't imagine how he can
condemn it. The argument seems, at a glance, akin to a lifelong vegetarian
railing against steak.

I don't work too dissimilarly, in that I will start a layout in Photoshop,
start coding, then drop back into Photoshop when I need a new visual element,
but when I need to plop a logo or button onto the page, I generally have it at
least roughed out in Photoshop. My process works for me, generally, and I've
done it both ways, but without prototyping the page in some way, I have a
harder time envisioning what to code.

~~~
christeso
Good thoughtful response. And, we actually use the same process. I do use
Photoshop for elements, buttons, logos etc as you do. To be clear, what I
stated in the post is I don't do ui or ux or layout in PS.

~~~
bmelton
Do you draw out your UI/UX first? Do you use paper? Balsamiq? Anything like
that?

All I'm saying is that if you're comfortable in Photoshop, it makes a pretty
good mockup tool. I forego pen and paper, and jump straight into Photoshop,
and that's what works for me. Squares on a paper just doesn't give me a good
picture of what I'm doing.

I'm impressed that you can visualize a site layout in code, but it doesn't
work as well for me. To each their own.

------
dkersten
I like Balsamiq to mockup site UIs.

------
alsomike
I write all my PDFs directly in PostScript instead of using InDesign or
Illustrator, because that way it's breathing instead of catatonic or whatever.

------
usejoy
Photoshop is so lame:))) Draw your ux logic, than illustrate gui. Coding is
not the way to think about design. Use prototyping tools. Cleat flow ideas.
Than implement them in html/css. Use any graphic editor to illustrate. For gui
stuff i prefer Fireworks. For illustration-painting, accent use sketchbook
pro/artrage/pixelmator.

~~~
christeso
I use omnigraffle for initial flows. I should have put that in the post.

I don't think Photoshop is lame. I love it for what I use it for.

