Prototyping invision vs axure

Post on 03-Aug-2015

378 views 2 download

Tags:

Transcript of Prototyping invision vs axure

What Are The Differences?

PROTOTYPINGINVISION 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 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.

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 TOOLSREVIEW AND RANKING

COOPER PROTOTYPING TOOLSREVIEW AND RANKING

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

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 DESIGNCOMMUNICATION

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

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

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

IN VISION SCREENLAYERS STRUCTURE

Visual

IN VISION SCREENLAYERS STRUCTURE

Visual

Links

IN VISION SCREENLAYERS STRUCTURE

Visual

Links

Comments

IN VISION SCREENLAYERS STRUCTURE

Visual

Links

Comments

History

INVISIONWORKPROCESS

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 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 mocksNo features for creating or modifying elements in the tool

Interactivity limited to hotspots or timeoutsfor moving between screens

1

2

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

Start with the Core

Training to get a working

knowledge of Axure RP.

Continue with More

Adventures articles and

tutorials.

ONLINE TRAININGFOR 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

AXUREWORKPROCESS

Environment overview

Prototyping Features

Project Sharing

Sitemap Pane

Widgets Pane

Masters pane

Page Properties Pane

Wireframe Pane

Widget Properties Pane

Dynamic Panel Manager Pane

Main Menu и Toolbar

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

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

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

THANK YOU!