[reuven]

It drives me totally batty to work on projects in which the designer assumes that their only responsibility is to provide a PSD file, which the developers will then turn into HTML and CSS.

I want to work not just with designers, but with Web designers, who intimately understand the workings of HTML, CSS, some JavaScript, and the implications for different browser sizes and versions. Web designers speak HTML/CSS natively, taking these limitations and issues into account when they're creating their designs. And if something needs to change, they can change the HTML/CSS that was created. If the designer only knows how to work with Photoshop, every change to the site requires a great deal of additional work and communication.

I've sometimes remarked that a designer who uses Photoshop, but who doesn't know HTML and CSS, is like a photographer who refuses to actually touch the camera, and instead tells someone else how to aim, focus, and shoot. (And yes, I'm aware that TV and movies work this way; the analogy is far from perfect.) I want to work with someone who lives and breathes Web technologies, not who sees them as just another type of output. I'm glad that this blogger made this point, and has indicated that while Photoshop might once have been acceptable, it no longer is.

[crazygringo]

As someone who's done a huge amount of front-end development, I disagree completely, at least when we're talking about graphic design (as opposed to interface design, and even then it depends).

The job of a good designer is to come up with a "look" for a page that feels a certain way, that communicates certain ideas, with careful consideration of clarity and emphasis. Their skillset is emotion and communication. Knowing the technology beneath it helps them exactly zero in this, except in just a few instances of knowing what is and is not technically possible in the browser.

In fact, I have found it more difficult to work with designers who have learned some HTML/CSS, because it's a case of 'a little knowledge is a dangerous thing' -- writing HTML/CSS for a blog is a totally different thing from creating a clean, extensible front-end architecture for a large site, and you're constantly having to explain to them that, yes, you can do that on your blog, but it's not that simple to implement on our site, because this component is used in multiple ways in different places, and no you may NOT edit our source code directly, because changing the <h1> on that page will change it on the whole site, which is not what you're intending. Or it breaks the object-oriented CSS model we're using.

The only thing I ask from designers who provide PSD files, is that they remember to draw hover states as well, and explicitly indicate what happens to text that will inevitably outgrow the area they've given it -- should there be ellipses, should it expand downwards, should there be a character limit, or what. And to stick around afterwards so I can ask them about if inconsistencies in their design, like close-but-not-exact font sizes or spacings, are actually intended. Really, that's about it.

And the analogy of a designer who uses Photoshop but doesn't know HTML/CSS is like a photographer who doesn't use a camera is just plain silly. Photoshop is their "camera". The end result is just pixels in a browser anyways, it's not like they're giving us webpages on oil canvases. And guess what -- print designers don't know how to run printing-press machinery either. Because Photoshop/Illustrator/etc. are their "cameras" as well.

[sgustard]

There's lots of middle ground. Designers knowing what are web-safe fonts, or how big most users' screens are, are fundamentals that I've still seen lacking.

[muglug]

Agreed, but responsive sites benefit massively from having a choreographer-designer - one who is both able to set out a plan (in Photoshop/InDesign/xxx tool) and then describe how different page elements flow.

[cordie]

I agree. I think it's obviously ideal to find someone who can design in photoshop translate that with html css javascript and create the entire front end experience. But is it practical?

I'm not sure. I think the designer programmer relationship needs to change. The designer must understand the programmer is going to have to do some "interpretation" of the original design. It's not going to look exactly the same.

[Sssnake]

I've never seen a designer that knows anything about UX and doesn't know html and css. The look of a page is not graphic design, it is UI. The only thing that is purely graphic design is literally designing graphics, like a logo.

[wpietri]

Great point. Does anybody know the historical origin of the notion that there are "designers" who can be ignorant about their medium?

When I talk to, say, friends who paint, it's a very specific activity for them. They know a lot about actual paints, because they do the painting. Pre-web, I knew people who were print designers, or packaging designers, or logo designers. They too knew the details of their medium intimately.

The two theories I've been able to come with were that a) it's an artifact of the quick rise of the web, where the hunger for various design-related skills quickly pulled in a lot of people, or b) that there was a market niche for design agencies to sell a lot of "design", and so they created the pretense.

