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
- Unique document
- Flexible
- Collaborative / iterative
- Backups
- Easy to transfer projects
- Efficient export
- User testing
- 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 !