8 ms·

Designers read this and developers will love you

65 points by sirwitti 15y ago

tzaman 15y ago
Thank you so much for this, I'll forward the link to a couple of developers I work with and I always have to explain how things should be done. The last design I got was in pdf! :S
_johnny 15y ago
I'm a frontend developer and I think some of these expectations make little sense. Giving a name to every layer is a lot of work and I don't care about it that much. I'll do my work with layers like "Layer 0 copy copy" as long as they're grouped. Having designer rename all the layers is a lot of work that would be better spent creatively. (Does your boss want to pay the designer for it?) Another example: "#34 Be familiar with browser compatibility" - this is just your, developer's job. I cannot imagine expecting a designer to know about IE6 limitations (and tons of hacks and techniques to overcome them). That said, I agree with many points, like naming files properly (which costs almost nothing) or careful use of blending modes (which are a lot of pain for the developer). Or careful use of gradients, especially over repeating patterns (#22).
- unn 15y ago
  "this is just your, developer's job" Shockingly, it's not. Most places I know of are moving away from a the designer and frontend developer positions. It's a big cost savings, not just in salary but in cycle time as well. Our designer sends us his designs in HTML. There is no bickering over fonts, no pixel perfection, no stupid photoshop-isms -filters, drop shadows, embossing, etc. I'm pretty sure he doesn't even have photoshop. If you're a web designer and you can't do this, it's time to learn. You're a theoretical web designer drawing pictures of websites.
  - _johnny 15y ago
    But then such designer is not a target for this "Manifesto". BTW, I see value in having one person create designs as HTML files, but I also know a lot of designers who create beautiful, graphics-rich designs and don't know much about code. I suppose it's much harder to find people who can do both as good as separate people.
    - gnaritas 15y ago
      Graphics rich designs that don't come with the markup, aren't beautiful. Any designer that can't code his own markup isn't a designer worth having, and certainly isn't a web designer. He's a print designer who doesn't know he's obsolete. If you can't build me a complete cross browser HTML template, a skin, for a website, you aren't a web designer. That means you must know HTML, CSS, browser idiosyncrocies, and possibly some very light JavaScript. Developers should never even see a PSD file or worry about what it looks like in IE. That's a designers job.
      - _johnny 15y ago
        > If you can't build me a complete cross browser HTML template, a skin, for a website, you aren't a web designer. If you've found such people - great. In places I've worked it was different. And designers did exceptionally beautiful things which I really appreciate. I'm proud that I've worked with them, even if they left some mess to be cleaned. There is some knowledge and experience needed in dealing with IE6, having CSS well organized, images optimized, adding even light JavaScript. If I was hiring (I do not), I'd totally prefer to have two people who can together build something great, than look for one person and receive worse results. And I'd prefer my people to do what they do best. The skillset required in designing rich graphics is different than coding.
        gnaritas 15y ago
        Hate to tell you bub, but none of that is coding. It's all simple markup, and a designer that can't do his own markup just isn't qualified, there are far too many available candidates that can to even bother talking to one who can't. If all someone knows is making pretty images in photoshop, they simply aren't web designers, they're print designers who dabble in the web, amateurs.
        _johnny 15y ago
        > they're print designers who dabble in the web, amateurs They're print designers but definitely not amateurs. In the end, what really matters is that the client receives very high quality work and it is cost effective for the company. I understand that not every company works this way, but I have worked for and know some that do exactly this. I don't really want to discuss it anymore, I feel we're repeating the same arguments over and over.
  - eswat 15y ago
    Most places I know of are moving away from a the designer and frontend developer positions. Is just in regards to bare HTML/CSS or JavaScript interaction as well? I’d think most companies would be hard-pressed to find a designer that could write in the full HTML/CSS/JS stack needed for webapps these days and be equally competent in interaction or visual design – as ironic as that sounds – in which case FEDs are still very important in the process.
    - kamjam 15y ago
      You'd think that, but I've met some very good designers that can work that full stack. The world is changing and people need to upskill or get left behind. HTML/CSS is not that difficult. Even jQuery is pretty simple. Good jQuery is hard. Good Javascript harder still.
      - rralian 15y ago
        I also think developers are getting much savvier about design, and the tools helping developers with design are getting better and better. So the person who winds up doing all the design/html/css/js may not be the person who started out as the designer. So designers, by all means, harvest that fear and push yourself to learn some new skills.
  - jaems33 15y ago
    Really? Most agencies I know in NYC/London/SF have a clear separation of roles.
  - rralian 15y ago
    "If you're a web designer and you can't do this, it's time to learn. You're a theoretical web designer drawing pictures of websites." I couldn't agree more. At this point, if you're still designing the same way you would for print (and honestly, most designers I've worked with still do), you are going to be replaced.
  - zavulon 15y ago
    I couldn't disagree more. Good HTML/CSS/JS code is not easy. It's hard work to make it look right for all browsers.. and these days you use actual programming languages (i.e. less/Sass) instead of CSS, anyway. It's hard work involving programming expertise to implement all JavaScript bells and whistles a modern website is expected to have. So it requires a good front end PROGRAMMER to do. On other hand, a good designer is a creative person. They're not coders and shouldn't be expected to muck around with code. They're artists, who draw beautiful designs from blank page. The need for separation of roles couldn't be clearer to me, and I run a company that makes websites.
    - _johnny 15y ago
      Totally agree with you, it was the same in places I've worked.
    - talmand 15y ago
      Right off I wanted to disagree about the preprocessor use for CSS. I just can't see that something like those has taken off so much that it's on the same level as something like jQuery. But then it made me curious, I can't say that since I have no numbers and it's just an assumption. Are there any indicators of how popular tools like less or sass have become as opposed to regular CSS?
- kitsune_ 15y ago
  No, the designer has to know the medium he or she designs for. If you don't understand the medium, you basically create pretty pictures. That's about it. It's no different from designing newspapers, brochures, fashion.
  - deleted 15y ago
    [deleted]
- johncoltrane 15y ago
  Designer turned coder, here. Going back and renaming every layer isn't supposed to happen. Instead, the designer should name them when he creates them, preferably with a consistent naming scheme that makes sense with regard to the final medium. I did it for years (and still do it) and it works very well and isn't a waste of time, at all. > this is just your, developer's job Part of my daily job ,halas, consists in coding HTML emails. No matter how many times we repeat (face to face, in meetings, in internal documents…) to the designers that image backgrounds are a NO-NO behind HTML text or that emails destined to be turned into .OFTs should be as simple as possible or that there must be more HTML text than images… we always receive comps with textured backgrounds or shadowed HTML text, unnamed layers, impossible font sizes (12,72px) or whatever. When I receive such comps, I usually only have a couple of hours to do the job, or less, and I spend a large part of it arguing with the AM about impossible graphic details, undoing many silly effects and trying to find my way though a jungle of Layer 256, Copy of Layer 456… Just like the print designer MUST know how printing works, the web designer MUST know as much as possible about HTML and CSS.
- bmj 15y ago
  Another example: "#34 Be familiar with browser compatibility" - this is just your, developer's job. I cannot imagine expecting a designer to know about IE6 limitations (and tons of hacks and techniques to overcome them). This might be overstated. How about "know your medium?" If you, as a print designer, were tasked to design a bag for dog food, would you Photoshop your ideas, then tell the production guy it's his job to make it work? Probably not. As a designer, you probably don't need to know every limitation of every browser, but at a minimum, you might want to work with the programmer and understand what browsers need to be supported, and whether certain designs would require three days of CSS hacks to work in a single browser.
  - _johnny 15y ago
    OK, you (and other commenters) are right. It was an overstatement. I agree with your last paragraph.
- kamjam 15y ago
  I'll do my work with layers like "Layer 0 copy copy" as long as they're grouped. That's shocking. That's like me as a developer naming my variables var1, var2, var3 etc. I'll get shot if I did that and would rightly do the same to anyone else that did that. I do some Photoshop work, mainly for personal purposes and naming those layers makes it easier for me when I need to revisit those files. Stop thinking here and now and start thinking about your follow colleague that needs to take your pile of junk on.
  - _johnny 15y ago
    It's different than code. First of all, if the designer gets the job done without renaming layers, then it's his business. (In my experience, a lot of them don't need to name layers). Unless he hands over the design to someone else. I'm not sure how often it happens. Code is very often handed to different people. I doubt graphics need the same level of maintainability. But anyway, that's a thing between designers, and we're talking about designer vs. developers. The other difference is that in Photoshop you can easily find layer by using Move tool and CMD+clicking on the picture. And you can find text layers with Text tool.
    - gnaritas 15y ago
      You don't rename anything, you name them correctly when you first create them. He's right, your behavior is shocking, and worse, you're trying to defend such bad practices.
      - _johnny 15y ago
        Sorry to be shocking :) I defend them because they're paid to do beautiful work and lack of layer names was never really an issue for me. Maybe just a couple of times. If the mess they left would be too big for me, then I'd complain. As long as I can deal with it, it's their decision whether they name layers or not. I definitely don't need every layer to have a name.
    - kamjam 15y ago
      You say this now, but unless you have crystal ball you can't look into the future. I've worked in many places where something is designed, shelved, resurrected several months later, design tweeked, shelved, budget approved, resurrected... Anyway, we're not talking about a thing between designers alone, we're talking about the fact that a lot of designs are passed on to developers to then code in html. You yourself highlight the fact that designers may not be familiar with browser incompatibility. We they can't factor these into the design then IMO it's pointless having them create the html. That said, I agree with many points, like naming files properly (which costs almost nothing) So naming files costs almost nothing nothing, but naming a layer correctly in the first place is a pain in the arse/takes up too much time... not much consistency to your logic here. As I recall, hitting F2 will take you into rename mode. As gnaritas says, name it properly in the first place then there is no need to rename!
derda 15y ago
FYI its impossible to read on an iPhone, since the sidebar blocks the view. I tried to click the buttons on top, since they like close/hide buttons, but no reaction.
deleted 15y ago
[deleted]
twfarland 15y ago
A quick win: Instead of Photoshop, which is overkill for web graphics, use Fireworks or Pixelmator.
- jeffclark 15y ago
  A major high five for Fireworks. It's like the "object"-ness of InDesign and the "graphic manipulation"-ness of Photoshop had a beautiful baby. Fireworks' master page is a great way to keep the skeleton of your site consistent across mocks. I'm a huge fan of using Fireworks for mockups. A heartily second (and third, and fourth) of this recommendation.
- henrijs 15y ago
  Absolutely agree. Initiative should be software agnostic. Currently it looks like "Use separate css file instead of inline styles to control you table layout and developers will love you". Also, who gives developers PSD files anyway?
bricestacey 15y ago
Can anyone expand on layer comps? Is this something that our designer can use to show different states? E.g. A list with items / a list without items (rather than 2 layer groups)
- kapowaz 15y ago
  In a nutshell a layer comp is a saved state for your layers. It can include any/all of: visibility, position and layer style. A combination of these should let you create alternative views for practically any sets of states provided the original layers give you what you need. For example, a navigation interface, complete with hover and selected states can be all done with the same text and icons (say) if you have a vector shape layer for icons, and then apply separate appearances for each interaction state. The example you give can be done as simply as toggling the visibility of a layer you don't want to see, and moving other elements up to fill the void appropriately, then saving this as a separate comp.
  - tedmiston 15y ago
    That's a good description. Layer comps are one of the most underutilized PS features IMO. I've used them myself to design alternative navigation styles for a site. For example, since the bulk of the site is the same, I managed a sample horizontal navigation in one layer group and a vertical navigation in a separate layer group. Layer comps allow you to progress on these simultaneously. I've also used them as "snapshot" states before if I'm trying something experimental. It's a faster way to rollback than a chain of undos, etc.
atirip 15y ago
There's only one advice from me - ditch Photoshop and use InDesign. Do not ever bring PSD to me. Ever.
- jeffclark 15y ago
  When I'm doing print design, I love me some InDesign. But I don't understand your comment. How do you (you-you, not the proverbial "you") turn an INDD into good assets for the web?
justjimmy 15y ago
I know this isn't the gospel and there is no right/wrong way to hand the files to the developers, but I was wondering if anyone else slice up all the images and organize them before handing it off to their developers? Especially when drop shadows for images/png are involved, I tend to slice it all myself for pixel perfection and organize into appropriately file names for the developers.
- jurre 15y ago
  I don't think a lot of people are still slicing up photoshop mockups? At least I hope not as the need for it should be fairly limited with CSS3.
  - justjimmy 15y ago
    Sorry, I'm not very proficient with CSS3 yet – you can create drop shadows along the free form outline of png images?
    - jurre 15y ago
      Well you can't create PNG images with free form outline I'm afraid (if I'm understanding you correctly, you're talking about ignoring the transparant parts of a png right?) so that won't be possible, the drop shadow would just wrap around the actual outlines. Although it is possible to apply a border radius to your png and add a drop shadow to those, so rounded corners or circle pictures should work. But yes, if you have actual free form outlines you would want to shade you'll have to resort to adding them to the PNG, but for most elements we can use CSS.
  - tomjen3 15y ago
    In practice much of those go away with -- we need to support ie7 (or even ie8). Sadly.
    - jurre 15y ago
      css3pie[0] fixes most of that! [0]http://css3pie.com/ http://css3pie.com/
jaysonelliot 15y ago
I love this manifesto. BUT. This reminds me of a problem I've pondered for a long time now, without coming up with an answer. Why are web pages designed with Photoshop in the first place? Photoshop was never meant to be used for web design, any more than Visio was meant to make wireframes. It's simply the best tool available for the job, and requires a lot of workarounds and good behavior on the part of the designer. Spending days or even weeks designing Photoshop comps that then have to be cut up, converted, and manually translated into suitable graphics for coders to work with is inefficient, and often leads to final products that don't match the designer's work. Text is the most obvious example, but I'm sure anyone can think of myriad places where this happens. Is there a tool that lets designers think about the structure coders will have to build WHILE they're designing the screens? I'm not talking about a WYSIWYG code generator—those have been tried over and over again, and they all suck. I'm talking about a tool that lets designers design, lets coders code, but helps the designer think about what the coder will have to do with the graphics, including keeping text as text, identifying UI elements that need to be reused, seeing how layouts will look when the browser resizes, etc. If this tool doesn't exist, it sure would be a great project for someone to build.
- chrislomax 15y ago
  Now I am going to get killed for saying this but it's almost like you are referring to Microsoft Expression Web or something to that effect. When we were doing work in Silverlight (god rest its soul), there was the facility to have designers working on the design and developers working on the code. Now, what you are referring to may be the actual Expression Web product they offer. I don't know, but it sounds very familiar to the Silverlight version. No, I am not suggesting everyone moves to PC to use this software, I am just bringing to light the possibility the software may already exist! We personally have no issue mocking up our sites in Photoshop then them being sent over to the developers to be sliced and used. We have never really felt this process to be in-efficient either. I think so long as the designer has a clear understanding about what the developers need then it's fine. When you have print designers getting used to web development for the first time, that's when you have problems.
- kapowaz 15y ago
  I would love for this hypothetical tool to exist, but the problem doesn't lie with the tool, but that you're talking about essentially different workflows. Designers tend to use the tools that they're most familiar with, that give them what they need. Usually that means Illustrator + Photoshop (or sometimes, Fireworks). I've given thought in the past to a hypothetical tool that I'd love to see that does a lot of what Photoshop does. It would use a nested plaintext file structure, letting it work with a version control tool (imagine being able to diff two PSDs and know that all that changed was a label value, or a single layer being removed, rather than it being a completely opaque binary change?). It would effectively provide direct access to the advanced features of CSS, only with a nicer UI. It could be built to allow testing responsive layouts all within a single document. All this and more. It'd be great. But designers wouldn't want to use it. It wouldn't be grounded in their essentially visual workflow. Sure, you could have intermediaries translate documents between the visual and the quasi-layout-based, but that's even more work than just having designers adopt better practices. What's more, these practices don't just benefit developers: it'll make life easier for designers too! That's what makes it such a no-brainer. Sure, some lazy or precious designers might object to being told how to do their job (nobody appreciates being told they're doing things wrong), but if you introduce these practices gently I'm sure they'll pay off.
