Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
What Are The Differences?
PROTOTYPING
INVISION VS AXURE
— What is prototyping and why we need it?
— Prototyping tools criterias
— Prototype creation process
PROTOTYPING
AGENDA
— ...
Prototype is a draft version of a product that allows you to
explore your ideas and show the intention before investing ti...
Todd Zaki Warfel
Prototyping is practice for people
who design and make things. It’s not
simply another tool for your desi...
Fail early, fail fast and fail often
Shift the perspective: Show, don’t tell
Create something tangible
Show what the app’s...
IT REALLY MATTERS
How much prototype will cost
What you receive as result
What needs it cover
What pros and cons it has
1
...
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 prot...
INVISION KEY POINTS
Collaboration tool
Real-time to-do lists
Desktop/Web/Mobile
Version History and Syncing
UI Kit TETHR
1...
Simplify the feedback
process by having clients
and stakeholders
comment directly on your
designs. So long, confusing
emai...
With InVision Sync or
Dropbox, your prototypes
will automatically update
— every time you save
your source files. Plus,
InV...
Just upload your designs
and add hotspots to
transform your static
screens into clickable,
interactive prototypes
complete...
With 138 templates and
over 250 components at
your fingertips, you'll be
whipping out any kind of
UI in no time.
IOS DESIGN...
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
PROS
Easy to learn
Fast — Sign in and created first prototype in 10 minutes
Quick and intuitive (drag + drop)
Sharing and c...
CONS
Only good for working with existing mocks
No features for creating or modifying elements in the tool
Interactivity li...
AXURE KEY POINTS
HTML based prototype with no coding skills required
Ability to prototype responsive websites
Prototype an...
Start with the Core
Training to get a working
knowledge of Axure RP.
Continue with More
Adventures articles and
tutorials....
Create Word templates
with custom headers,
footers, title page, and
heading styles. Cenerate
your custom
documentation any...
AXURE
WORK
PROCESS
Environment overview
Prototyping Features
Project Sharing
Sitemap Pane
Widgets Pane
Masters pane
Page Properties Pane
Wireframe Pane
Widget Properties Pane
Dynamic Panel Manager Pa...
PROS
Good training and support documentation
Fine-grain controls for adding interactivity to
individual elements
Good for ...
CONS
Steep learning curve
Not easy to use for a first-time user
No device-specific templates or features
Designed to build o...
FREE
STARTER
PROFESSIONAL
TEAM
Axure RP
Axure RP PRO
$0/mo.
$15/mo.
$25/mo.
$100/mo.
$289
$589
THANK YOU!
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
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
Prototyping invision vs axure
Nächste SlideShare
Wird geladen in …5
×

Prototyping invision vs axure

20.055 Aufrufe

Veröffentlicht am

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

Veröffentlicht 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.)
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Andrii, Do I notice in the presentation that you use both applications? When do you use each program?
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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!

×