I wanted to write such a letter long time ago and did not have the time until I actually had to write down some general guidelines for a project so I decided to copy here the email I sent to a real designer I had the chance to meet (removing any reference to real projects we worked on). Here it is, guidelines for a better programmer-designer relationship.
- Give the layers a name that is easy to understand. For example logo, search button, search field, box, tab, play button. Text layers are easy to find so there’s no need to name them too.
- Group layers in a logical way (CMD+G): for example a logo, top navigation and search area can all be grouped in a HEADER group. The footer is sometimes made of text, but in case something else is there (let’s say a background shape, lines, icons, etc) you should group them in a FOOTER group.
- group navigation: for example if you have a menu, a background to it and a sub-navigation you can group them in a MENU or NAVIGATION group. It really does not matter how you name them as long as you are consistent from one design to another so I can learn the way you think and find what I need really fast. In case you have a menu with sub-menu that is hidden please group it in a SUBMENU group and let me know how it behaves
- Do not rasterize or merge layers or shapes. I might need to pick from your design the shadow color and opacity (if you use such elements in the design), the gradient, border size, etc.
- In case you use textures make sure you send me by email the texture as a separate file so I don’t waste an hour or so trying to guess which part repeats itself and cut it from the PSD (you can find cool free textures here: http://subtlepatterns.com/ )
- let me know if you have used a grid system (like, for example, http://960.gs/)
- if possible, make sure you use icons with transparent backgrounds. Sometimes clients change their minds and want to use a different background or use the same icons in a different page and transparent icons will make that very easy to implement.
- use Photoshop guides if you need to show me the widths and heights of elements that you think that need to be perfect and tell me which boxes have a variable height and how will the text flow in case the client will put there a small novel (in case this is not easy to guess from the design or specs)
I might also need to know:
- width of the site and if it’s responsive. Let’s suppose we use 980-1200px centered responsive design. In this case let me know how the design behaves when width changes from 980 to 1200px – how do you see it changing when increasing the resolution? The same for mobile design.
- the font families you used and the backup font (in case you do not specify that, I will choose one myself). If you wish to use non standard web fonts you can choose some fonts from here: http://www.fontsquirrel.com/ or here: http://www.google.com/fonts/ Make sure we are allowed to use them in case they are non-standard. Also make sure the backup font is similar with the main one: for example a 12px Arial and a 12px Museo might take up a different space and the text might flow in a different way.
- make sure you understood the use of headings. There are only 6 used in web: H1 to H6 and they should be consistent (size, color, padding) on all pages of the website.
- provide me the images at their biggest resolution (not icons or textures, but images like photos that need to stretch back and forth depending on the resolution)
- let me know how the links behave on hover and clicked state: when I move the mouse over them do they change color, shape, background? What if I click them and it takes me to a new page, should the menu change in a certain way in order to increase usability?
- the same goes for buttons: are they rounded? How rounded? (5px? 10px?) How to they behave on hover? Do they change text or background color?
- let me know the font size of the text if it is different from the one in the design. Normally I can pick from the PSD their color, size and line-height. Also the spaces around each text (margin, padding) and spaces between letters (letter spacing).