Providing Design Work

Guidance for designers providing designs to developers

If you’re providing designs to developers (maybe you’re one of our design partners), or you’re appointing a designer to work with us, then we’ve provided the following guidelines for best practice handover between the teams.

• Name all screens simply as the page/view type or name; don’t include version numbers (it’s better to use version control tools) and archive old designs to avoid confusion;
• Provide desktop and mobile designs where possible; if budget is tight, then just a view of how the mobile navigation and any custom functionality should work is a good place to start. Let us know the breakpoints you’re keen to work to, ideally by working with a grid system like Bootstrap or CSS Grid. If you’re using wider Bootstrap or Material Design elements then let us know.
• Interactive elements like menus, buttons, calls to action, forms and modals should be specifically designed. Hover, action and dropdown states need to be elucidated. If the functionality or direction of a link is ambiguous, then provide supporting documentation with instructions titled with the name of each design file layer.
• Where you intend text bound by containers to be editable in a CMS, give thought to how the design should scale if the text volume increases. If the design should not support flexible scaling if text volume increases, please specify how many characters the content block should be limited to.
• Provide signed off files in an accessible format, like Photoshop, Indesign, Sketch. Tools like Figma and Invision are helpful too. Include all layers, linked assets, fonts, and icon sets.
• Brand guidelines are handy (especially to confirm colour palettes), along with vector logos for retina images. Don’t forget things like favicons!
• If the copy is not yet signed off, use placeholder copy of roughly the quantity that is agreed for this section of the site. Providing a key and a separate spreadsheet document later with the actual copy is also useful. Also show us what the copy actually looks like, including H1-6 styles, ordered and unordered lists, introductory paragraphs, inline links, quotes, etc.
• Depending on the functionality of the project, then designs for 404/error pages, form elements, tooltips, search results, and archive pages are all useful.
• For functional elements or in-browser scripting, if you’ve seen the behaviour you need on a site elsewhere or in an off the shelf script then provide a link. If it’s entirely custom, animation can help clear things up.

Where possible, it’s best to use a tool like Google Drive or Dropbox to share designs with developers, to ensure everyone’s working from the same versions.