The document discusses prototyping tools and methods for testing designs early in the development process. It recommends starting with paper prototyping to test initial ideas and layouts. The next step is wireframing using free online tools to layout content hierarchy and flow. Visual mockups are then created using design tools to test the design. Prototypes should then be made as realistic as possible to test usability, experience and content. Testing prototypes with users early is better than waiting until late in the process with many users. The overall goal is to test designs quickly through various prototyping methods.

1. Prototyping tools
Joël Plas
20 december 2016

2. Goals for today
How
When
Why

3. Why?

4. Design by insight

7. Users choose their own path

8. because changing the text on 1 button

9. because changing the text on 1 button
...can deliver you 300 million dollar

10. When?

11. Test early, test quickly en test a lot

13. How?

14. #1 step: Paper prototyping

37. #1 step: Paper prototyping
- testing your first ideas
- layouts
- flow

38. #2 step: Wireframing tool

43. (free THUAS accounts available)

44. (free student accounts available)

45. Omnigraffle

46. Quirktools Wires

47. Wireframe.cc

48. Wireframe.cc

49. Powerpoint / Keynote

50. #2 step: Wireframing tool
- layouts
- flow
- content hierarchy
- (more presentable for clients)

51. #3 step
Visual Mockups

56. Design tools

57. #3 step
Visual Mockups
test your design,does it support your message ?

58. Now let’s combine
the design and the
wireframes

59. Let’s prototype!
(and quit those ugly slides)

60. Let’s make it as real as possible!
● it should look like a real website or app
● it should behave like a real website or app
● it should work in a real browser
● it should work on my smartphone

62. Let’s do it!

65. Is it a bird? Is it a plane?

66. Is it a bird? Is it a plane?
No, it’s a prototyping tool!

72. But don’t forget!

73. #4 step: Prototyping
- usability
- user experience
- design
- content

74. Testing one user early is better
than testing 50 near the end.
Steve Krug
Auteur van “Don’t Make Me Think” en “Rocket Surgery Made Easy”

75. Tot zover.
Zijn er nog vragen
?
Questions?

76. Observing a participant
using your prototype