In an ideal case, there is no big design up front, no big hand-off, so ideally designers and developers work on the same parts of a digital product or service. It allows you to go through each problematic detail together, come up with detailed UI animations more easily, it also reduces waste during the product development process. It also means that the definition of done for designers is not about sending the final files to the developers, instead, it’s done when a certain release happens (of course “done” means different things for different teams and projects).

However, in many cases, the product development process chosen by your organization won’t let you do this. Also, your organization might hire a third party developer vendor or partner.

Summary sketch of the Design handoff best practices

So let’s assume that there is some kind of hand-off: after creating the UI design, the designer hands it off to the developers. How can he specify the little details?

A checklist of some best practices

Here are some best practices:

  1. Naming the files: use relevant, descriptive, consistent naming (not final_really_final – btw. you should apply a version control system)
  2. Provide SVGs: icons, logo, favicon, custom graphics, illustrations – all these should be in SVG format
  3. Imagery: this is the aspect of art direction (read more about it in my article), it is about preparing images to be displayed on different viewport sizes
  4. Typography: provide all fonts, make sure that you have a proper licence that fits the project’s purposes
  5. Copy and UX copy should also be provided (I believe in content first design: please never design with lorem ipsum); most probably you won’t be able to provide all the texts as part of the screens (e.g. you’ll have error and confirmation messages etc.), these should be provided in a table. There might also be translations (this it he aspect of internationalization and localization)
  6. Layout
    • Clearly and consistently specify all the spacing values 
    • Specify and apply a consistent grid system
    • Determine breakpoints, provide all the different layouts for each sizes
    • Specify how things should be aligned (see my card-based layout example in this article)
  7. Don’t forget the specifications of the UI Animations included (e.g. object’s position in the beginning and at the end, duration of the transition, easing, transformation type etc.) – tools like Lottie can make this easier
  8. If you use a certain design system, clearly specify what elements you’ve included, what should be used and where
  9. Specify hexa codes for colors, gradients
  10. Provide all the assets in a consistent file structure, everything should be easily findable
  11. All the different states of components should be provided (e.g. in case of a button: pressed, hover, focus, disable, default; checkbox on and off)
  12. Pay attention to platform specific guidelines and principles, and communicate these to the developers

Final advice: use a checklist, so that there won’t be any missing parts

How to specify all these

You can use annotated sketches, wireframes, prototypes, and create design handoff documents (UI documentation). 

Next to these manual ways, there is an automated way. You can use design hand-off and inspection tools (e.g. Zeplin, Invision Inspect or Avocode) – in this case you need to use a consistent layer structure in your design tool of choice. These tools let developers inspect the designs, get measurements, all the assets, and these usually include collaborative features as well, e.g. you and the developers can add annotations, comments.

So to sum up, the most important thing is that you need to specify all these things so that developers can effectively implement your designs. I’d like to highlight that a heavy documentation and a highly detailed specification can generate a lot of waste in the process, but as I mentioned, in many cases, you can’t avoid creating heavy hand-offs and detailed deliverables.