Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Prototyping invision vs axure

•
•
Andrii Rusakov
Andrii Rusakov

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

Related slideshows

UI/UX Design in Agile process
UI/UX Design in Agile process UI/UX Design in Agile process
UI/UX Design in Agile process
 
UCD and low-fidelity prototyping
UCD and low-fidelity prototypingUCD and low-fidelity prototyping
UCD and low-fidelity prototyping
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical Guide
 
1 of 47
Download to read offline
What Are The Differences? PROTOTYPING INVISION VS AXURE
— 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
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.
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. “
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?
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
COOPER PROTOTYPING TOOLS REVIEW AND RANKING
COOPER PROTOTYPING TOOLS REVIEW AND RANKING
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
Prototyping invision vs axure
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
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
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
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
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
IN VISION SCREEN LAYERS STRUCTURE Visual
IN VISION SCREEN LAYERS STRUCTURE Visual Links
IN VISION SCREEN LAYERS STRUCTURE Visual Links Comments
IN VISION SCREEN LAYERS STRUCTURE Visual Links Comments History
INVISION WORK PROCESS Project Creation Screens Upload Prototype Creation Project Sharing Collaboration
Prototyping invision vs axure
Prototyping invision vs axure
Prototyping invision vs axure
Prototyping invision vs axure
Prototyping invision vs axure
Prototyping invision vs axure
Prototyping invision vs axure
Prototyping invision vs axure
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
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
Prototyping invision vs axure
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
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
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
AXURE WORK PROCESS Environment overview Prototyping Features Project Sharing
Prototyping invision vs axure
Sitemap Pane Widgets Pane Masters pane Page Properties Pane Wireframe Pane Widget Properties Pane Dynamic Panel Manager Pane Main Menu и Toolbar
Prototyping invision vs axure
Prototyping invision vs axure
Prototyping invision vs axure
Prototyping invision vs axure
Prototyping invision vs axure
Prototyping invision vs axure
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
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
FREE STARTER PROFESSIONAL TEAM Axure RP Axure RP PRO $0/mo. $15/mo. $25/mo. $100/mo. $289 $589
THANK YOU!

More Related Content

Prototyping invision vs axure

  • 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
  • 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
  • 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