deleted 15y ago
[deleted]
icebraining 15y ago
In the USE LICENSED ICONS/PHOTOS, try this first: http://flickr.com/search/?l=4&q=hamster http://flickr.com/search/?l=4&q=hamster support the Creative Commons!
- untog 15y ago
  "content requiring attribution" That can be a real pain, design-wise and image-wise (I don't want to look cheap). Creative Commons is great, but requiring attribution means that it won't be used in a lot of projects.
  - icebraining 15y ago
    Attribution doesn't necessarily mean it has to be in the users' face, just ask her/him if a line in the footer or in a credits page or even just in the source is OK.
deepkut 15y ago
I absolutely love your sidebar. Permission to mooch? :)
evincarofautumn 15y ago
These are basically the same things that make good code. • Organising files = project structure • Resource & layer naming = variable naming • Using templates & sharing common elements = DRY • Keeping vectors when rasterising = keeping source code when compiling • Minimising filters, blending modes, colour overlays, etc. = KISS • Grid = idioms and “design patterns” • Understanding licensing = understanding licensing • Proofreading = code review • Browser compatibility = platform compatibility • Conservation of file sizes = consideration of performance
nmcfarl 15y ago
I like the content - but not the tone - it’s just a bit too snarky to send to a designer that you have to work with. Particularly if she’s getting much of it right - and you’ve clashed over this stuff before.
- toddmorey 15y ago
  Totally agree! I was hoping to have something to send to a few of the designers I work with, but the tone is totally insulting. (ie "Nice try!")
