In this course i present an overview of Axure and what you can do with it. The most important, i try to point you in the right direction to become an expert by yourself. In this presentation i cover the following subjects: - Basic widgets for wireframing - Prototyping: Events, Interactions and Conditionals - Exporting for devices (mobile and desktop) - Documentation and Notes - Tips, a lot of them - Connect Axure prototypes with third party services

1. For Dummies, That Don’t Even Know They Are

2. Oscar González
Duppy Oscar
@duppy_ocioDuppy Oscar
- UX Architect at Accenture/Avanade
- UX / Front-end Consultant
- Exa UDEM (LTI)
duppy@chic-chic.mx

3. What to expect from this course
• Overview of Axure and what you can do with it
• Wireframing / prototyping
• Exporting for devices
• Tips, a lot of them
• Connect Axure prototypes with third party services
Most important:
Point you in the right direction to become an expert by yourself

4. More than most of the
people think
- Often an underrated tool or used poorly –
(by me)

5. Easy wireframing &
advanced prototyping
- Fancy tricks, no programming -

6. Why Axure?
The best tool is the one that's with you. (And know how to use)
• Wireframing
• Responsive wireframing
• Advanced Prototyping for both desktop
and mobile
• Notes,Specification sheets
• Publish and Share
• Easy to use
• Libraries
• Generate HTML that can be hacked (for
good)

7. You are a PRO
- Act Like One -

8. Other tools
(That I don’t use)
OmnigraffleBalsamiq Powerpoint

9. Who uses Axure?
Everybody does
• Usability Professionals Association (UXPA)
• Microsoft
• Accenture
• Avanade
• ….

10. Getting to know
Axure

12. Widgets
Those tiny pieces that form your prototype
• Common
• Forms
• Menus and Table

13. They may look the same,
but they are not.
(trust me)

14. Differences
• Interactions
• Events
• Styles
• Custom properties
• Code generated when prototying

15. Pages
• Sibblings
• Styles
• Events
• -onLoad, onResize,
• Variables
• Background
• Sketchness
• B&W

16. Widget Libraries
Assets that can be downloaded and used.
- Forms
- Widgets
- Interactions
- Icons
- Layouts
- Complete UI Sets
( iOS, Android, Windows, Facebook, Bootstrap, etc)
*Some free/pretty cheap
*You can create your own

17. • Labels
• Forms
• H1, H2, H3, H4
• Paragraph
• Shapes
• Page
• Row
- Just like CSS, styles can be re-used
- Can be applied by an action or an interaction.
Styles
Give format to your widgets

18. Buttons
HTML or Button Shape?
HTML Button:
- HTML (obviously)
- No styles
- onClick
- onMove
- onShow
- onHide
Button Shape:
- Shape
- Styles
- Interaction Styles
- onClick
- onMouseEnter
- onMouseOut
Etc.

19. Menus
Uh uh, Not the same as Shapes
Pretty helpful because they have
• Sub Menus (Dropdowns)
• Interactions (MouseDown, Selected)
• Events (onFocus, onClick, onLostFocus)
• Styles
• States: Active / Inactive
*Helps a lot using them in a master page
*States can be changed “onLoad Page”

20. Masters
Create once, edit once, apply to all
• Ideal for header, footer, logo, sidebar,
menus…
• Can convert Widgets to master
• Masters inside Masters

22. • Styles
• Interactions
- Table rows cannot be added or removed dynamically
- There is no way to sort or filter table cells in Axure.
- Can be copied from Excel (Right click » Paste special »
Paste to table)
Tables
Basic cells and columns to present data

23. Repeaters
The main reason to upgrade to Axure 7
• Horizontal
• Vertical
• Grid
• Sort
• Pagination
• Filtering
• Add / Remove
rows/elements

24. Dynamic Panels
Axure’s Magic containers
• Names
• States
• Controlled by Events & Conditionals
Very important to name them!

29. Get your ideas developed as
you imagined them
- Notes, Annotations, Specifications & Feedback -

30. Page Notes
To the client, stakeholders and devs

31. Annotations
Create notes widget by widget, field by field

32. Specification document
Documentation made easier, still tedious though

33. Protonotes
Remote feedback from clients & coworkers.
http://www.protonotes.com/

34. Interactions
Would be a super boring prototype without them
• Events
• onLoad, Hover, onClick, onDrag
• Actions / Methods
• Wait, Set, Move, ScrollTo, Show, Hide,
• Conditionals
• If, Else if, Else
They cannot be printed out

35. Events
They trigger an Interaction
First name the element, then add the
interaction wanted
• onLoad
• onMouseEnter
• onClick
• onDrag
• Etc…

36. Actions / Methods
Get the prototype to do stuff

37. Conditionals (cases)
If, else, else if…. Like in every language
- Can be logical or manual
- They trigger events
- Can read variables, shapes styles, states,
values, etc…

38. Manual Conditionals
They don’t have any logic, just type anything, they’ll show

39. Logic conditionals
Programming for dummies
- Can read variables,
shapes styles, states,
values, etc…
- Equals, Is not equal,
greater than, contains,
etc …

40. Adaptive Views
Easy responsive wireframing
• Different elements between
devices / browser sizes
• Custom breakpoints
• Fluid elements

41. Breakpoints
Choose from presets or set yours

42. Example
Desktop

43. Example
Mobile

44. Export
Image, HTML, Mobile
• Sitemap
• Add custom logo
• Mobile Logo
• Fonts
• Splash screens for mobile
• Notes
• Viewport tag
* May need axure viewer plugin

45. Export
Image, HTML, Mobile
• Sitemap
• Add custom logo
• Mobile Logo
• Fonts
• Splash screens for mobile
• Notes
• Viewport tag
* May need axure viewer plugin

47. Things to care about
When going mobile
• Screen size
• Elements that should stay at the
top or bottom (pin to browser)
• Scroll/Drag interactions

48. Exporting for mobile
Make it look like a real app
• Ensure to include Viewport
tag
• Splash screen
• Status bar
• Vertical Scrolling
• Homescreen Icon

49. • Host your HTML somewhere:
FTP, LAN, Dropbox, Google Drive)
• Open your prototype in the device
• Click on the options menu and add
to start.
Exporting for mobile
Make it look like a real app

51. Site 44
Dropbox folders into websites = Easy sharing prototypes
• No need to email big files
• Super easy to update
• Cheap
• Looks super pro
• Custom domain

52. Thank You
Feel free to ask, to share, to teach me.