Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

PSD to HTML is Dead

blog.teamtreehouse.com

Post reply on HN
Print view View original

61–70 of 171 posts

Re: PSD to HTML is Dead

#61

Post by RandallBrown »

Trufa wrote: post #14

I'm a little bit confused of the workflow they are suggesting. I'm a web developer with "good design taste" but I definitely can't design myself, I always pair up with a designer that does the PSD. But of course this doesn't mean that when I see a navbar that has a gradient I copy a paste the image of the navbar in my website with a , my job is porting this images to HTML, CSS and JS. If you're actually putting image…

I have designer type friends who don't do the design in photoshop at all. They just do their design in html and CSS.

This has the obvious advantage that when you're "done" with your design, the UI code is already written.

Of course it's way easier to do things like adjust gradients in photoshop. I also assume that most people will be able to do things in photoshop that they might not know how to do in HTML/CSS.

Re: PSD to HTML is Dead

#62

Post by reneherse »

wpietri wrote: post #26

And thank goodness. If anybody knows where the grave is, I'd like to go piss on it. As somebody who long ago did print design, I totally get why designers would want pixel-perfect control. It is awesome, but you get that in print because you are physically manufacturing an object and sending it to people. The web was device independent from the get-go. It wasn't your paper anymore; it was their screens. There were a…

