How to create prototype and communicate it to other people. Well known prototyping tools pros & cons.

1. What Are The Differences?
PROTOTYPING
INVISION VS AXURE

2. — What is prototyping and why we need it?
— Prototyping tools criterias
— Prototype creation process
PROTOTYPING
AGENDA
— Features of services
— Work process
— PROS & CONS
INVISION VS AXURE

3. Prototype is a draft version of a product that allows you to
explore your ideas and show the intention before investing time
and money into development.
WHAT IS PROTOTYPE?
Low-fidelity
Often paper-based and do not allow user
interactions. From a series of hand-drawn
mock-ups to printouts.
High-fidelity prototypes
Computer-based, allow realistic user
interactions. Take you as close as possible to
a true representation of the user interface.

4. Todd Zaki Warfel
Prototyping is practice for people
who design and make things. It’s not
simply another tool for your design
toolkit — it’s a design philosophy.
“

5. Fail early, fail fast and fail often
Shift the perspective: Show, don’t tell
Create something tangible
Show what the app’s user experience will be like
WHY WE NEED IT?

6. IT REALLY MATTERS
How much prototype will cost
What you receive as result
What needs it cover
What pros and cons it has
1
2
3
4

7. COOPER PROTOTYPING TOOLS
REVIEW AND RANKING

8. COOPER PROTOTYPING TOOLS
REVIEW AND RANKING

9. PROTOTYPE CREATION
PROCESS
Asset creation
Prototype creation
Prototype/Design asset storage
Sharing and feedback with prototypes
Biggest frustrations with prototyping process
1
2
3
4
5

11. INVISION KEY POINTS
Collaboration tool
Real-time to-do lists
Desktop/Web/Mobile
Version History and Syncing
UI Kit TETHR
1
2
3
4
5

12. Simplify the feedback
process by having clients
and stakeholders
comment directly on your
designs. So long, confusing
email chains and
unrecorded input!
SEAMLESS DESIGN
COMMUNICATION

13. With InVision Sync or
Dropbox, your prototypes
will automatically update
— every time you save
your source files. Plus,
InVision automatically
tracks version history, so
you can check out previous
designs anytime, complete
with comments, and even
revert with a single click.
VERSION CONTROL
AND FILES SYNC

14. Just upload your designs
and add hotspots to
transform your static
screens into clickable,
interactive prototypes
complete with gestures,
transitions, and
animations.
ARRANGE SCREENS
IN PROTOTYPE

15. With 138 templates and
over 250 components at
your fingertips, you'll be
whipping out any kind of
UI in no time.
IOS DESIGN
UI KIT TETHR

16. IN VISION SCREEN
LAYERS STRUCTURE
Visual

17. IN VISION SCREEN
LAYERS STRUCTURE
Visual
Links

18. IN VISION SCREEN
LAYERS STRUCTURE
Visual
Links
Comments

19. IN VISION SCREEN
LAYERS STRUCTURE
Visual
Links
Comments
History

20. INVISION
WORK
PROCESS
Project Creation
Screens Upload
Prototype Creation
Project Sharing
Collaboration

29. PROS
Easy to learn
Fast — Sign in and created first prototype in 10 minutes
Quick and intuitive (drag + drop)
Sharing and commenting system for collecting feedback
Asset management features
Simple web display of prototype
Options for adding animation to page transitions (mobile only)
Support for mobile/touch gestures
1
2
3
4
5
6
7
8

30. CONS
Only good for working with existing mocks
No features for creating or modifying elements in the tool
Interactivity limited to hotspots or timeouts
for moving between screens
1
2

32. AXURE KEY POINTS
HTML based prototype with no coding skills required
Ability to prototype responsive websites
Prototype animations and transitions
Detect and work with gestures
Online sharing
Libraries with common UI elements
1
2
3
4
5
6

33. Start with the Core
Training to get a working
knowledge of Axure RP.
Continue with More
Adventures articles and
tutorials.
ONLINE TRAINING
FOR AXURE PR

34. Create Word templates
with custom headers,
footers, title page, and
heading styles. Cenerate
your custom
documentation any time
and as many times as you
update the design.
DOCUMENTATION
& COLLABORATION

35. AXURE
WORK
PROCESS
Environment overview
Prototyping Features
Project Sharing

37. Sitemap Pane
Widgets Pane
Masters pane
Page Properties Pane
Wireframe Pane
Widget Properties Pane
Dynamic Panel Manager Pane
Main Menu и Toolbar

44. PROS
Good training and support documentation
Fine-grain controls for adding interactivity to
individual elements
Good for prototyping complex interaction behaviors
Built-in library of widgets that can be customized with
specific actions and behaviors
Flexible —can be used to prototype products
for any digital platform
1
2
3
4
5

45. CONS
Steep learning curve
Not easy to use for a first-time user
No device-specific templates or features
Designed to build out screens in the tool which
reflects to use existing mock-ups as starting point
1
2
3

46. FREE
STARTER
PROFESSIONAL
TEAM
Axure RP
Axure RP PRO
$0/mo.
$15/mo.
$25/mo.
$100/mo.
$289
$589

47. THANK YOU!