Ask HN: Why do designers begin with PS rather than going straight to HTML/CSS? | Hacker News Reader

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

2 pointsbrianfryer14 comments

Web designers who know how to code.<p>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?

View on HN

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

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).

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.

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.

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?

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

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?

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

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...)

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

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

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.

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

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

Reply on news.ycombinator.com