For Dummies, That Don’t Even Know They Are

Oscar GonzálezDuppy Oscar

@duppy_ocioDuppy Oscar

- UX Architect at Accenture/Avanade

- UX / Front-end Consultant

- Exa UDEM (LTI)

duppy@chic-chic.mx

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

More than most of the people think

- Often an underrated tool or used poorly –(by me)

Easy wireframing & advanced prototyping

- Fancy tricks, no programming -

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)

You are a PRO- Act Like One -

Other tools(That I don’t use)

OmnigraffleBalsamiq Powerpoint

Who uses Axure?Everybody does

• Usability Professionals Association (UXPA)• Microsoft• Accenture• Avanade• ….

Getting to know Axure

WidgetsThose tiny pieces that form your prototype

• Common• Forms• Menus and Table

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

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

Pages• Sibblings• Styles• Events• -onLoad, onResize,

• Variables • Background• Sketchness• B&W

Widget LibrariesAssets 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

• 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.

StylesGive format to your widgets

ButtonsHTML or Button Shape?

HTML Button:- HTML (obviously)- No styles- onClick- onMove- onShow- onHide

Button Shape:- Shape- Styles- Interaction Styles- onClick- onMouseEnter- onMouseOutEtc.

MenusUh uh, Not the same as ShapesPretty 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”

MastersCreate once, edit once, apply to all

• Ideal for header, footer, logo, sidebar, menus…• Can convert Widgets to master• Masters inside Masters

• 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)

TablesBasic cells and columns to present data

RepeatersThe main reason to upgrade to Axure 7• Horizontal• Vertical• Grid• Sort• Pagination• Filtering• Add / Remove

rows/elements

Dynamic PanelsAxure’s Magic containers

• Names• States• Controlled by Events &

Conditionals

Very important to name them!

Get your ideas developed as you imagined them

- Notes, Annotations, Specifications & Feedback -

Page NotesTo the client, stakeholders and devs

AnnotationsCreate notes widget by widget, field by field

Specification documentDocumentation made easier, still tedious though

ProtonotesRemote feedback from clients & coworkers.

http://www.protonotes.com/

InteractionsWould 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

EventsThey trigger an InteractionFirst name the element, then add the interaction wanted

• onLoad• onMouseEnter• onClick• onDrag• Etc…

Actions / MethodsGet the prototype to do stuff

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…

Manual ConditionalsThey don’t have any logic, just type anything, they’ll show

Logic conditionalsProgramming for dummies

- Can read variables, shapes styles, states, values, etc…

- Equals, Is not equal, greater than, contains, etc …

Adaptive ViewsEasy responsive wireframing

• Different elements between devices / browser sizes• Custom breakpoints• Fluid elements

BreakpointsChoose from presets or set yours

ExampleDesktop

ExampleMobile

ExportImage, HTML, Mobile• Sitemap• Add custom logo• Mobile Logo• Fonts• Splash screens for mobile• Notes• Viewport tag

* May need axure viewer plugin

ExportImage, HTML, Mobile• Sitemap• Add custom logo• Mobile Logo• Fonts• Splash screens for mobile• Notes• Viewport tag

* May need axure viewer plugin

Things to care aboutWhen going mobile• Screen size• Elements that should stay

at the top or bottom (pin to browser)• Scroll/Drag interactions

Exporting for mobileMake it look like a real app• Ensure to include

Viewport tag• Splash screen• Status bar• Vertical Scrolling• Homescreen Icon

• 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 mobileMake it look like a real app

Site 44Dropbox folders into websites = Easy sharing prototypes

• No need to email big files• Super easy to update• Cheap• Looks super pro• Custom domain

Thank YouFeel free to ask, to share, to teach me.