Either way, that would put the origin in the early multimedia/web era. But I'm wondering if it goes back further.

[wonderyak]

From my perspective a lot of it has to do with 'training' 'education' and employers. I've worked with several high end agencies and even if some of the designers know some HTML/CSS they have no idea how what they do in PS affects the next stage of the project.

Many employers have no idea about the technical debt of PSD->HTML. Its just the way they've been doing things for years. They hire a designer that can make things look pretty in PS and thats it, their job is done. Its up to the next chump to figure out how to make it work 'Thats what they get paid to do'.

Print designers had to know about processes and techniques because re-printing things is VERY EXPENSIVE. There is a hard cost involved that just doesn't exist on the web. If we make a typo or mistake in something, often we can correct that in a matter of seconds.

A lot of these print designers ended up being used for the web in agencies because they were senior designers, they knew about 'design' and had a lot of experience.

[enobrev]

I've helped convince a few designer friends and colleagues to get into HTML / CSS as they progressed into their careers.

It always seemed to most of them like a daunting leap from the creative application of graphic editors to the very manual text-based tools (and sub-par graphical tools) for rendering designs in a browser. Most would refer to HTML/CSS as "Programming". The majority of their experience and education had been with graphical tools, so the idea of tweaking layout and composition with text was completely foreign.

Most [art] schooling up until about a decade ago was largely based on print design, which means photoshop and illustrator. There may have been a couple classes here and there about building a website, but the vast majority of college level classes for graphic design were all about print and various other analog mediums.

This is actually what eventually led me to drop out of graphic design school in 1998 because it was so far behind the times in terms of web design, which is where I wanted to be.

So with the reluctance of the most talented designers in the industry to learn the medium, it was left to the developers to cover the gap - generally, quite poorly. I've been through plenty of back-and-forth annoyances with print designers - in the very distant past - while they would ask me to tweak pixels that I could hardly bring myself to care about when I had so many other priorities on the project.

For years I'd require any designers I'd worked with to hire "frontend developers" to handle the pixel tweaking and html/css generation, which would eventually start counting against them as the design industry started catching up with the medium.

[WalterSear]

Design as an profession is older than the web - it's older than programming. The industry as a whole is intimidated by modern technology, and appeals to non-technical people.

As a result, many of the people coming out of professional design schools, trained in the esthetics of flat, non-interactive design see themselves as 'above' all that 'computer stuff'. This, combined with intimidation, and a massive demand for good design, keeps them from expanding their skillset.

[rjvin]

> As a result, many of the people coming out of professional design schools, trained in the esthetics of flat, non-interactive design see themselves as 'above' all that 'computer stuff'.

I feel like this doesn't happen so much anymore. At least from recent graduates of top NYC design schools, you'd be hard pressed to find a communication designer / graphic designer who isn't worried about having to learn HTML/CSS because "print is dying".

[wpietri]

My hazy recollection was that at some point people doing flat, non-interactive design called themselves "print designers" or some variant. E.g., magazine designers, book designers. I'm wondering when they dropped the medium-specific notion of design. Are you saying that goes back before the 1950s?

[atacrawl]

The analogy I use is a web designer who doesn't know HTML and CSS is like a fashion designer who can't sew.

[user24]

One I saw a while ago was that a web designer who doesn't code is like a sculptor who doesn't know anatomy.

[FireBeyond]

That’s a great one. Better than what I used to say, which wasn’t even an analogy - that it’d be no different than a graphic designer supplying a hand-drawn/inked/painted sheet of paper, unscanned, for comping.

[nkuttler]

Love it, that's something everybody can understand. I might rephrase it as "doesn't know about sewing" though, as you don't need the practical skill itself but have to understand the limitations of different techniques.

[AJ007]

In house developer's time certainly should not be spent converting a PSD file in to a full HTML/CSS website. If the designer can't build an HTML/CSS site its likely that massive chunks of usability knowledge is missing as well.

