Building Programmer-Friendly Design Files


Before joining the Elevated Third team I primarily worked as a graphic designer in the print world. Managing my files to be printer-friendly is second nature to me. I am accustomed to being either the only person or at least the last person to touch my design files before sending them off to the printer. In the interactive world printers have been replaced by programmers and Indesign has been replaced by Photoshop. Both are by no means entirely new to me, but building this type of file requires a different mode of thought. Thinking about how a programmer will go about turning my photoshop file into something that is able to live and function on the web is not something I did on a regular basis. Once I started building this type of file more regularly I realized was how important my file management is to the efficiency of the entire process. The more organized my files, the easier it is for the programmer to navigate through and build them out.

Here are a few basics to keep in mind while building programmer-friendly Photoshop files:

File Organization and Structure
Keep files organized and tidy by naming layers, deleting old and unnecessary layers, grouping content into folders, and structuring the layers to match the structure of the layout.

A design friendly file vs. A not design friendly file

Make sure fonts are web-accessible and include any non-system fonts with the design file.

A font file

Keep Items Scalable
Smart objects scale much better than rasterized layers. Keep items that you may need to scale to a larger size down the road as smart objects, it will save you from having to rebuild them later.

Design Using the Grid
As a designer, using a grid makes it easy to keep elements and spacing in proportion and consistent. It keeps the programmer's guesswork to a minimum when spacing and size is not eyeballed. The grid also makes it easier for programmers to measure elements and spacing. 

Design for Different States
Include different states of buttons, links, etc so that the programmer doesn't have to guess how you want these to appear.

A design friendly menu item

Think Like A Programmer
An understanding of how the programmer is going to build out your file for the web and knowing what is and is not possible from a programming standpoint is essential. It will allow you to design your file correctly the first time around instead of having to make design revisions after you've passed off your file to the programmer. If you're not sure whether or not something is possible, do a little research or ask.

Label Stock Images
If you are using stock images, especially if you are using unpurchased placeholder images, label the stock image layer with the image number and site that you got it from. This will make it easier to find or reference the image later. Also label the image as purchase or not purchased to avoid accidentally putting an unpurchased image live on the web.

A design friendly file in photoshop

Photoshop Etiquette is a site that I found while looking for ways to improve my own files. It is great resources for web designers and acts as a guideline intended for any group of people looking to standardize web design in Photoshop.