axure for dummies, that don't even know they are
TRANSCRIPT
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)
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.