Design Handoff Document. Design Handoff Document.You can call it the You can call it the

Rizki Mardita, UI/UX Designer

WALKBOXES

DESIGNER & DEVELOPER DESIGNER & DEVELOPERBridging the gaps between Bridging the gaps between

WALKBOXES

Product Development Process Product Development ProcessA common way to describe a A common way to describe a

Design Front-end Back-end

WALKBOXES

User Interface & Development Layers User Interface & Development LayersThe core parts of a digital product The core parts of a digital product

User Interface (UI) Layer Development Layer

Design Front-end Back-end

WALKBOXES

COLLABORATION COLLABORATIONCOLLABORATION COLLABORATION

COLLABORATION COLLABORATION

COLLABORATION COLLABORATIONCollaboration Collaboration

Collaboration Collaboration

Collaboration Collaboration

Collaboration Collaboration

Collaboration Collaboration

WALKBOXES

on User Interface (UI) Level on User Interface (UI) LevelCollaboration Collaboration

Early validation of design

Flexibility and autonomy

Constant deliveries and participation

WALKBOXES

on Product Level on Product LevelCollaboration Collaboration

Map out the objects together

Discuss product definitions together

WALKBOXES

Design Handoff Document Design Handoff DocumentThere’s multiple layers of information that needs to be conveyed There’s multiple layers of information that needs to be conveyed

Mockups

Interaction

Style Guide

Specs & Assets

WALKBOXES

Mockups MockupsDesigning Interfaces, website, icons, button…whatever is in your head.

Designing Interfaces, website, icons, button…whatever is in your head.

01

WALKBOXES

Suggested Tool(s) : Sketchapp Suggested Tool(s) : Sketchapp

Interactions InteractionsFlow, design prototyping and collaboration.

Flow, design prototyping and collaboration.

02

WALKBOXES

Suggested Tool(s) : Marvelapp Suggested Tool(s) : Marvelapp

Interactions InteractionsFlow, design prototyping and collaboration.

Flow, design prototyping and collaboration.

02

WALKBOXES

Suggested Tool(s) : Marvelapp Suggested Tool(s) : Marvelapp

Style Guide Style GuideMake It Consistent And Scalable.

Make It Consistent And Scalable.

03

WALKBOXES

Suggested Tool(s) : Sketchapp & Zeplin Suggested Tool(s) : Sketchapp & Zeplin

Specs & Assets Specs & AssetsDesign Specs, Style Guide, Fonts, Colors, Icons & all assets.

Design Specs, Style Guide, Fonts, Colors, Icons & all assets.

04

WALKBOXES

Suggested Tool(s) : Zeplin Suggested Tool(s) : Zeplin

WALKBOXES

“A good product is a lot about the problem that you pick, the ideas that you implement & good collaboration”

“A good product is a lot about the problem that you pick, the ideas that you implement & good collaboration”

THANK YOU THANK YOU