Axure for Mobile Prototyping

19,476 views

Published on

This is the presentation I gave at the http://www.axureworld.org on "Mobile Prototyping with Axure."
This is content of my ebook on the same topic. Visit http://www.axureformobile.com for more details

Published in: Technology, Business
3 Comments
35 Likes
Statistics
Notes
No Downloads
Views
Total views
19,476
On SlideShare
0
From Embeds
0
Number of Embeds
9,248
Actions
Shares
0
Downloads
204
Comments
3
Likes
35
Embeds 0
No embeds

No notes for slide

Axure for Mobile Prototyping

  1. 1. Axure for Mobile Lennart  Hennigs   Axure  World  2012  
  2. 2. Hey,  I  made  a  new  presentation  covering  Axure  7.0.   Check  it  out!   http://bit.ly/a4m_presentation!
  3. 3. http://www.axureformobile.com   @LennartHennigs   I  like  this  topic  so   much,  I  even  wrote  a   book  about  it…  
  4. 4. Table  of Contents   -­  Axure’s  Mobile  Prototyping  Capabilities     -­  Differences  btw.  Regular  and  Mobile  Prototpyes   -­  Mobile  Prototype  Structure   -­  Making  Axure  (even  more)  mobile-­friendly   -­  Shameless  book  promotion  
  5. 5. 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!
  6. 6. 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!
  7. 7. Axure for Mobile     Capabilities   Can  do   -­  Create  Mobile-­friendly  .html   -­  Offers  swiping  support   -­  Supports  Basic  Transitions   -­  UI  Libraries  for  all  mobile   platforms    
  8. 8. Axure for Mobile     Capabilities   Can  do   -­  Create  Mobile-­friendly  .html   -­  Offers  swiping  support   -­  Supports  Basic  Transitions   -­  UI  Libraries  for  all  mobile   platforms     Can’t  do   -­  Long  press   -­  Multi-­touch  gestures   -­  Editing  the  HTML   -­  Responsive  layouts   -­  Orientation  Change   detection  
  9. 9. Artifacts of Axure   Prototypes  Wireframes   Specifications  
  10. 10. Artifacts of Axure  for  Mobile       UI  Flows   Specifications   Prototypes  Wireframes  
  11. 11. Page-­based   Wireframes   Web  &  PC    
  12. 12. Page-­based   Wireframes  for  Mobile   -­  You  can  place  your  wireframes  inside  a  mobile   -­  Good  for  viewing  on  a  larger  screen.  
  13. 13. Page-­based   Wireframes  with  a  frameset   -­  You  can  place  your  wireframes  inside  a  mobile   -­  Good  for  viewing  on  a  larger  screen.  
  14. 14. Properties  of Mobile Experiences   -­  Transitions     -­  Animations     -­  Gestures  Support    
  15. 15. Panel-­based   Wireframes   -  Create  a  Dynamic  Panel  with   states  for  each  key  screen  
  16. 16. Panel-­based   Wireframes   -  Create  a  Dynamic  Panel  with   states  for  each  key  screen   -  Create  Dynamic  Panels  for  key   screen  and  its  variants  
  17. 17. 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)  
  18. 18. How  to  Make Axure 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  
  19. 19. Get  some     Mobile Axure Resources   -­  Axure  Libraries   -­  Photoshop  Resources     -­  Icons  Libraries   ! ! ! ! ! ! http://www.axureformobile.com/mobile-resources/!
  20. 20. Make  Axure’s     .html Mobile-friendly Well,  it’s  actually  the  .css  code…   !      
  21. 21. Make  Axure’s     .html Mobile-friendly Well,  it’s  actually  the  .css  code…     ! ! Contents > Resources > DefaultSettings > ! ! !! ! ! Prototype_Files > resources > css! ! ! ! Axure > Axure RP Pro 6.5 > DefaultSettings > ! !! ! ! Prototype_Files > resources > css! !
  22. 22. Make  Axure’s     .html Mobile-friendly Well,  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; } !
  23. 23. Let  Axure     Auto-generate QR codes
  24. 24. Let  Axure     Auto-generate QR codes
  25. 25. Let  Axure     Auto-generate QR codes
  26. 26. 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 !
  27. 27.   Line  84:   !treeUl += "<img id ='qr' />”;! Let  Axure     Auto-generate QR codes
  28. 28.   Line  84:   !treeUl += "<img id ='qr' />”;   Let  Axure     Auto-generate QR codes Line  37:! !$('#qr').attr('src',"http://chart.apis.google.com/ chart?cht=qr&chs=200x200&chl="+pageLoc); ! !
  29. 29. Let  Axure     Auto-generate QR codes  
  30. 30. Axure for Mobile  –  the  ebook   -  Mobile  App  Design  Basics   -  What  to  Prototype   -  Setting  up  Axure   -  Building  a  mobile  prototype   -  Presenting  your  prototype   -  Mobile  Interaction  Paradigms   -  Animations  and  Transitions   -  Viewing  your  Prototype   -  Creating  Documentation   -  Appendix  I  –  Axure  Basics   -  Appendix  II  –  Mobile  Platform   Cheat  Sheets       Coming  very  soon…  
  31. 31. http://www.axureformobile.com   LennartHennigs   Please  stop  by  if  you  want  to   Find out more.  
  32. 32. 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! !

×