- tedmiston 15y ago
  I started to bookmark it because of the idea, but once I started reading the descriptions, I cannot agree more. I would be offended if someone sent this to me.
feverishaaron 15y ago
All that work to create a responsive layout, then they put an omnipresent, fixed position social bar that covers the text when viewed on a phone.
- pixelcort 15y ago
  These also often break Page Down on desktop browsers as well. After paging, I always have to scroll up a little bit to see the line of text where I left off.
mgcross 15y ago
Wonderful list, the only thing I'd add is to convert a PSD to sRGB before handing off if using a different color space. Regarding export: the Monitor Color vs. Document Profile popup: http://photoshopetiquette.com/#exporting http://photoshopetiquette.com/#exporting unless I'm mistaken, this only pertains to the preview of the optimized image within Photoshop. And if you must embed a color profile on export, save it for photos only.
tedmiston 15y ago
Here are comparable thoughts in a more approachable, useful, and digestible manner -- http://methodandcraft.com/articles/streamlining-the-handoff http://methodandcraft.com/articles/streamlining-the-handoff.

65 points by sirwitti 15y ago

Thank you so much for this, I'll forward the link to a couple of developers I work with and I always have to explain how things should be done. The last design I got was in pdf! :S

_johnny 15y ago

I'm a frontend developer and I think some of these expectations make little sense. Giving a name to every layer is a lot of work and I don't care about it that much. I'll do my work with layers like "Layer 0 copy copy" as long as they're grouped. Having designer rename all the layers is a lot of work that would be better spent creatively. (Does your boss want to pay the designer for it?) Another example: "#34 Be familiar with browser compatibility" - this is just your, developer's job. I cannot imagine expecting a designer to know about IE6 limitations (and tons of hacks and techniques to overcome them). That said, I agree with many points, like naming files properly (which costs almost nothing) or careful use of blending modes (which are a lot of pain for the developer). Or careful use of gradients, especially over repeating patterns (#22).

