

Ask HN: Why do designers begin with PS rather than going straight to HTML/CSS? - brianfryer

Web designers who know how to code.&#60;p&#62;I've heard a number of reasons for skipping Photoshop and jumping straight to HTML/CSS (e.g. it saves a lot of time). What are the reasons for using Photoshop first?
======
murz
I'm a designer who knows how to code (or more accurately: a coder who knows
how to design).

When I am mocking and laying things out, it's much faster to use Photoshop
because it's easier to just drag objects around instead of tweaking CSS
properties (at this point I'm mostly just dragging around and resizing
vectors/shapes/photos/text to get them in the right size/position).

After I'm pretty satisfied with the layout I will go into vim or Sublime Text
and start hammering out the actual design in CSS. I find tweaking CSS
properties and refreshing my browser to be at least as productive as editing
layer styles in Photoshop (if not more productive). Features of CSS like
gradients, borders, opacity, shadows, etc. actually make it a very reasonable
environment for quickly iterating on designs (especially when paired with
SASS/Compass or LESS). Plus it saves you a step (it's gonna need to be coded
sometime anyway...). YMMV

------
strobe
I'm a artist/designer/developer (artist/designer who works as developer from
time to time (it this year, mostly as developer)).

I think this is only about how much fast you able to translate you brain ideas
to images. PS currently is a most faster way to do this (in some cases
'pencil&parer' will be more effective way ).

For example: imagine randomly curved line which is drew by child; how is way
more fastest to copy it? 1) draw it's copy on different papper with pencil by
your hands 2) generate it's copy by math formula.

Also, in some cases make design with HTML/CSS can be most effective way if the
'design idea' has good fit to html "visual language" (because this way is
enough fast to make design by this way and it cut off psd2html part of work)
(for example site with 'flat' design like HN).

------
michaelpinto
A really good designer might even start with a scrap of paper or a whiteboard
if one is available. The reality is that what's needed is a WYSIWYG tool for
HTML/CSS authoring and quite frankly it's pathetic that there isn't a great
one out there. Writing HTML by hand is like the old world of specing type for
a typesetter instead of using a desktop publishing program. Something coders
don't get sometimes is that designers need visual design tools, not a
typewriter.

------
rasca123
Photoshop is easier to design in because you can change everything around
without having to recode it. There are less steps and some of the best
designers, for better or worse, can only design in photoshop, so it's better
to have them design it and then have someone translate it.

------
paul9290
I'm a front dev who does design though I often wonder if my designs are any
good.

I was going to do a Ask HN about a recent design as Im wondering if my design
provides a solid explanation of what of the app does.

Anyone interested in critiquing & providing feedback?

------
senthilnayagam
With photoshop you can design free style and are not limited by HTML and
browser limitations. Layers transparencies masking and GUI wysiwyg tools make
it easier for creative people

~~~
krapp
But you are inevitably _going_ to be limited by HTML and browser limitations,
so why not work with a tool that respects them? I can see the value in wysiwyg
editors for non-coders but using photoshop itself for layout design never made
a lot of sense to me.

Then again I still do most of my coding in sublime text and use ftp which is
apparently terrible so what do I know?

~~~
LarryMade2
Think of Photoshop as a sketchpad without the limitations/insanity of HTML and
CSS... so you can be totally right brain dreaming up stuff; your mind is
thinking only on the look at that point, not whether IE 8 is gonna blow it all
out of the water.

Once you get the layout into something good then you fire up notepad or
whatever and go into left-brain mode and hack your mock-up it into something
that works.

I, myself, find Photoshop (or any freeform graphics tool) a bad tool for web
mock-ups and HTML/CSS a dreadful syntax to format with... so, either way of
doing those is a struggle for me. :-D

~~~
krapp
_so you can be totally right brain dreaming up stuff; your mind is thinking
only on the look at that point, not whether IE 8 is gonna blow it all out of
the water._

Yeah that would be my stumbling block, i'd always be thinking 'ok this looks
nice but how will I make it _work?_ ' People like me are why they made
Bootstrap I guess. Which is odd, since I have a graphic design background
originally... but I guess my brain just doesn't like moving between the two
modes (or I want to avoid the "turn the psd into html" part of the process...)

~~~
smartwater
A photoshop design can always be coded into pixel-perfect HTML/CSS. Whether
you know how is a different question though.

~~~
krapp
Good point -- I don't know the efficient way to do that.

~~~
smartwater
It's a long drawn out process no matter how you look at it. The elements of
your design have to be broken down and translated into code. Not just any code
though, code that works on all major browsers and operating systems. The same
change that fixes a bug on Firefox could break your layout on Opera. And
you'll need a dozen Virtual Machines to even track down the bugs.

~~~
krapp
I really miss the days when I just had to choose to ignore Internet Explorer.

------
ibudiallo
You design in PhotoShop and you implement it using css and html. Just like you
would make a mock up before starting anything right ?

