Creative Delivery Guidelines

Last updated 2014-10-07

These are a few standard guidelines for creative handoff, dependent on the type of deliverables expected:

Layered PSDs (Photoshop) or PNGs (Fireworks) for each primary page layout (i.e. different page widths or substantial feature differences — this is NOT necessary for similar or easily-derived pages)
Dimensions-wise, it is recommend that desktop-targeted designs utilize a common modern width in the 960px to 1280px range, with additional considerations for Tablet and/or Mobile layouts when applicable
Comps should be as pixel-perfect as possible (note that converting or exporting from freehand AI/vector to PSD often causes unintended antialiasing of edges, often softening things that should be sharp — extra conversion time is required if we must convert from AI)
16×16 and 180×180 images suitable for icon use, PNG format (24-bit alpha)
When non-standard fonts are required, the designer should find a suitable web font or identify web-based alternatives from Google Web Fonts or Typekit
Copies of any non-standard fonts used for display or within inline graphics, the exception being for text/headers which have been rasterized
Brief web style guide, if possible (which should include approved web fonts/fallbacks for copy, display fonts for headings, sizes in px/em, approved colors in hex, etc — this will save some back and forth communication should these questions arise during development)

Full HTML pages (including images, CSS, and display-oriented scripts) for each primary page layout (i.e. different page widths or substantial feature differences — this is NOT necessary for similar or easily-derived pages)
Dimensions-wise, it is recommend that desktop-targeted designs utilize a common modern width in the 960px to 1280px range, with additional considerations for Tablet and/or Mobile layouts when applicable
16×16 and 180×180 images suitable for icon use, PNG format (24-bit alpha)
Copies of any non-standard fonts used for display or within inline graphics, the exception being for text/headers which have been rasterized

Vector-based files (e.g. AI or EPS) that cover each color variation
Copies of any non-standard fonts used, the exception being for text that has been converted to lines
Brief usage style guide, if possible (which should include allowable logo orientations, light/dark background use, and approved colors in RGB, CMYK, and hex)

High-resolution originals of all creative that could be used as full-screen backgrounds, or for thumbnails that would be displayed screen-width on a mobile device — 1600px minimum width will work in most cases
Alternate PSDs that express the layout as viewed on a Tablet or Mobile device (or roughly 768px and 320px wide, respectively)
Guidelines as to how content should wrap or flow between targeted screen widths, if not adequately represented in PSDs