Hands on Axure #01

Axure interface tour

Creating a simple click through prototype

Cornelia

6 years agency experience

UX Design and user research

Human factors / Video games

 

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

 

Axure user since 2009

@Orsoral

cornelia.works

www.realites-paralleles.com

How to make an Axure prototype

Step 1. Drag and drop a rectangle into the canvas

Step 2.

Finish the prototype

Demo

(More info on cornelia.works/)

Interface overview

What each area does

Pages : manage prototype tree

Widgets : building blocks to compose

Masters : edit once, use anywhere

Interactions and notes and naming

Properties and style, default behavior

Layers and groups

Everything else, and shortcuts

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