Better hand off to developers with annotations

The collaboration between designers and developers is more important than ever. With the ever evolving agile setup: squads, scrums, guilds etc… having good handover processes is crucial to ensure your designs are functioning in the way you intended when developed.

Whilst it may seem obvious what your intension is for your design, it may be interpreted in many different ways. For example, what is this and what does it do?

When you click the arrow does it show the next image in the carousel?
Does the carousel slide when you swipe?
Are the page indicators clickable?
Is this an overlay above each image?

Including an annotations layer in your designs can save a lot of back and forth; big time saver in a remote working environment where it’s not as easy to just spin around in your chair and ask some questions.

Here is an example of functional annotations and how they can be used.

Accessibility – annotations can be more than just general functionality

Having both functional and accessibility annotations included in your design is a great habit to get into. You can turn them off for handover when using inspect functionality. You can export “annotation packs” when handing over your designs. This will ensure your developers are getting as much information as needed during the handover process.

There are many annotation kits available out there for accessibility already! You can either use those or create your own. I have used Bluelines kit and added anything I needed on top of that. Setting these up as a component library makes it easy to quickly annotate your designs.

Annotating your designs helps you look at it with a different set of eyes and can often bring light to issues overlooked! Use annotations as a final check as well!