9 ms·

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

by reuven 13y ago

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.

atacrawl 13y ago
The analogy I use is a web designer who doesn't know HTML and CSS is like a fashion designer who can't sew.
- FireBeyond 13y ago
  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.
- mlvljr 13y ago
  does not know anything about needles and threads at all, yes :)
- user24 13y ago
  One I saw a while ago was that a web designer who doesn't code is like a sculptor who doesn't know anatomy.
- nkuttler 13y ago
  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.
posabsolute 13y ago
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.
- eropple 13y ago
  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.
- Theodores 13y ago
  "...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.
AJ007 13y ago
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.
- Pxtl 13y ago
  I chuckle every time I see a hideous upscale raster in print.
- wonderyak 13y ago
  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 13y ago
    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 13y ago
      Its even worse for not sharing any of its hotkeys with Photoshop.
deleted 13y ago
[deleted]
wpietri 13y ago
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 13y ago
  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.
- WalterSear 13y ago
  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.
crazygringo 13y ago
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.
- muglug 13y ago
  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.
- sgustard 13y ago
sgustard 13y ago
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 13y ago
  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! :)

by reuven 13y ago

atacrawl 13y ago

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

FireBeyond 13y ago
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.
mlvljr 13y ago
does not know anything about needles and threads at all, yes :)
user24 13y ago
One I saw a while ago was that a web designer who doesn't code is like a sculptor who doesn't know anatomy.
nkuttler 13y ago
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.

posabsolute 13y ago

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.

eropple 13y ago
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.
Theodores 13y ago
"...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.

AJ007 13y ago

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.

Pxtl 13y ago
I chuckle every time I see a hideous upscale raster in print.
wonderyak 13y ago
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 13y ago
  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 13y ago
    Its even worse for not sharing any of its hotkeys with Photoshop.

deleted 13y ago

[deleted]

wpietri 13y ago

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 13y ago
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.
WalterSear 13y ago
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.

crazygringo 13y ago

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.

muglug 13y ago
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.
sgustard 13y ago

sgustard 13y ago

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 13y ago
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! :)