unn 15y ago
"this is just your, developer's job" Shockingly, it's not. Most places I know of are moving away from a the designer and frontend developer positions. It's a big cost savings, not just in salary but in cycle time as well. Our designer sends us his designs in HTML. There is no bickering over fonts, no pixel perfection, no stupid photoshop-isms -filters, drop shadows, embossing, etc. I'm pretty sure he doesn't even have photoshop. If you're a web designer and you can't do this, it's time to learn. You're a theoretical web designer drawing pictures of websites.
- _johnny 15y ago
  But then such designer is not a target for this "Manifesto". BTW, I see value in having one person create designs as HTML files, but I also know a lot of designers who create beautiful, graphics-rich designs and don't know much about code. I suppose it's much harder to find people who can do both as good as separate people.
  - gnaritas 15y ago
    Graphics rich designs that don't come with the markup, aren't beautiful. Any designer that can't code his own markup isn't a designer worth having, and certainly isn't a web designer. He's a print designer who doesn't know he's obsolete. If you can't build me a complete cross browser HTML template, a skin, for a website, you aren't a web designer. That means you must know HTML, CSS, browser idiosyncrocies, and possibly some very light JavaScript. Developers should never even see a PSD file or worry about what it looks like in IE. That's a designers job.
    - _johnny 15y ago
      > If you can't build me a complete cross browser HTML template, a skin, for a website, you aren't a web designer. If you've found such people - great. In places I've worked it was different. And designers did exceptionally beautiful things which I really appreciate. I'm proud that I've worked with them, even if they left some mess to be cleaned. There is some knowledge and experience needed in dealing with IE6, having CSS well organized, images optimized, adding even light JavaScript. If I was hiring (I do not), I'd totally prefer to have two people who can together build something great, than look for one person and receive worse results. And I'd prefer my people to do what they do best. The skillset required in designing rich graphics is different than coding.
      - gnaritas 15y ago
        Hate to tell you bub, but none of that is coding. It's all simple markup, and a designer that can't do his own markup just isn't qualified, there are far too many available candidates that can to even bother talking to one who can't. If all someone knows is making pretty images in photoshop, they simply aren't web designers, they're print designers who dabble in the web, amateurs.
        _johnny 15y ago
        > they're print designers who dabble in the web, amateurs They're print designers but definitely not amateurs. In the end, what really matters is that the client receives very high quality work and it is cost effective for the company. I understand that not every company works this way, but I have worked for and know some that do exactly this. I don't really want to discuss it anymore, I feel we're repeating the same arguments over and over.
