A message to a PSD Graphic Designer

A lot of "Graphic" designers are diving into web design nowadays. They come from other design areas into web and it might be somehow difficult to manage the new medium. The screen of a laptop, the 7 inch tablet, px vs cm, html and many other things are now in the table.

Here is what I 've sent to a designer who is creating PSD designs for web sites. Dynamic websites that are to be built Drupal framework. He is mainly a graphic designer creating static design about leaflets, bottles, boxes etc so he knows a lot about color theory, page elements, typography etc. But here we talk about something totally different. It's the "undefined" web!

I 'd like to use images for each example but it is not so easy so I hope someone understands what I mean.

"Dear John Doe graphic designer,

here are some useful tips that will make you better, that will save you time and will make me happier at all!

1) Use a grid system and respect it. Don't place things out of the grid or not aligned with it. If items get out of the grid then you have to use a larger/different grid.

2) Use webfonts.
The fonts for the site must exist as options on popular webfont services or in the user's machine (global fonts). Such as Google Fonts, Typekit, Fonts.com etc.
Do not use font families that have a lot of weights and variants. Do not use fonts that are not allowed to be used as webfonts or as local fonts. It is illelgal to do this.

3) There must be a vertical rhythm for the whole site except if the design does not need it at all. But since we display text, images and other elements one next to the other there must be a rhythm!

4) Images, graphics and gradients must be flattened (or rasterized) and not clipped.

5) Layers and folders must be structured and well organized. Group layers by their position on the template not by any other method. I am expecting to see folders like "Header, Footer, Sidebar" etc and not "pop, group 1, copy of group 1" etc.

6) (Special) effects and UX reactions cannot always be shown with a copied layer (eg link hover/active, disabled element, dropdown menu etc). Otherwise it is better to provide real web examples of what you are trying to describe through a static PSD file.

7) Each text layer must be individual if it refers to a different element. There should be different layers for the header, the body and the links of a text block and not one! This is critical.

8) Try using an icon package for icons. If not we may have problems in large projects when new icons are to be found for future usage. Icomoon, Fontello, FontAwesome, Fontastic are popular in this area.

9) Similar elements can be merged and only one (base) should have the layers. That means that I need only one folder/layer eg for the "Main body texts" and then you can merge other "Main body texts" so they are flattened. This will reduce the file size drammatically.

10) PSD cannot easily represent functionality and effects. Use can use real web examples (websites) of functionality/effects instead of drawing it on PSD. Similar to No 6 tip.

11) Keep you PSD files small and avoid large files (> 10MB).

12) Draw Templates and not Pages except if each page has a different template. For example draw 1 template for a blogpost page, 1 for the homepage and 1 for the contact page. Don't send me the same PSD for each individual page of the site!

13) Design for all (or most exceptable) content elements that a user can create with the web system. So, for example, if a user is allowed to use a WYSIWYG editor to insert a table then there should be a table mockup in the psd or at least some guidelines. For large projects I will need a Style Guideline...

14) Dotted or dashed lines must be images and not text (dots as text). You can use the PSD brush tool for this. Also, it would be great if you could provide the single repeated item of the line that has to be repeated (eg 2 dots only with the proper space). On CS6 there is a new "Stroke" tool too which does this more easily for any line or shape.

15) Don't "Reinvent the wheel". Some things are to be expected by the users and are used for so many years that can be considered as standards.
For example, an image popup may have an image, a title/description, a navigation and a close button. A link should have different color from a non link title etc.

16) Remove unnecessary layers, groups or styles from the PSD. Following tip no 4 and 11 there should be no garbage layers in the PSD, only what is needed.

17) Include the context on the design (eg with much more space than the design itself). A 900px design should have the style for the main body and the psd should be, for example, 1200px so the developer can see the layout/style of the 900px area. 100% width or 960px width can be displayed differently.

18) Try to learn some HTML/CSS and name your layers/groups with real HTML elements (eg header, #main, section, footer, a:link etc). H1, H2 and other header tags are not for styling. HTML structure is not about how things display always. Use the same terminology for PSD as for HTML (eg margin, padding, text-align etc). If you do this you will be my favorite designer!

19) Design on 72DPI canvas with web colors. There are different opinions here but I would suggest follow the 72DPI base.

20) Pixels in the PSD should be "real". So if there is a margin below a header of 20px then the website should have 20px margin-bottom too. If we want to create a dynamic design (with % margins, paddings, width etc then PSD may not be the tool)!

21) Provide useful comments when necessary. Even if a PSD has been created with all the above instructions there should always be questions from a developer when using the PSD. Don't make me think...

Thanks for your patient. I am waiting for your next "amazing" PSD design!"