Great writing. But as someone who also came from a different design field, I'm not sure it's obvious to new designers where and what they should start learning. It would have been great if the author had identified tools for a replacement workflow (though I'm sure Treehouse must get more into that elsewhere on their site).

I came into the world of UX and UI design by way of architecture, and it was quite a while until I found tools that really made a sensible workflow:

• Dot grid paper, index cards, pencil, and scanner for sketching & wireframing or paper prototyping (white boards too of course)

• Fireworks, Photoshop, and/or Sketch for creating graphic assets or the occasional mockup

• HAML for generating HTML

• SASS & COMPASS for creating CSS

• Foundation as a CSS framework for prototyping

• Sublime Text with Emmet(Zen Coding)

• Live Reload running on browsers in another monitor

• Git & Github to get things on the development server

My web developer partner and I sometimes refer to this as the "designer's stack".

[Edited for clarity]

Re: PSD to HTML is Dead

#63

Post by ben336 »

sp332 wrote: post #32
mintplant wrote: post #23

Earlier quoted context omitted.

Bootstrap contains some JavaScript for certain modules, but the majority is CSS (well, Less).

Ok, cool. But Less is also javascript!

No LESS is a stylesheet language that compiles down to CSS. Javascript isn't involved at all, unless you use their script tool to run uncompiled LESS in the browser. That is only meant for prototyping though, in production it will be compiled down to CSS.

Re: PSD to HTML is Dead

#64

Post by pyre »

sp332 wrote: post #42
minimaxir wrote: post #38

Earlier quoted context omitted.

What the client sees is CSS, and that's the important part.

The important part for elorant (and me) is that CSS is awful to work with. And everyone in this thread is proving it by pointing out that you should use some kind of translation layer instead of actually touching it.

Well, there's two things at play here. The complexity of the CSS model in the browser (plus all the browser-specific quirks) and the CSS syntax. Less only solves the CSS syntax issue.

My reading of this thread is that it was started based on the complexity of dealing with CSS in the browser rather than dealing with the CSS syntax.

Re: PSD to HTML is Dead

#65

Post by anentropic »

jbeja wrote: post #50
crimsonalucard wrote: post #35

Earlier quoted context omitted.

I agree that something is wrong with CSS. When you have to resort to hacks when making columns and vertically centering things... you know something is wrong.

Maybe vendors and browser fragmentation is what you are referring to?

no, CSS itself is a bit shit, that's why LESS and SASS came along

Re: PSD to HTML is Dead

#66

Post by jbeja »

anentropic wrote: post #65
jbeja wrote: post #50

Earlier quoted context omitted.

Maybe vendors and browser fragmentation is what you are referring to?

no, CSS itself is a bit shit, that's why LESS and SASS came along

I wasn't talking about transpilers, i was referring to vendors support for every major browser.

Re: PSD to HTML is Dead

#67

Post by IgorPartola »

grey-area wrote: post #46
wonderyak wrote: post #29

Earlier quoted context omitted.

Just to belabor your well made point, here is an example of a final PSD I received from a 'professional agency': (from psdgrade.com) https://cloudup.com/c5RmHN8t1QZ https://cloudup.com/cmpmBEYg93c Thats 27 different font sizes for ONE PAGE of a site. I bet most of this was done through scaling layers to 'fit' into spaces. There were also 42 layers named some verson of -n.

Would you normally expect a psd to contain exactly specified type sizes? I don't use psd comps myself, but I'd treat them as more sketches and guidelines as to actual style and placement, rather than some sort of specification document, because it's a different medium and text handling in ps is pretty basic - it's really not suited to extensive text layout.

To pile onto wonderyak's point, I am a developer, not a designer. I wish I was also a designer, but due to where my talents and experience lies, I cannot do both well at this point. The problem is that I cannot tell what is and what is not important in a design that is handed to me. I have had conversations with designers where I inadvertently change a margin on a callout box by +/- 10% and the designer notices and explains that they arrived at the exact margin by a long research process, and by the way it matches all other places where the margin is exactly 40 pixels and not 36, etc. There are changes that are not consequential and there are changes that completely undermine the message the designer was trying to send. This is not an ego trip. This is a professional telling me that they've thought through the problem and I trust they know much more about the problem domain than I do.

Ideally, I try not to change the design if possible. However, unless the designer is very good, it does require lots of tweaking here and there, which introduces delays and compromises the vision for the finished product. If a designer has long since walked away, it can become a huge problem.

Re: PSD to HTML is Dead

#68

Post by IgorPartola »

debt wrote: post #21
IgorPartola wrote: post #16

Rant to follow: So I have done a fair share of PSD to HTML, PSD to WordPress theme, PSD to application web GUI, etc. rewrites. I generally have no problem with the concept of this, and got quite good at this. However, there are some real pet peeves that keep coming up in this workflow, that are really driving me crazy. If you are a designer working with a developer, and you happen to read this, at least please consid…

Is there a known method for documenting an interaction in a design mockup?

Not easily. Adding a few layer groups that show different states often works well for simple things. HTML/CSS + JavaScript are great if the designer knows how to do this. The next best thing is something like Balsamiq workflows with a detailed textual description.

Re: PSD to HTML is Dead

#69

Post by callmevlad »

The pain of the PSD->HTML workflow, especially around responsive design, is one of the reasons we're working on Webflow (https://webflow.com). While Photoshop will have a critical role in web design for a long time to come, having to deal with multi-resolution elements is extremely tedious.

Also, Photoshop layer styles are way behind what's actually possible with CSS3 these days (multiple shadows, multiple background images, etc), so designers who have to implement a website end up doing their work twice. With a tool like Webflow, implementation work is part of the designer's workflow, so once something looks good on screen, it's actually ready to ship.

Granted, designers have to learn the base concepts of how content flows in a website (the box model), but I think that's a small price to pay for designing directly in the intended medium.

Re: PSD to HTML is Dead

#70

Post by IgorPartola »

nebtune wrote: post #44
IgorPartola wrote: post #16

Rant to follow: So I have done a fair share of PSD to HTML, PSD to WordPress theme, PSD to application web GUI, etc. rewrites. I generally have no problem with the concept of this, and got quite good at this. However, there are some real pet peeves that keep coming up in this workflow, that are really driving me crazy. If you are a designer working with a developer, and you happen to read this, at least please consid…

As a designer, I love hearing what developers want. I always hope the process is going to be a two-way conversation. It helps me a great deal to hear what the developer wants. I also agree that if you're going to design for the web, in PS, you had better at least have a basic understanding of how HTML works and how a web page is put together.

Thanks for understanding. I was really hoping that the original comment wouldn't come through as a rant about designers in general, but more as a list of things that good designers should avoid. I think most dev shops can do very well to hire at least one competent designer instead of trying to separate the design phase and the development phase and outsource the design.
Post reply on HN