Wireframes, prototypes and mockups - comparison of tools.

Wireframes, prototypes and mockups - comparison

of tools

Estera Kot 14/01/2016

2

To be more

Customer-friendly.

Estera Kot Wireframes, prototypes and mockups

3

Shift the perspective:

show don't tell.


4

Show what the app's

user experience will be like.


6

Create something

tangible.


7

Fail early.


9

Thanks to:

10

Wireframe vs Prototype vs Mockup

http://designmodo.com/wireframing-prototyping-mockuping/


11Estera Kot Wireframes, prototypes and mockups

12

Adobe Muse CC

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.


14

● Desktop app


● Html/css/js



15

● Desktop app


● Html/css/js



16

● Desktop app


● Html/css/js



17

● Creative Cloud Libraries

● Access stock photos from Adobe Stock.

● Cross-browser-compatible code


18





19





20

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

21

Preview Page in Browser

23

● Desktop/Web/Mobile

● Collaboration = feedback

● Version History and Syncing

● Arrange screens

● UI kit TETHR


24



● Version History and Syncing

● Arrange screens

● UI kit TETHR


26



● Version History and Sycing

● Arrange screens

● UI kit TETHR


27

Version control and files sync

28




● Arrange screens

● UI kit TETHR


29

Arrange screens in prototype

30




● Arrange screens

● UI kit TETHR


31

IOS design UI Kit Tethr

32

IN VISION screen layers structure


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


40



+ for free: basics.






41



+ for free: basics.






42



+ for free: basics.






43



+ for free: basics.






44



+ for free: basics.






45



+ for free: basics.






47

Live example


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


49







50







51







52







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


58

+ how-to material

+ built-in library



- no templates



59

+ how-to material

+ built-in library



- no templates



60

+ how-to material

+ built-in library



- no templates



61

+ how-to material

+ built-in library



- no templates



62

+ how-to material

+ built-in library



- no templates



74

Material Design Lite


79

Summary

80

Thanks


Wireframes, prototypes and mockups - comparison of tools.

Software

Transcript of Wireframes, prototypes and mockups - comparison of tools.