I have to admit it, I’m guilty. Many designers like myself have handed a Photoshop mockup to a developer for a web application, that is, quite frankly, a hot mess.
I’ve done my share of HTML and CSS coding, and I know what it’s like to be on the receiving end. So, now I make a conscious effort to provide tidy, logical .PSD files that anyone can jump into . . . without wanting to jump out a window when they look at my layers. There are some basic rules of thumb that make for a good working relationship between the designer and developer. Attention web designers! For the sake of a professional, efficient hand-off to the site's development team, here are some steps to consider while preparing your files:
- Name ALL your layers
- Organize layers into logical (and labeled) groups
- Provide the minimum number of files possible, and name them accordingly
- Keep a copy of the final .PSD file
- Proofread and spell-check before sending
- Keep type “active” so it can be copied, pasted, and/or edited
- Flatten graphics that include shading or gradients for easy cropping
- And, most importantly, speak up if the resulting HTML doesn’t match your layout
A good relationship between designer and developer results in a successful, completed project. As your relationship grows, the learning curve shrinks, leading to faster turnaround times and, most importantly, happier clients.