Axure for dummies, that don't even know they are

  • Published on

  • View

  • Download


PowerPoint Presentation For Dummies, That Donât Even Know They Are Oscar González Duppy Oscar @duppy_ocio Duppy 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) Omnigraffle Balsamiq Powerpoint Who uses Axure? Everybody does Usability Professionals Association (UXPA) Microsoft Accenture Avanade â¦. Getting to know Axure Widgets Those 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 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 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 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. 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â Masters Create 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) Tables Basic cells and columns to present data Repeaters The main reason to upgrade to Axure 7 Horizontal Vertical Grid Sort Pagination Filtering Add / Remove rows/elements Dynamic Panels Axureâ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 Notes To the client, stakeholders and devs Annotations Create notes widget by widget, field by field Specification document Documentation made easier, still tedious though Protonotes Remote feedback from clients & coworkers. 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 Events They trigger an Interaction First name the element, then add the interaction wanted onLoad onMouseEnter onClick onDrag Etc⦠Actions / Methods Get 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 Conditionals They donât have any logic, just type anything, theyâll show Logic conditionals Programming for dummies Can read variables, shapes styles, states, values, etc⦠Equals, Is not equal, greater than, contains, etc ⦠Adaptive Views Easy responsive wireframing Different elements between devices / browser sizes Custom breakpoints Fluid elements Breakpoints Choose from presets or set yours Example Desktop Example Mobile Export Image, HTML, Mobile Sitemap Add custom logo Mobile Logo Fonts Splash screens for mobile Notes Viewport tag * May need axure viewer plugin Export Image, HTML, Mobile Sitemap Add custom logo Mobile Logo Fonts Splash screens for mobile Notes Viewport tag * May need axure viewer plugin Things to care about When going mobile Screen size Elements that should stay at the top or bottom (pin to browser) Scroll/Drag interactions Exporting for mobile Make 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 mobile Make it look like a real app 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 Thank You Feel free to ask, to share, to teach me.