I know there are a lot of designers out there that are working more and more with developers, so I thought I’d talk a little about this special collaboration today. Like I mentioned a few weeks ago, I think outsourcing is a great thing. Excel at what you’re amazing at and reach out for help when you can’t do it all. Here enters the designer and developer relationship. Although every developer and designer works differently and there is no set guidelines for the ideal hand off, here are some tips for designers to make the process more streamlined :
01. BE ORGANIZED FROM THE START I can’t stress this one enough. The more organized and put together your website designs are from the beginning, the easier things will be to hand off when you’re ready for coding. This means that you are sizing things appropriately for screen, keeping your images in folders organized, and labeling any layers you have in photoshop or illustrator correctly as you go. Make everything as clear as possible so you don’t have to over-explain things.
02. PHOTOSHOP VS ILLUSTRATOR I know several developers out there who have a clear preference as to what program a website is designed in. Photoshop seems to be the popular one. However, I also know several designers out there who design much better in illustrator. Personally, as a hybrid designer and developer, I can see the benefits of both … but have to encourage you all to think about who works the longest within the program. Designers are the ones who spend hours tweaking a design in their program of choice. Developers, on the other hand, extract the design and develop it separately. Because of the time spent designing within photoshop or illustrator, I tend to favor the designer’s preference of where they work best. This is just my personal opinion, but most developers CAN work within either program no matter what.
03. USE WEB FRIENDLY FONTS Unfortunately, when designing a website, you can’t just use any font from your library. Because not everyone in the world houses the same fonts on their computer, you have to account for that. This is where web fonts save the day! By using google web fonts, typekit, or font face ( among others ), you can assure that your fonts will show up correctly.
04. SAVE OUT YOUR ASSETS Although this tip is optional, it’s the nice thing to do. When you design a website, chances are you have a handful of images that you’ve cropped and placed into your layout. Whether it’s a bio photograph, social icon, or header image … most websites use images somewhere. Let’s call these images assets. Assets have to be extracted from a layout and uploaded to the website separately in order to appear correctly. Developers CAN do this, but it sure is thoughtful when designers prep the work for them. That way, they receive a full package. I would highly consider doing this.
05. ALWAYS GIVE NOTES This can be done in so many ways, but it’s important to include. For example, some people like to include a top layer that can be turned off an on. Within that layer, there are notes from colors and column sizes to hover states. Other people write notes on the artboard. Some people even send a separate text document. No matter how you choose to do this, anything you can think of that isn’t obvious should be included!!
06. SEND A NICE PACKAGED LAYOUT Make sure that what you are sending over to the developer is organized. For example, I like to create a folder for the project. Within that folder, you’ll find folders that house the main layout files ( photoshop or illustrator ), fonts, images, and anything else that needs to be sent over. Again, being organized along the way will make this ten times easier!
Remember, ever designer and developer works differently … the key is to be as helpful and flexible as possible. These guidelines are a great start! If you have any doubt, send a simple email to your developer asking how they’d like to receive their files. Chances are they’ll be willing to explain!