Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Prototyping invision vs axure

20,403 views

Published on

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

Published in: Design
  • @David Bone , it depends. Sometimes wireframing is better to do with axure, some times with balsamiq mockups or sketch + invision. In my cases it depends on fidelity of flow wireframes I'm describing. UI based prototype also can be created with invision or axure (definitely experience is different). My suggestion is: - Use Invision when you have less time to describe flow. Also it is good for mobile solutions and sites. - Use Axure when you feel that it will be a lot of screens in invision for a trivial flow interaction (like enterprise technology cases) or you need really high fidelity prototype with rich interaction (like concept presentation, communication not trivial UI for development, user testing, e.t.c.)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Andrii, Do I notice in the presentation that you use both applications? When do you use each program?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Prototyping invision vs axure

  1. 1. What Are The Differences? PROTOTYPING INVISION VS AXURE
  2. 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. 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. 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. 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. 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. 7. COOPER PROTOTYPING TOOLS REVIEW AND RANKING
  8. 8. COOPER PROTOTYPING TOOLS REVIEW AND RANKING
  9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. IN VISION SCREEN LAYERS STRUCTURE Visual
  16. 16. IN VISION SCREEN LAYERS STRUCTURE Visual Links
  17. 17. IN VISION SCREEN LAYERS STRUCTURE Visual Links Comments
  18. 18. IN VISION SCREEN LAYERS STRUCTURE Visual Links Comments History
  19. 19. INVISION WORK PROCESS Project Creation Screens Upload Prototype Creation Project Sharing Collaboration
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. AXURE WORK PROCESS Environment overview Prototyping Features Project Sharing
  26. 26. Sitemap Pane Widgets Pane Masters pane Page Properties Pane Wireframe Pane Widget Properties Pane Dynamic Panel Manager Pane Main Menu и Toolbar
  27. 27. 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
  28. 28. 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
  29. 29. FREE STARTER PROFESSIONAL TEAM Axure RP Axure RP PRO $0/mo. $15/mo. $25/mo. $100/mo. $289 $589
  30. 30. THANK YOU!

×