Preparing your Photoshop mock-ups for the big hand-off

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:

  1. Name ALL your layers
  2. Organize layers into logical (and labeled) groups
  3. Provide the minimum number of files possible, and name them accordingly
  4. Keep a copy of the final .PSD file
  5. Proofread and spell-check before sending
  6. Keep type “active” so it can be copied, pasted, and/or edited
  7. Flatten graphics that include shading or gradients for easy cropping
  8. 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.

Posted by Allyson Murphy | Design, Best Practices, Tutorial | Comments 0 |
Connect with us on LinkedIn Follow us on Twitter Add us on Facebook Subscribe to our RSS feed
the_works

Subscribe to email updates