Dev Handoff

  • Ideally, dev handoff is not a handoff, but a partnership in bringing a design to life
  • Clear and close communication between designer and dev through the whole process
  • Level of documentation determined by how much time you have to collaborate 1 on 1 with dev, and how well established your style guide is
  • Screen Flow
    • Prototypes help dev understand relationship between screens
    • Documentation that shows bird's eye view of all screens and arrows between them may be required to show relationships between all screens, based on complexity, time/distance from dev, familiarity of app
  • Interaction Design
    • High-fidelity prototypes (Principle, Atomic, Framer, AfterEffects) help communicate intended animation
    • Work with dev in real-time to make adjustments
    • Designer to make adjustments using built in dev tools on product itself (if available)  
  • Visual Design / Asset Export
    • Working from an established style guide, (ideally a "living style guide" that is programmed) will help keep assets consistent
    • Leverage tools like Zeplin or Inspect by Invision for redlines/specs and asset export if possible
    • Always design at 1x so that your designs can be easily exported at the appropriate multiples for each platform
      • iOS: @1x, @2x, @3x
      • iOS base screen resolutions reference here
      • Android: 1x (-mdpi), 1.5x (-hdpi), 2x (-xhdpi), 3x (-xxhdpi)
      • Android base screen resolutions reference here