The document compares different tools for creating wireframes, prototypes, and mockups. It discusses Adobe Muse CC for creating freeform websites directly in the tool. It also covers InVision for creating clickable prototypes with sharing and feedback features, and Figma for more advanced prototyping with interactions, animations and transitions but a steeper learning curve. Finally, it briefly mentions Material Design Lite for lightweight prototyping using HTML and CSS. The goal is to provide an overview of options for different stages of the design process from simple wireframes to fully interactive prototypes.

1. Wireframes, prototypes
and mockups - comparison
of tools
Estera Kot 14/01/2016

2. 2
To be more
Customer-friendly.
Estera Kot Wireframes, prototypes and mockups

3. 3
Shift the perspective:
show don't tell.
Estera Kot Wireframes, prototypes and mockups

4. 4
Show what the app's
user experience will be like.
Estera Kot Wireframes, prototypes and mockups

5. 5

6. 6
Create something
tangible.
Estera Kot Wireframes, prototypes and mockups

7. 7
Fail early.
Estera Kot Wireframes, prototypes and mockups

8. 8

9. 9
Thanks to:

10. 10
Wireframe vs Prototype vs Mockup
http://designmodo.com/wireframing-prototyping-mockuping/
Estera Kot Wireframes, prototypes and mockups

11. 11
Estera Kot Wireframes, prototypes and mockups

12. 12
Adobe Muse CC

13. 13
● Desktop app
● 'Photoshop' dedicated for webdesign
● Html/css/js
● It’s perfect for designers who are looking to create
free-form websites that work and look great on any
browser, or any sized screen.
Estera Kot Wireframes, prototypes and mockups

14. 14
● Desktop app
● 'Photoshop' dedicated for webdesign
● Html/css/js
● It’s perfect for designers who are looking to create
free-form websites that work and look great on any
browser, or any sized screen.
Estera Kot Wireframes, prototypes and mockups

15. 15
● Desktop app
● 'Photoshop' dedicated for webdesign
● Html/css/js
● It’s perfect for designers who are looking to create
free-form websites that work and look great on any
browser, or any sized screen.
Estera Kot Wireframes, prototypes and mockups

16. 16
● Desktop app
● 'Photoshop' dedicated for webdesign
● Html/css/js
● It’s perfect for designers who are looking to create
free-form websites that work and look great on any
browser, or any sized screen.
Estera Kot Wireframes, prototypes and mockups

17. 17
● Creative Cloud Libraries
● Access stock photos from Adobe Stock.
● Cross-browser-compatible code
Estera Kot Wireframes, prototypes and mockups

18. 18
● Creative Cloud Libraries
● Access stock photos from Adobe Stock.
● Cross-browser-compatible code
Estera Kot Wireframes, prototypes and mockups

19. 19
● Creative Cloud Libraries
● Access stock photos from Adobe Stock.
● Cross-browser-compatible code
Estera Kot Wireframes, prototypes and mockups

20. 20
The HTML code output from Muse is
not optimized for manual editing.

21. 21
Preview Page in Browser

22. 22
Estera Kot Wireframes, prototypes and mockups

23. 23
● Desktop/Web/Mobile
● Collaboration = feedback
● Version History and Syncing
● Arrange screens
● UI kit TETHR
Estera Kot Wireframes, prototypes and mockups

24. 24
● Desktop/Web/Mobile
● Collaboration = feedback
● Version History and Syncing
● Arrange screens
● UI kit TETHR
Estera Kot Wireframes, prototypes and mockups

25. 25

26. 26
● Desktop/Web/Mobile
● Collaboration = feedback
● Version History and Sycing
● Arrange screens
● UI kit TETHR
Estera Kot Wireframes, prototypes and mockups

27. 27
Version control and files sync

28. 28
● Desktop/Web/Mobile
● Collaboration = feedback
● Version History and Sycing
● Arrange screens
● UI kit TETHR
Estera Kot Wireframes, prototypes and mockups

29. 29
Arrange screens in prototype

30. 30
● Desktop/Web/Mobile
● Collaboration = feedback
● Version History and Sycing
● Arrange screens
● UI kit TETHR
Estera Kot Wireframes, prototypes and mockups

31. 31
IOS design UI Kit Tethr

32. 32
IN VISION screen layers structure
Estera Kot Wireframes, prototypes and mockups

33. 33

34. 34

35. 35

36. 36

37. 37

38. 38

39. 39
+ easy, fast, quick and intuitive
+ sharing and commenting system (feedback)
+ for free: basics.
+ lifeshare → link
+ good, when we have jgp/png images and
we only have to link them
- no features for creating/modyfying in the tool
- interactivity limited to hotspots/timeouts
for moving betweend screens
Estera Kot Wireframes, prototypes and mockups

40. 40
+ easy, fast, quick and intuitive
+ sharing and commenting system (feedback)
+ for free: basics.
+ lifeshare → link
+ good, when we have jgp/png images and
we only have to link them
- no features for creating/modyfying in the tool
- interactivity limited to hotspots/timeouts
for moving betweend screens
Estera Kot Wireframes, prototypes and mockups

