1. http://ux.handson.co

2. Hands-on
Prototyping
Without Code
@andreehuk

3. @andreehuk
Rookie Mistake #1
No white space

4. @andreehuk

5. @andreehuk
Rookie Mistake #2
Huge monitors

6. @andreehuk

7. @andreehuk

8. @andreehuk

9. @andreehuk
Wrong perspective
Correct
perspective

10. @andreehuk
Expert Heuristic
When it looks toooo big,
it’s about right

11. @andreehuk
Getting our
hands dirty

12. @andreehukFake
Real
Keynote
Bootstrap (no DB)
proto.io
omnigraffle
flinto invisionapp
Framer

13. powerpoint
@andreehuk

14. @andreehuk
powerpoint

15. powerpoint
@andreehuk

16. @andreehuk
powerpoint

17. flinto.com
@andreehuk
$20 / month

18. @andreehuk
screenshots in flinto.com

19. @andreehuk
screenshots in flinto.com

20. Flinto
@andreehuk
• Good for real interactions
• Very simple and fluid
• Web connection needed for
testing

21. omnigraffle
@andreehuk
$99 or $199 once

22. @andreehuk
omnigraffle

23. @andreehuk
omnigraffle

24. @andreehuk
omnigraffle
then key b+click to
jump between slides

25. @andreehuk
or omnigraffle wf’s into keynote

26. @andreehuk
export as PDF, open in… to test

27. omnigraffle
@andreehuk
• Boatloads of stencils available
• Very smooth workflow between
WF’ing and testing IX’s
• Not good for creating rich
interactions

28. keynote
@andreehuk
Free with every new Mac

29. @andreehuk
keynote
biggest issue: “slide
follows slide” concept
Hardly any rich IX’s doable
in non-linear prototypes

30. @andreehuk
keynote

31. @andreehuk
keynote

32. @andreehuk
keynote
On “Play” you then
click (“jump”)
chronologically from
slide to slide

33. Keynote
@andreehuk
• Very good for effects
• Very good for click interactions
• Not good for creating rich
interactions across many
screens

34. proto.io
@andreehuk
$24 - $160 / month

35. @andreehuk
proto.io

36. @andreehuk
proto.io

37. @andreehuk
proto.io
Rich interactions
in the browser or
on mobile

38. proto.io
@andreehuk
• Very good for rich interactions
• Steeper learning curve
• Web connection needed for
testing

39. Get in touch
andree+vcard@incuba.de