- eswat 15y ago
  Most places I know of are moving away from a the designer and frontend developer positions. Is just in regards to bare HTML/CSS or JavaScript interaction as well? I’d think most companies would be hard-pressed to find a designer that could write in the full HTML/CSS/JS stack needed for webapps these days and be equally competent in interaction or visual design – as ironic as that sounds – in which case FEDs are still very important in the process.
  - kamjam 15y ago
    You'd think that, but I've met some very good designers that can work that full stack. The world is changing and people need to upskill or get left behind. HTML/CSS is not that difficult. Even jQuery is pretty simple. Good jQuery is hard. Good Javascript harder still.
    - rralian 15y ago
      I also think developers are getting much savvier about design, and the tools helping developers with design are getting better and better. So the person who winds up doing all the design/html/css/js may not be the person who started out as the designer. So designers, by all means, harvest that fear and push yourself to learn some new skills.
- jaems33 15y ago
  Really? Most agencies I know in NYC/London/SF have a clear separation of roles.
- rralian 15y ago
  "If you're a web designer and you can't do this, it's time to learn. You're a theoretical web designer drawing pictures of websites." I couldn't agree more. At this point, if you're still designing the same way you would for print (and honestly, most designers I've worked with still do), you are going to be replaced.
- zavulon 15y ago
  I couldn't disagree more. Good HTML/CSS/JS code is not easy. It's hard work to make it look right for all browsers.. and these days you use actual programming languages (i.e. less/Sass) instead of CSS, anyway. It's hard work involving programming expertise to implement all JavaScript bells and whistles a modern website is expected to have. So it requires a good front end PROGRAMMER to do. On other hand, a good designer is a creative person. They're not coders and shouldn't be expected to muck around with code. They're artists, who draw beautiful designs from blank page. The need for separation of roles couldn't be clearer to me, and I run a company that makes websites.
  - _johnny 15y ago
    Totally agree with you, it was the same in places I've worked.
  - talmand 15y ago
    Right off I wanted to disagree about the preprocessor use for CSS. I just can't see that something like those has taken off so much that it's on the same level as something like jQuery. But then it made me curious, I can't say that since I have no numbers and it's just an assumption. Are there any indicators of how popular tools like less or sass have become as opposed to regular CSS?
kitsune_ 15y ago
No, the designer has to know the medium he or she designs for. If you don't understand the medium, you basically create pretty pictures. That's about it. It's no different from designing newspapers, brochures, fashion.
- deleted 15y ago
  [deleted]
johncoltrane 15y ago
Designer turned coder, here. Going back and renaming every layer isn't supposed to happen. Instead, the designer should name them when he creates them, preferably with a consistent naming scheme that makes sense with regard to the final medium. I did it for years (and still do it) and it works very well and isn't a waste of time, at all. > this is just your, developer's job Part of my daily job ,halas, consists in coding HTML emails. No matter how many times we repeat (face to face, in meetings, in internal documents…) to the designers that image backgrounds are a NO-NO behind HTML text or that emails destined to be turned into .OFTs should be as simple as possible or that there must be more HTML text than images… we always receive comps with textured backgrounds or shadowed HTML text, unnamed layers, impossible font sizes (12,72px) or whatever. When I receive such comps, I usually only have a couple of hours to do the job, or less, and I spend a large part of it arguing with the AM about impossible graphic details, undoing many silly effects and trying to find my way though a jungle of Layer 256, Copy of Layer 456… Just like the print designer MUST know how printing works, the web designer MUST know as much as possible about HTML and CSS.
bmj 15y ago
Another example: "#34 Be familiar with browser compatibility" - this is just your, developer's job. I cannot imagine expecting a designer to know about IE6 limitations (and tons of hacks and techniques to overcome them). This might be overstated. How about "know your medium?" If you, as a print designer, were tasked to design a bag for dog food, would you Photoshop your ideas, then tell the production guy it's his job to make it work? Probably not. As a designer, you probably don't need to know every limitation of every browser, but at a minimum, you might want to work with the programmer and understand what browsers need to be supported, and whether certain designs would require three days of CSS hacks to work in a single browser.
- _johnny 15y ago
  OK, you (and other commenters) are right. It was an overstatement. I agree with your last paragraph.
kamjam 15y ago
I'll do my work with layers like "Layer 0 copy copy" as long as they're grouped. That's shocking. That's like me as a developer naming my variables var1, var2, var3 etc. I'll get shot if I did that and would rightly do the same to anyone else that did that. I do some Photoshop work, mainly for personal purposes and naming those layers makes it easier for me when I need to revisit those files. Stop thinking here and now and start thinking about your follow colleague that needs to take your pile of junk on.
- _johnny 15y ago
  It's different than code. First of all, if the designer gets the job done without renaming layers, then it's his business. (In my experience, a lot of them don't need to name layers). Unless he hands over the design to someone else. I'm not sure how often it happens. Code is very often handed to different people. I doubt graphics need the same level of maintainability. But anyway, that's a thing between designers, and we're talking about designer vs. developers. The other difference is that in Photoshop you can easily find layer by using Move tool and CMD+clicking on the picture. And you can find text layers with Text tool.
  - gnaritas 15y ago
    You don't rename anything, you name them correctly when you first create them. He's right, your behavior is shocking, and worse, you're trying to defend such bad practices.
    - _johnny 15y ago
      Sorry to be shocking :) I defend them because they're paid to do beautiful work and lack of layer names was never really an issue for me. Maybe just a couple of times. If the mess they left would be too big for me, then I'd complain. As long as I can deal with it, it's their decision whether they name layers or not. I definitely don't need every layer to have a name.
  - kamjam 15y ago
    You say this now, but unless you have crystal ball you can't look into the future. I've worked in many places where something is designed, shelved, resurrected several months later, design tweeked, shelved, budget approved, resurrected... Anyway, we're not talking about a thing between designers alone, we're talking about the fact that a lot of designs are passed on to developers to then code in html. You yourself highlight the fact that designers may not be familiar with browser incompatibility. We they can't factor these into the design then IMO it's pointless having them create the html. That said, I agree with many points, like naming files properly (which costs almost nothing) So naming files costs almost nothing nothing, but naming a layer correctly in the first place is a pain in the arse/takes up too much time... not much consistency to your logic here. As I recall, hitting F2 will take you into rename mode. As gnaritas says, name it properly in the first place then there is no need to rename!

derda 15y ago

FYI its impossible to read on an iPhone, since the sidebar blocks the view. I tried to click the buttons on top, since they like close/hide buttons, but no reaction.

deleted 15y ago

[deleted]

twfarland 15y ago

A quick win: Instead of Photoshop, which is overkill for web graphics, use Fireworks or Pixelmator.

jeffclark 15y ago
A major high five for Fireworks. It's like the "object"-ness of InDesign and the "graphic manipulation"-ness of Photoshop had a beautiful baby. Fireworks' master page is a great way to keep the skeleton of your site consistent across mocks. I'm a huge fan of using Fireworks for mockups. A heartily second (and third, and fourth) of this recommendation.
henrijs 15y ago
Absolutely agree. Initiative should be software agnostic. Currently it looks like "Use separate css file instead of inline styles to control you table layout and developers will love you". Also, who gives developers PSD files anyway?

bricestacey 15y ago

Can anyone expand on layer comps? Is this something that our designer can use to show different states? E.g. A list with items / a list without items (rather than 2 layer groups)

kapowaz 15y ago
In a nutshell a layer comp is a saved state for your layers. It can include any/all of: visibility, position and layer style. A combination of these should let you create alternative views for practically any sets of states provided the original layers give you what you need. For example, a navigation interface, complete with hover and selected states can be all done with the same text and icons (say) if you have a vector shape layer for icons, and then apply separate appearances for each interaction state. The example you give can be done as simply as toggling the visibility of a layer you don't want to see, and moving other elements up to fill the void appropriately, then saving this as a separate comp.
- tedmiston 15y ago
  That's a good description. Layer comps are one of the most underutilized PS features IMO. I've used them myself to design alternative navigation styles for a site. For example, since the bulk of the site is the same, I managed a sample horizontal navigation in one layer group and a vertical navigation in a separate layer group. Layer comps allow you to progress on these simultaneously. I've also used them as "snapshot" states before if I'm trying something experimental. It's a faster way to rollback than a chain of undos, etc.

atirip 15y ago

There's only one advice from me - ditch Photoshop and use InDesign. Do not ever bring PSD to me. Ever.

jeffclark 15y ago
When I'm doing print design, I love me some InDesign. But I don't understand your comment. How do you (you-you, not the proverbial "you") turn an INDD into good assets for the web?

justjimmy 15y ago

I know this isn't the gospel and there is no right/wrong way to hand the files to the developers, but I was wondering if anyone else slice up all the images and organize them before handing it off to their developers? Especially when drop shadows for images/png are involved, I tend to slice it all myself for pixel perfection and organize into appropriately file names for the developers.

jurre 15y ago
I don't think a lot of people are still slicing up photoshop mockups? At least I hope not as the need for it should be fairly limited with CSS3.
- justjimmy 15y ago
  Sorry, I'm not very proficient with CSS3 yet – you can create drop shadows along the free form outline of png images?
  - jurre 15y ago
    Well you can't create PNG images with free form outline I'm afraid (if I'm understanding you correctly, you're talking about ignoring the transparant parts of a png right?) so that won't be possible, the drop shadow would just wrap around the actual outlines. Although it is possible to apply a border radius to your png and add a drop shadow to those, so rounded corners or circle pictures should work. But yes, if you have actual free form outlines you would want to shade you'll have to resort to adding them to the PNG, but for most elements we can use CSS.
- tomjen3 15y ago
  In practice much of those go away with -- we need to support ie7 (or even ie8). Sadly.
  - jurre 15y ago
    css3pie[0] fixes most of that! [0]http://css3pie.com/ http://css3pie.com/

jaysonelliot 15y ago

I love this manifesto. BUT. This reminds me of a problem I've pondered for a long time now, without coming up with an answer. Why are web pages designed with Photoshop in the first place? Photoshop was never meant to be used for web design, any more than Visio was meant to make wireframes. It's simply the best tool available for the job, and requires a lot of workarounds and good behavior on the part of the designer. Spending days or even weeks designing Photoshop comps that then have to be cut up, converted, and manually translated into suitable graphics for coders to work with is inefficient, and often leads to final products that don't match the designer's work. Text is the most obvious example, but I'm sure anyone can think of myriad places where this happens. Is there a tool that lets designers think about the structure coders will have to build WHILE they're designing the screens? I'm not talking about a WYSIWYG code generator—those have been tried over and over again, and they all suck. I'm talking about a tool that lets designers design, lets coders code, but helps the designer think about what the coder will have to do with the graphics, including keeping text as text, identifying UI elements that need to be reused, seeing how layouts will look when the browser resizes, etc. If this tool doesn't exist, it sure would be a great project for someone to build.

chrislomax 15y ago
Now I am going to get killed for saying this but it's almost like you are referring to Microsoft Expression Web or something to that effect. When we were doing work in Silverlight (god rest its soul), there was the facility to have designers working on the design and developers working on the code. Now, what you are referring to may be the actual Expression Web product they offer. I don't know, but it sounds very familiar to the Silverlight version. No, I am not suggesting everyone moves to PC to use this software, I am just bringing to light the possibility the software may already exist! We personally have no issue mocking up our sites in Photoshop then them being sent over to the developers to be sliced and used. We have never really felt this process to be in-efficient either. I think so long as the designer has a clear understanding about what the developers need then it's fine. When you have print designers getting used to web development for the first time, that's when you have problems.
kapowaz 15y ago
I would love for this hypothetical tool to exist, but the problem doesn't lie with the tool, but that you're talking about essentially different workflows. Designers tend to use the tools that they're most familiar with, that give them what they need. Usually that means Illustrator + Photoshop (or sometimes, Fireworks). I've given thought in the past to a hypothetical tool that I'd love to see that does a lot of what Photoshop does. It would use a nested plaintext file structure, letting it work with a version control tool (imagine being able to diff two PSDs and know that all that changed was a label value, or a single layer being removed, rather than it being a completely opaque binary change?). It would effectively provide direct access to the advanced features of CSS, only with a nicer UI. It could be built to allow testing responsive layouts all within a single document. All this and more. It'd be great. But designers wouldn't want to use it. It wouldn't be grounded in their essentially visual workflow. Sure, you could have intermediaries translate documents between the visual and the quasi-layout-based, but that's even more work than just having designers adopt better practices. What's more, these practices don't just benefit developers: it'll make life easier for designers too! That's what makes it such a no-brainer. Sure, some lazy or precious designers might object to being told how to do their job (nobody appreciates being told they're doing things wrong), but if you introduce these practices gently I'm sure they'll pay off.

