Axure Workshop

Cornelia

5 years agency experience

UX Design and user research

Human factors / Video games

 

Total, Danone, Caterpillar, Action against Hunger...

 

Axure user since 2009

@Orsoral

cornelia.laros@gmail.com

www.realites-paralleles.com

Working with Axure

Context

The process

Requirements analysis

Content inventory

Information architecture

Hi-fi wireframing

Low-fi wireframing

User journey / flow

Visual design

Front-end dev

Brand identity

research

design

test

The Team

UI

UX

DEV

IT

MKT

Director

PM/PO

Clients

Work application

Research,  AI, Wireframes, Simulations

e-commerce, mobile app,  corporate site...

Luxury / Brand creations

Wireframes

UI

UX

UX + UI = 

Workload distribution

Concept / Low-fidelity

Information architecture, static layout

Design / Hi-fidelity

Click through, few animations

Simulation / Testing

Fully interactive prototype

PM/PO

UX

UX + PM = 

Contribution to backlog and specifications

Axure omnitool

All you can make

Persona

Experience Map

IA

User flow

Concepts and drafts

Click through prototype

Hi-fidelity wireframes

Visual design

User research prototype

Specifications

All in one tool

1. Unique document
2. Flexible
3. Collaborative / iterative
4. Backups
5. Easy to transfer projects
6. Efficient export
7. User testing
8. Gets better each year

Drawbacks

• Steep learning curve
• Overkill
• Few import options
• Tool =/= skill

Axure tutorials

How to make an Axure prototype

Step 1. Drag and drop a rectangle into the canvas

Step 2.

Finish the prototype

Demo

Everything else, and shortcuts

Layers and groups

Properties and style, default behavior

Masters : edit once, use anywhere

Pages : manage prototype tree

Widgets : building blocks to compose

Interactions and notes and naming

Axure tutorials

Click through prototype

Add and name all pages for your final prototype

Drag and drop widgets into the main area

Resize and place widget content

Drag and drop handlers to resize

Drag and drop widgets to move

Hold shift to move by 10

Hold command / ctrl to rotate

 

Edit values at the top of  style pane

Rotate, flip, fit to text

Style widgets if wanted

Drag yellow triangle to round corners

Click circle to change shapes

On a selected widget...

Transform to a different type in drop down of style pane ex: title level, form field...

Add link

Select a widget, click create link in the properties tab (top left, first tab) then select the target page

Add link

Links and other interactions are noted by small blue numbers and are described in "Axure code"

Add link

Click preview to test if your link works, only works when prototype is open in A

Publish will generate an html you can browse offline, upload to an ftp, share as a zip file...

Share will upload your prototype to Axshare, requires to be logged in

Exercice

• Work in groups of 2/3
• Content site that allows to find and make appointments with a doctor
• Imagine the tablet version
• Draft 2 to 3 pages (home, content, doctor list, agenda view... )
• Use each widget at least once
• Link them together to make a click through prototype

Axure tutorials

Options

Tutorials

Fire up Axure and learn using it by practising in small groups

 

Basic

Click-through and iteractive prototypes (dynamic panels, anchors, links, animations)

 

Intermediate

Best practices to design and iterate efficiently (using styles, groups, collaborative prototypes, communicating with Axure...)

 

Advanced tutorials

Using responsive views, repeaters, variables, conditions...

Workshops

Work on projects, share experience, debate and feedback

 

Intermediate

Get help prototyping your project with axure

 

Share and deconstruct prototypes and learn from how they're made to improve your technique

 

Advanced

Let's make a game in Axure together and become power users

 

Complete the survey

Suggest other ideas !