What Designers should handle to Developers Here’s an old draft from more than 3 years ago I had and where I try to explain to traditional graphic designers how web design differs from printed media in terms of handing the finalized work. One of the most important parts of web development is something called “Documentation”. Which consists in a detailed explanation […]

Here’s an old draft from more than 3 years ago I had and where I try to explain to traditional graphic designers how web design differs from printed media in terms of handing the finalized work.

One of the most important parts of web development is something called “Documentation”. Which consists in a detailed explanation on how everything has been done and how it works. These can be fragmented into two parts, the administration one and the programming one and they describe how to administer the site (for the person responsible of maintaining it) and another one for the next developer that comes to update the code (with good programming comments, documentation may sometimes not be needed). I’ve been realizing that there’s no such thing for Web Designers, or that I have found very few Web Designers that actually document the work that hand to developers.

The main reason I think Web Designers are not trained to write documentation is because we use to think the profession is a branch of the “classic” Graphic Design industry that for years was mainly for print, where the Designer is the last step before the printer (which we could also call “the client” if we considered that, regardless the content, the printer is the one that reads, interprets and translates a computer file into a piece of paper with tint on it, keep reading).

One aspect where Web Designers are not Graphic Designers is that they’re not the last step before the publishing of a website. There’s an obscure and long process in which Web Developers need to read, interpret and translate something into a website. If that is just one plain piece of image, without any further or missing explanations, we know the project is going to be painful and the final result is going to be far from pixel perfect.

Some of the Web Designers I’ve worked with handed me a PDF with the pages of the website in it and considered their job was done. Then it was my turn to go after them and ask what happened with the interaction of everything as well as other details and issues I will list in a bit.

Another common misunderstanding in Web Designers is that Graphic Design is static, but Web Design needs to be interactive. Some Web Designers would handle their designs without even thinking on how everything behaved in the page. True story.

What Designers should handle to Developers

So here it is, a detailed list of all the information a Web Developer needs to know in order to develop the website as precise as the Web Designer wants it. If the Designer doesn’t give this, he will eventually be asked to do so, or the Developer will just use his own judgement.

Files

1. One image in actual size of every different page/template (One multi-page Fireworks PNG or Photoshop PSDs)
   If it needs to be a JPG or PNG-transparent image then it should be at its highest quality (95 to 100 compression) and never PDFs, please.
2. A representation of every different state that can happen:
   • dropdown menus
   • mouseover behaviours over elements and sections
   • enabled/disabled buttons
   • active clickable areas
   • etc.
3. Clickable and interaction area size for not-so-obvious buttons
4. Images or photography without text over it (when providing a one-layer file)
5. Information on the licenses for each image, photography and web fonts used (license type, author and source/URL)
6. Color palette in HEX or RGB format (not CMYK)
7. Branding specifications/limitations (if any)

Information

1. Grid system they have used (total width, number of columns, margins/paddings…)
2. Responsive behaviour (explanation on how should different modules behave in different sizes, at least four: large desktop, desktop, tablet in portrait and mobile)
3. Font size, family, kerning, tracking, line spacing and any other detail as well as the license of the fonts
4. Mouse, links, buttons and all element’s special behaviours (when the mouse is over, when button is clicked, when user scrolls down)
5. Page animations (slideshows, fade-in effects, etc.)
6. The different page structures
7. The different heading, paragraph, list, table styling
8. If for some personal reason the designer decides to use awkward sizes for objects (237×198) then note them down in a separate sheet to ease the developer’s work

Conclusion

Sure the Developers can figure all out for themselves, but the amount of time wasted in both emails/phone calls and investigating everything can be greatly reduced if the designer, who knows everything in the first place, collaborates.

Photo by adactio