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.

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
BACKLOGBRIEFING
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
KRUNCHTI M E I NTE RACTIVE
Iker Ortiz de Arri
COAU THORS