Booklet

author

Mike V Dijssel

Design

What Would You Advise For Design Handoff

design

Design

|

What Would You Advise For Design Handoff

FIRST OF ALL, WHAT IS A
DESIGN HANDOFF?
Design handoff is the proces of handing over the approved designs to the developers so they can implement it.
The goal of a design handoff is to bring clarity and minimize the guesswork by a developer on design details. A good design handoff will improve the design process.
A design handoffs is the moment where you (as designer) can describe your vision on visual-, interaction- & motion design. At this moment you also deliver and explain the assets that are necessary to build to visual elements.

MY ADVICE:
Invest in your developers, invest in your team and invest in the process. If you lack on a design handoff, problems will naturally arise. Details will not match your vision and the developer will spend more time on unclear details. So invest in the handoff.
You also have more risk that details are not entirely in line with others and create inconsistencies. Fixing this will also have an impact on the costs.
Involve developers early in the design process and use their knowledge and thoughts. A good designer-developer collaboration will definitely elevate the product, workspace and team.

BUT, WE ARE LUCKY. THERE S TOOLING TO HELP US...

AVOCODE
'Avocode helps you share design files, discuss changes, and code websites, mobile apps, & newsletters faster.'
https://avocode.com/

ZEPLIN
'The better way to share, organize and collaborate on designs—built with developers in mind.'
https://zeplin.io/

INVISION INSPECT
'Take your hands off the wheel — with Inspect, lnVision Studio, Sketch, and Photoshop files automatically turn into developer specs.'
https://invisionapp.com/feature/inspect/

SKETCH CLOUD INSPECTOR
'Move from design to development in just a few clicks. Inspect elements, copy attributes and measure between layers, right in the browser.'
https://www.sketch.com/

FIGMA CODE PANEL
'In Figma, the Code panel offers an easy way to extract code information from a specific page element and measure spacing and margins.'
https://www.figma.com/

WHICH ONE IS YOUR FAVORITE
Let me know in the comments if you liked this post!

More booklets by Mike V Dijssel

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets