Axure for Mobile Prototyping

Axure for MobileLennart Hennigs Axure World 2012

Table ofContents -  Axure’s Mobile Prototyping Capabilities -  Differences btw. Regular and Mobile Prototpyes -  Mobile Prototype Structure -  Making Axure (even more) mobile-friendly -  Shameless book promotion

Axure for Mobile? -  New OnSwipeLeft & OnSwipeRight events -  New options in "Set Panel state(s) to State(s)" action: next, previous, value http://www.axure.com/new-in-65!

Axure for Mobile? -  New OnSwipeLeft & OnSwipeRight events -  New options in "Set Panel state(s) to State(s)" action: next, previous, value -  Add app icons and splash screen -  Options to hide the address bar and browser navigation -  Block the page from scrolling -  Inertial dynamic panel scrolling (for iOS 5) -  Ability to format status bar style -  iPhone web-app features http://www.axure.com/new-in-65!

Axure for Mobile Capabilities Can do -  Create Mobile-friendly .html -  Offers swiping support -  Supports Basic Transitions -  UI Libraries for all mobile platforms

Axure for Mobile Capabilities Can do Can’t do -  Create Mobile-friendly .html -  Long press -  Offers swiping support -  Multi-touch gestures -  Supports Basic Transitions -  Editing the HTML -  UI Libraries for all mobile -  Responsive layouts platforms -  Orientation Change detection

Artifacts of Axure Wireframes Prototypes Specifications

Artifacts of Axure for Mobile Wireframes Prototypes UI Flows Specifications

Page-based Wireframes Web & PC

Page-based Wireframes for Mobile -  You can place your wireframes inside a mobile -  Good for viewing on a larger screen.

Page-based Wireframes with a frameset -  You can place your wireframes inside a mobile -  Good for viewing on a larger screen.

Properties ofMobile Experiences -  Transitions -  Animations -  Gestures Support

Panel-based Wireframes -  Create a Dynamic Panel with states for each key screen

Panel-based Wireframes -  Create a Dynamic Panel with states for each key screen -  Create Dynamic Panels for key screen and its variants

Panel-based Wireframes -  Create a Dynamic Panel with states for each key screen -  Create Dynamic Panels for key screen and its variants -  Turn the main panel into a Master (and other key screens)

How to MakeAxure Mobile-friendly 1.  Define your screen estate 2.  Configure your Mobile Settings 3.  Get some mobile Axure resources 4.  Make the .html output more mobile friendly 5.  Embed fonts 6.  Let Axure auto-generate QR codes

Get some Mobile Axure Resources -  Axure Libraries -  Photoshop Resources -  Icons Libraries !!!!!! http://www.axureformobile.com/mobile-resources/!

Make Axure’s .html Mobile-friendlyWell, it’s actually the .css code… !

Make Axure’s .html Mobile-friendlyWell, it’s actually the .css code… ! ! Contents > Resources > DefaultSettings > ! ! !! ! ! Prototype_Files > resources > css!! ! ! Axure > Axure RP Pro 6.5 > DefaultSettings > ! !! ! ! Prototype_Files > resources > css!!

Make Axure’s .html Mobile-friendlyWell, it’s actually the .css code… ! ! Contents > Resources > DefaultSettings > ! ! !! ! ! Prototype_Files > resources > css!! ! ! Axure > Axure RP Pro 6.5 > DefaultSettings > ! !! ! ! Prototype_Files > resources > css!!axure_rp_page.css!! * {! !-webkit-tap-highlight-color:rgba(0,0,0,0);! !outline: none; ! !-webkit-text-size-adjust: none; ! !-webkit-touch-callout: none; ! !-webkit-user-select: none; } !

Let Axure Auto-generate QR codes

Let Axure Auto-generate QR codes ! ! Contents > Resources > DefaultSettings >! ! ! Prototype_Files > plugins > sitemap!! ! ! Axure > Axure RP Pro 6.5 > DefaultSettings > ! !! ! ! Prototype_Files > plugins > sitemap!!sitemap.js !

Let Axure Auto-generate QR codes Line 84: !treeUl += "<img id =qr />”;!

Let Axure Auto-generate QR codes Line 84: !treeUl += "<img id =qr />”; Line 37:! !$(#qr).attr(src,"http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl="+pageLoc); !!

Let Axure Auto-generate QR codes

Axure for Mobile – the ebook -  Mobile App Design Basics -  Viewing your Prototype -  What to Prototype -  Creating Documentation -  Setting up Axure -  Appendix I – Axure Basics -  Building a mobile prototype -  Appendix II – Mobile Platform -  Presenting your prototype Cheat Sheets -  Mobile Interaction Paradigms -  Animations and Transitions Coming very soon…

Please stop by if you want to Find out more. http:/ /www.axureformobile.com LennartHennigs

Resources used in the presentation - Chris Spooner’s Sketch Icons http://blog.spoongraphics.co.uk/!!-  Sketch Rockwell Font http://www.urbanfonts.com/fonts/Sketch_Rockwell.htm!!-  Hand of Sean Font !http://www.dafont.com/hand-of-sean.font!!

http://arquiteturadeinformacao.com	5762
http://www.iphone-entreprise.com	297
http://www.scoop.it	9
http://julianaconstantino.wordpress.com	8
http://webcache.googleusercontent.com	5
https://si0.twimg.com	3
http://www.axureformobile.com	2
https://twitter.com	1

Axure for Mobile Prototyping

by Lennart Hennigs on Jul 27, 2012

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 6,087

Statistics

Axure for Mobile Prototyping Presentation Transcript