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!

  1. Phenomenal advice on being organized. As the designer, I see it as my job to be both the creative person and the project manager to ensure things go smoothly for the developer (and vice versa!). Creating systems and being consistent in their use makes the process far more enjoyable for all parties in the process.

  2. [...] • Breanna Rose offers up some great insights into what designers should consider when packaging files for development. [...]

  3. Han says:

    As a designer/developer who mainly cuts up psd’s I have to say I hate it when the designer exports assets for me!

    They name things wrong, they tend to save them as the wrong file type. Also they have this habit of cutting out buttons into individual files and it drives me insane!

    Notes are very helpful though and so are examples of hover states. Also its helpful if a designer looks at the open source web fonts that are available before designing!

  4. Noor says:

    Thanks for the tips I love these series.

  5. Maria says:

    I am about to do some web production and I am glad I just read this…reminds me to add notes to my Illustrator file!

  6. rose says:

    so helpful! i’ve recently made the transition from print design into web and thinking in photoshop instead of indesign/illustrator can be a hurdle! great to get some practical tips to help the process :)

  7. Abigail says:

    I always design initially in Illustrator because I find that Photoshop makes me feel kind of restricted – but I will always take that design and put it into a layered, organized PSD for the web developer to work with since I know most of them reallllly prefer Photoshop! :)

  8. Rachel says:

    Question, how do you save you assets for you developers, jpg or png?