We have a few clients that have their own dev departments, and we are frequently asked -—how do you deliver your designs to developers? How can the client be sure that nothing falls through the cracks and designs are accurately and carefully transferred to production?
First off, on the wireframing stage we normally share prototypes with developers to help speed up the dev process. At this point, coders can start working on the project architecture or research the CMS or framework or language they want to use to create this project.
File Formats
There are a few ways to pass the files to developers:
Good ol’ PSD files
After the designs are approved by the final client and all the necessary testing is done, we can pass the files in Adobe Photoshop format.
Sketch/Invision bundle
This is currently our favorite method. We create interfaces in Sketch and export them to Invision via Craft Plugin. The dev team gets access to the Invision project, where they can switch to Inspect mode and pull out any CSS/HTML information they need, including margins, sizes, object properties, HEX codes, font names, etc.
Screen resolutions
Quick/Economy solution
If you need to quickly launch a project on a budget, one of the optimal ways is to design two basic layouts:
- Desktop
- Smartphone vertical
For tablets they will be coded this way: a horizontal tablet will show the reduced desktop layout, while a vertical tablet will show the smartphone view.
Professional solution
For more sophisticated projects, we can adjust designs for more screen sizes, e.g.:
- Desktop (wide screen)
- Laptop
- Tablet Vertical
- Tablet Horizontal
- Smart TV
The final list of screen dimensions depends on the projected statistics of usage and needs to be defined in collaboration with the marketing and dev teams.
Specifications
Depending on the project, we might come up with detailed specs for all types of screens. In a single document, we describe all the elements and how they function together.