deleted 15y ago

[deleted]

icebraining 15y ago

In the USE LICENSED ICONS/PHOTOS, try this first: http://flickr.com/search/?l=4&q=hamster http://flickr.com/search/?l=4&q=hamster support the Creative Commons!

untog 15y ago
"content requiring attribution" That can be a real pain, design-wise and image-wise (I don't want to look cheap). Creative Commons is great, but requiring attribution means that it won't be used in a lot of projects.
- icebraining 15y ago
  Attribution doesn't necessarily mean it has to be in the users' face, just ask her/him if a line in the footer or in a credits page or even just in the source is OK.

deepkut 15y ago

I absolutely love your sidebar. Permission to mooch? :)

evincarofautumn 15y ago

These are basically the same things that make good code. • Organising files = project structure • Resource & layer naming = variable naming • Using templates & sharing common elements = DRY • Keeping vectors when rasterising = keeping source code when compiling • Minimising filters, blending modes, colour overlays, etc. = KISS • Grid = idioms and “design patterns” • Understanding licensing = understanding licensing • Proofreading = code review • Browser compatibility = platform compatibility • Conservation of file sizes = consideration of performance

nmcfarl 15y ago

I like the content - but not the tone - it’s just a bit too snarky to send to a designer that you have to work with. Particularly if she’s getting much of it right - and you’ve clashed over this stuff before.

toddmorey 15y ago
Totally agree! I was hoping to have something to send to a few of the designers I work with, but the tone is totally insulting. (ie "Nice try!")
tedmiston 15y ago
I started to bookmark it because of the idea, but once I started reading the descriptions, I cannot agree more. I would be offended if someone sent this to me.

feverishaaron 15y ago

All that work to create a responsive layout, then they put an omnipresent, fixed position social bar that covers the text when viewed on a phone.

pixelcort 15y ago
These also often break Page Down on desktop browsers as well. After paging, I always have to scroll up a little bit to see the line of text where I left off.

mgcross 15y ago

Wonderful list, the only thing I'd add is to convert a PSD to sRGB before handing off if using a different color space. Regarding export: the Monitor Color vs. Document Profile popup: http://photoshopetiquette.com/#exporting http://photoshopetiquette.com/#exporting unless I'm mistaken, this only pertains to the preview of the optimized image within Photoshop. And if you must embed a color profile on export, save it for photos only.

tedmiston 15y ago

Here are comparable thoughts in a more approachable, useful, and digestible manner -- http://methodandcraft.com/articles/streamlining-the-handoff http://methodandcraft.com/articles/streamlining-the-handoff.