design handoff document
TRANSCRIPT
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