Prototyping invision vs axure

47
What Are The Differences? PROTOTYPING INVISION VS AXURE

Transcript of Prototyping invision vs axure

Page 1: Prototyping invision vs axure

What Are The Differences?

PROTOTYPINGINVISION VS AXURE

Page 2: 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

Page 3: Prototyping 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 userinteractions. From a series of hand-drawnmock-ups to printouts.

High-fidelity prototypes

Computer-based, allow realistic user interactions. Take you as close as possible toa true representation of the user interface.

Page 4: Prototyping invision vs axure

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.

Page 5: Prototyping invision vs axure

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?

Page 6: Prototyping invision vs axure

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

Page 7: Prototyping invision vs axure

COOPER PROTOTYPING TOOLSREVIEW AND RANKING

Page 8: Prototyping invision vs axure

COOPER PROTOTYPING TOOLSREVIEW AND RANKING

Page 9: Prototyping invision vs axure

PROTOTYPE CREATIONPROCESS

Asset creation

Prototype creation

Prototype/Design asset storage

Sharing and feedback with prototypes

Biggest frustrations with prototyping process

1

2

3

4

5

Page 10: Prototyping invision vs axure
Page 11: 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

Page 12: Prototyping invision vs axure

Simplify the feedback

process by having clients

and stakeholders

comment directly on your

designs. So long, confusing

email chains and

unrecorded input!

SEAMLESS DESIGNCOMMUNICATION

Page 13: Prototyping invision vs axure

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 CONTROLAND FILES SYNC

Page 14: Prototyping invision vs axure

Just upload your designs

and add hotspots to

transform your static

screens into clickable,

interactive prototypes

complete with gestures,

transitions, and

animations.

ARRANGE SCREENSIN PROTOTYPE

Page 15: Prototyping invision vs axure

With 138 templates and

over 250 components at

your fingertips, you'll be

whipping out any kind of

UI in no time.

IOS DESIGNUI KIT TETHR

Page 16: Prototyping invision vs axure

IN VISION SCREENLAYERS STRUCTURE

Visual

Page 17: Prototyping invision vs axure

IN VISION SCREENLAYERS STRUCTURE

Visual

Links

Page 18: Prototyping invision vs axure

IN VISION SCREENLAYERS STRUCTURE

Visual

Links

Comments

Page 19: Prototyping invision vs axure

IN VISION SCREENLAYERS STRUCTURE

Visual

Links

Comments

History

Page 20: Prototyping invision vs axure

INVISIONWORKPROCESS

Project Creation

Screens Upload

Prototype Creation

Project Sharing

Collaboration

Page 21: Prototyping invision vs axure
Page 22: Prototyping invision vs axure
Page 23: Prototyping invision vs axure
Page 24: Prototyping invision vs axure
Page 25: Prototyping invision vs axure
Page 26: Prototyping invision vs axure
Page 27: Prototyping invision vs axure
Page 28: Prototyping invision vs axure
Page 29: 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

Page 30: Prototyping invision vs axure

CONS

Only good for working with existing mocksNo features for creating or modifying elements in the tool

Interactivity limited to hotspots or timeoutsfor moving between screens

1

2

Page 31: Prototyping invision vs axure
Page 32: 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

— Rep console. Desktop (mockups based).

Create Prototypes of Websites & Apps Without Coding

CLIKABLE PROTOTYPES

AGENDA

Page 33: Prototyping invision vs axure

Start with the Core

Training to get a working

knowledge of Axure RP.

Continue with More

Adventures articles and

tutorials.

ONLINE TRAININGFOR AXURE PR

Page 34: Prototyping invision vs axure

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

Page 35: Prototyping invision vs axure

AXUREWORKPROCESS

Environment overview

Prototyping Features

Project Sharing

Page 36: Prototyping invision vs axure
Page 37: 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

Page 38: Prototyping invision vs axure
Page 39: Prototyping invision vs axure
Page 40: Prototyping invision vs axure
Page 41: Prototyping invision vs axure
Page 42: Prototyping invision vs axure
Page 43: Prototyping invision vs axure
Page 44: Prototyping invision vs axure

PROS

Good training and support documentation

Fine-grain controls for adding interactivity toindividual elements

Good for prototyping complex interaction behaviors

Built-in library of widgets that can be customized withspecific actions and behaviors

Flexible —can be used to prototype productsfor any digital platform

1

2

3

4

5

Page 45: Prototyping invision vs axure

CONS

Steep learning curveNot easy to use for a first-time user

No device-specific templates or features

Designed to build out screens in the tool whichreflects to use existing mock-ups as starting point

1

2

3

Page 46: Prototyping invision vs axure

FREE

STARTER

PROFESSIONAL

TEAM

Axure RP

Axure RP PRO

$0/mo.

$15/mo.

$25/mo.

$100/mo.

$289

$589

FREE

STARTER

PROFESSIONAL

TEAM

Axure RP

Axure RP PRO

$0/mo.

$15/mo.

$25/mo.

$100/mo.

$289

$589

Page 47: Prototyping invision vs axure

THANK YOU!