2016 Prototyping Tools

Prototypes are one of the most important steps in the design process, yet still confusing for some designers and project teams.

This session, made with Iker Ortiz de Arri (@ikertxo), showcases our workflow approach, answers the question how to choose the right prototyping tool for a project and and compares some of the major players in this exploding landscape.

Transcript

1. P R O T O T Y P I N G : D E S I G N & T O O L S K R U N C H T I M E I NT E RACT IV E
2. Method
3. P R O T O T Y P I N G : D E S I G N & T O O L S Method 1 ENVISION ?
4. P R O T O T Y P I N G : D E S I G N & T O O L S Envision Phase Analysis
5. P R O T O T Y P I N G : D E S I G N & T O O L S Envision Phase Brainstorming
6. P R O T O T Y P I N G : D E S I G N & T O O L S Method 2 SHAPE BRIEFING VISION ?
7. P R O T O T Y P I N G : D E S I G N & T O O L S Shape Phase Discussion
8. P R O T O T Y P I N G : D E S I G N & T O O L S Shape Phase Scribbles
9. P R O T O T Y P I N G : D E S I G N & T O O L S Shape Phase Wireframes
10. P R O T O T Y P I N G : D E S I G N & T O O L S Method 3 CREATE BACKLOG BRIEFING VISION OUTLINE ?
11. P R O T O T Y P I N G : D E S I G N & T O O L S Method 4 DELIVER & VALIDATE BACKLOG REVIEW OUTLINE PRODUCT ? BRIEFING VISION
12. P R O T O T Y P I N G : D E S I G N & T O O L S Why prototype? • Showcase the design of an idea • Convince stakeholders • Explain requirements to developers • Simplify user tests • Force yourself to get your head around it
13. Market
14. P R O T O T Y P I N G : D E S I G N & T O O L S Competitors
15. P R O T O T Y P I N G : D E S I G N & T O O L S Differences • Web based • App based • Code based • Node based • Visual / timeline • Mixture • Click dummies • Micro interactions • Showcases • Wireframes
16. P R O T O T Y P I N G : D E S I G N & T O O L S Code based
17. P R O T O T Y P I N G : D E S I G N & T O O L S Node based
18. P R O T O T Y P I N G : D E S I G N & T O O L S Visual / Timeline
19. P R O T O T Y P I N G : D E S I G N & T O O L S Questions • Do I work alone or with a team? • What kind of application I want to use it for? • What do I want to achieve? • What fits best into my current workflow? • How complex are my interactions? • Am I familiar with code / nodes / timelines ?
20. P R O T O T Y P I N G : D E S I G N & T O O L S Resource I bit.ly/1VKdQVp
21. P R O T O T Y P I N G : D E S I G N & T O O L S Resource II cooper.com/prototyping-tools
22. Examples
23. Framer • Web based • Code based / visual* • Micro interactions
24. P R O T O T Y P I N G : D E S I G N & T O O L S Framer
25. New: Framer AutoCode
26. Axure • App based • Visual, mixed w/ code • Wireframes, click dummies, micro interactions
27. P R O T O T Y P I N G : D E S I G N & T O O L S Axure
28. P R O T O T Y P I N G : D E S I G N & T O O L S Axure
29. Pixate • App / web based • Visual, mixed w/ code & nodes • Click dummies, micro interactions
30. After Effects • App based • Visual / timeline • Showcases
31. P R O T O T Y P I N G : D E S I G N & T O O L S After Effects
32. After Effects P R O T O D E S I G N
33. Principle • App based • Visual / timeline • Micro interactions
34. P R O T O T Y P I N G : D E S I G N & T O O L S Principle
35. P R O T O T Y P I N G : D E S I G N & T O O L S Principle
36. Silver Flows • App based • Visual • Click dummies, micro interactions
37. Silver Flows
38. Silver Flows
39. Adobe XD • App based • Visual • Click dummies, micro interactions
40. Adobe XD
41. Q U E S T I O N S ? R X U F O U M
42. Alexander Meinhardt krunchtime.org KRUN C H T I M E I NT E R ACT I V E Iker Ortiz de Arri COAU T H ORS