Slides from a workshop on how startups should incorporate design into product development, how to effectively work and communicate with designers, and how to use common design tools such as Sketch, Invision and Principle.
1. D E S I G N F O R S TA R T U P S
I M P E K A B L E - P E K P O N G PA E T
2. A B O U T I M P E K A B L E
I M P E K A B L E B E L I E V E S G R E AT P R O D U C T S A D A P T A N D
C H A N G E W I T H T H E I R U S E R S .
W E B A L A N C E H U M A N - C E N T R I C D E S I G N VA L U E S W I T H
D Y N A M I C P R O D U C T D E V E L O P M E N T.
Ideation Design Development
7. R E Q U I R E M E N T S
• New or Existing Project?
• What do you need?
• Scope / timeline
• Audience, stakeholders
• Competition, examples, inspiration
• Requirements, wireframes*, existing files/resources
9. Mostly grayscale UI design with focus on refining feature workflow
W I R E F R A M E S
D E S I G N D E L I V E R A B L E S
10. W I R E F R A M E S
D E S I G N D E L I V E R A B L E S
11. High fidelity UI designs to be implemented
V I S U A L D E S I G N
D E S I G N D E L I V E R A B L E S
12. V I S U A L D E S I G N E X P L O R AT I O N
D E S I G N D E L I V E R A B L E S
13. I N V I S I O N P R O T O T Y P E
D E S I G N D E L I V E R A B L E S
Interactive prototype to review
and provide feedback on design
flows
• Go through prototype on web
or mobile device
• Leave comments directly on
design
Example: https://invis.io/4Y44VQI6G
14. Z E P L I N
D E S I G N D E L I V E R A B L E S
Easy tool for designers to export assets
and developers to receive design specs
Use desktop or web app
• Designers don’t need to spend hours or
days speccing
• Specs are always up to date & ‘live’
• Developers don’t need to have or install
design tools
Example: https://zpl.io/Z1tHGus
15. P R I N C I P L E
D E S I G N D E L I V E R A B L E S
Create animations to
illustrate transitions or
interactions
Example: