Prototyping with Axure

Liz Xu2014-12-04

A powerful UX design tool

Agenda

⁻ What is Axure

⁻ Basics of Axure RP

⁻ The Pros and Cons of Axure RP

⁻ Project Lifecycle with Axure

⁻ Other UX tools

What is Axure ?

Easy wireframing & advanced prototyping

- Fancy tricks, no programming -

Why Axure?

− Page based

− You can connect pages & use logic

− Adjust the level of fidelity

− Outputs .html

− Publish and Share

This is where the magic happens …

Level of Interactivity.- Screen-by-screen.

- You show where the user clicks.

- Power to the people.

- Let the user click through a use case.

- Limited set of options.

- The prototype looks complete but only certain use cases are done.

- Real experience

- !!!Never try to do this! Seriously!!!

Basics of Axure RP

Widgets

-Common

-Forms

-Menus and Tables

- More … (Icons, layouts, complete UI sets, etc. )

* Some free/pretty cheap

* You can create your own

Those tiny pieces that form your prototype

Masters

-Ideal for header, footer, logo, sidebar, menus …

-Can convert widgets to master

- masters inside masters

Create once, edit once, apply to all

Get your ideas developed as you imagined them

- Notes, Annotations, Specifications & Feedback -

Page NotesTo the client, stakeholders and devs

AnnotationsTo the client, stakeholders and devs

Interactions

-Events

-onClick, onMove, onShow…

-Actions/Methods

-Wait, Set, Move, Scroll, Show, Hide

- Conditions

-If, Else if, Else

Would be a super boring prototype without them

Adaptive Views

-Different elements between devices / browser sizes

-Custom breakpoints

-Fluid elements

Easy responsive wireframing

Export

-Sitemap

-Add custom logo

-Mobile Logo

-Fonts

-Notes

Image, HTML, Mobile

Share

-Please go to axshare.com to register an account

-Upload your .RP file to Axure

-Set up (or not) password

-Send the link to the people you want to share it with

weblink

Help & Resources

-Online Training http://www.axure.com/learn

-Axure Chinese Community http://www.axure.org/axure/

-Axure Forum http://www.axure.com/c/forum.php

Axure’s online resources and community

The Pros and Cons

Pros- Easy and quick designing

- Axure provides tons of online libraries

- Ability to include interactions

- All in one prototyping – Axure makes it possible to move progressively from placeholders to high fidelity prototypes in the same program.

- Text elements come standard with dummy text (“Lorem ipsum”) decreasing designing time and providing a real feel when composing placeholders.

- Axure allows you to post your prototype in a secure website so stakeholders can interact with it (provide users with link and optional password optional).

Cons

-The dynamic panels can be a pain to deal with

-Editing shapes and the shape of photos in Axure can be difficult, also often requiring other libraries of shapes or imported images.

-Axure does not have an extensive font selection.

-It would be beneficial for developers when coding a project if Axure included more CSS options that developers could inherit from.

Project Lifecycle with Axure

-Before project begin, concepts must be decided

-Axure allows quick concept design, show it to others, get feedbacks from the whole team and make change fast

-Axure assist in bridging the gap between designers and developers with interactions and specification document

-QA can use Axure’s outcome, prototype and specification document to create User cases

Other UX Tools

Balsamiq

Keynote / PowerPoint

OmniGraffle Pro

Thank You!

Feel free to ask, to share, to teach me