41. 41
+ easy, fast, quick and intuitive
+ sharing and commenting system (feedback)
+ for free: basics.
+ lifeshare → link
+ good, when we have jgp/png images and
we only have to link them
- no features for creating/modyfying in the tool
- interactivity limited to hotspots/timeouts
for moving betweend screens
Estera Kot Wireframes, prototypes and mockups

42. 42
+ easy, fast, quick and intuitive
+ sharing and commenting system (feedback)
+ for free: basics.
+ lifeshare → link
+ good, when we have jgp/png images and
we only have to link them
- no features for creating/modyfying in the tool
- interactivity limited to hotspots/timeouts
for moving betweend screens
Estera Kot Wireframes, prototypes and mockups

43. 43
+ easy, fast, quick and intuitive
+ sharing and commenting system (feedback)
+ for free: basics.
+ lifeshare → link
+ good, when we have jgp/png images and
we only have to link them
- no features for creating/modyfying in the tool
- interactivity limited to hotspots/timeouts
for moving betweend screens
Estera Kot Wireframes, prototypes and mockups

44. 44
+ easy, fast, quick and intuitive
+ sharing and commenting system (feedback)
+ for free: basics.
+ lifeshare → link
+ good, when we have jgp/png images and
we only have to link them
- no features for creating/modyfying in the tool
- interactivity limited to hotspots/timeouts
for moving betweend screens
Estera Kot Wireframes, prototypes and mockups

45. 45
+ easy, fast, quick and intuitive
+ sharing and commenting system (feedback)
+ for free: basics.
+ lifeshare → link
+ good, when we have jgp/png images and
we only have to link them
- no features for creating/modyfying in the tool
- interactivity limited to hotspots/timeouts
for moving betweend screens
Estera Kot Wireframes, prototypes and mockups

46. 46
Estera Kot Wireframes, prototypes and mockups

47. 47
Live example
Estera Kot Wireframes, prototypes and mockups

48. 48
+ UI Libraries (e.g. Material Design)
+ individual objects with interactivity
rather than screens only
+ advanced capabilities including
animations, transitions, screens
- long learning curve
- the tool may have too many features
for some project's needs
Estera Kot Wireframes, prototypes and mockups

49. 49
+ UI Libraries (e.g. Material Design)
+ individual objects with interactivity
rather than screens only
+ advanced capabilities including
animations, transitions, screens
- long learning curve
- the tool may have too many features
for some project's needs
Estera Kot Wireframes, prototypes and mockups

50. 50
+ UI Libraries (e.g. Material Design)
+ individual objects with interactivity
rather than screens only
+ advanced capabilities including
animations, transitions, screens
- long learning curve
- the tool may have too many features
for some project's needs
Estera Kot Wireframes, prototypes and mockups

51. 51
+ UI Libraries (e.g. Material Design)
+ individual objects with interactivity
rather than screens only
+ advanced capabilities including
animations, transitions, screens
- long learning curve
- the tool may have too many features
for some project's needs
Estera Kot Wireframes, prototypes and mockups

52. 52
+ UI Libraries (e.g. Material Design)
+ individual objects with interactivity
rather than screens only
+ advanced capabilities including
animations, transitions, screens
- long learning curve
- the tool may have too many features
for some project's needs
Estera Kot Wireframes, prototypes and mockups

53. 53
Estera Kot Wireframes, prototypes and mockups

54. 54

55. 55

56. 56

57. 57
+ how-to material
+ built-in library
+ flexible – prototype products for any
digital platform
- difficult == no user-friendly
- no templates
- user existing mock-ups as starting
point
Estera Kot Wireframes, prototypes and mockups

58. 58
+ how-to material
+ built-in library
+ flexible – prototype products for any
digital platform
- difficult == no user-friendly
- no templates
- user existing mock-ups as starting
point
Estera Kot Wireframes, prototypes and mockups

59. 59
+ how-to material
+ built-in library
+ flexible – prototype products for any
digital platform
- difficult == no user-friendly
- no templates
- user existing mock-ups as starting
point
Estera Kot Wireframes, prototypes and mockups

60. 60
+ how-to material
+ built-in library
+ flexible – prototype products for any
digital platform
- difficult == no user-friendly
- no templates
- user existing mock-ups as starting
point
Estera Kot Wireframes, prototypes and mockups

61. 61
+ how-to material
+ built-in library
+ flexible – prototype products for any
digital platform
- difficult == no user-friendly
- no templates
- user existing mock-ups as starting
point
Estera Kot Wireframes, prototypes and mockups

62. 62
+ how-to material
+ built-in library
+ flexible – prototype products for any
digital platform
- difficult == no user-friendly
- no templates
- user existing mock-ups as starting
point
Estera Kot Wireframes, prototypes and mockups

63. 63
Estera Kot Wireframes, prototypes and mockups

64. 64

65. 65

66. 66

67. 67

68. 68
Estera Kot Wireframes, prototypes and mockups

69. 69

70. 70
Estera Kot Wireframes, prototypes and mockups

71. 71
Estera Kot Wireframes, prototypes and mockups

72. 72

73. 73

74. 74
Material Design Lite
Estera Kot Wireframes, prototypes and mockups

75. 75

76. 76

77. 77

78. 78

79. 79
Summary

80. 80
Thanks
Estera Kot Wireframes, prototypes and mockups