The thing that hit me about abandoning PSD mockups (coming from a 15 year Photoshop user) is not responsive design but high DPI displays. A lot of big companies still have terrible upscaled raster images on their sites. It is bad enough for logos, even worse for the site's UI. Sticking to HTML5 & CSS (with a backwards compatible design for the few users still on XP of course) is easier to build and ends up looking a lot better.

[wonderyak]

This is one of the nice things about the occasional comp delivered in AI. Its so much easier to translate assets to the web that it confounds me why AI wasn't the standard from the beginning.

[Pxtl]

I haven't used it recently, but a few years ago? AI was terrible compared to PS. I mean, I like vector graphics and was willing to struggle with a lot of pain for the advantage of using vectors instead of rasters for a project... holy crap AI was awful. Crashy, cumbersome, cringeworthy.

I'm an amateur, so I'm not going to be an expert on the professional features, but a few days with AI led me to go right back to Inkskape.

I have no idea why they put their resources into that thing over Fireworks.

[kibibu]

Its even worse for not sharing any of its hotkeys with Photoshop.

[Pxtl]

I chuckle every time I see a hideous upscale raster in print.

[posabsolute]

Yadi yada is dead..

I also think web designer should have a basic understanding of css & html,

but too many time I saw average web dev saying no to a designer because, well they did not care or did not know how to do it. If you start limiting yourself you limit what the designer can create.

Another thing is now there are tools to make PSD to HTML much faster like CSSHAT that provide you with the exact CSS for each element of your design.

Also, designing in photoshop make design iterations much faster. By the time you design directly into html&css a design I could have iterated 2 times & have a much better end product.

I'm not saying Photoshop is the tool for web design, there is place to be taken there, but tools like photoshop & sketch makes design works go much faster.

[Theodores]

"...make design iterations much faster..." as if!

Say you want to swap over the search box with the account functions (sign in, cart, etc.) in a header on an ecommerce site. Chances are that you need only change a couple of lines of css to effect this layout change. Minutes later you can then run through the customer journey with the client and get a few people to test it. You learn quickly if this is better for usability and if it does not work you simply roll back the css to what you had before.

Compare with the PSD approach. You can spend a minor age fiddling with the umpteen layers, then you can hide/show layer groups for the homepage/category page/product page/basket page/checkout and so on, saving out some flat jpg thing along the way. Then present it to the client and ask them to imagine if it is better. If they go ahead then you hand it over to some developer that will then have to make what was signed off pixel perfect.

However, along the way you discover that the account functions are in a dynamic list, e.g. the basket shows how many items are in it, as does the wishlist, and, on some pages, e.g. checkout, there may not be all the links shown. So it changes around. Consequently the area/box that has been designed fills up or gets empty, impacting the design in ways not understood doing it with Photoshop mockups.

Note this is a simple example with no fancy responsiveness involved, just plain regular desktop view.

Put simply, Photoshop is a useless tool for any meaningful design. It results in very poor workflow. All clients have already had websites, they all know that PSD mockups don't look like that once they are implemented, and, if they do, there is a whole lot of stuff that is not accounted for. It is much better to be honest with a client and involve them in an iterative design process.

[eropple]

It makes bad design faster. That's the problem. You don't want "exact CSS for each element of your design", you want a coherently designed set of visual and functional elements that work throughout a site.

And don't even start on responsive CSS and PSD-baking software.

[sgustard]

A good analogy is an architect (of buildings) who doesn't know structural engineering. Yes, they don't have the degree, but basic knowledge of behavior of materials, how buildings don't fall down, and so on, are the difference between pretty drawings and actual buildable designs.

[chrissyb]

I'd have to somewhat disagree with this, Architecture is a philosophical pursuit and Engineering is physics. The two professions coexist but remain separate for accountability.

Maybe a better way of putting it might be ~ An Architect who can only conceptualize in 2D, therefore missing the opportunity to fully develop their designs in 3D.

And FWIW the only pretty drawings in my eyes are buildable designs! :)