Axure for Mobile Prototyping

Axure for Mobile

Lennart  Hennigs  Axure  World  2012  

Hey,  I  made  a  new  presentation  covering  Axure  7.0.  Check  it  out!  

http://bit.ly/a4m_presentation!

http://www.axureformobile.com  

@LennartHennigs  

I  like  this  topic  so  much,  I  even  wrote  a  book  about  it…  

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  

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  -­  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  

Artifacts of Axure  

Prototypes  Wireframes  

Specifications  

Artifacts of Axure  for  Mobile      

UI  Flows  Specifications  

Prototypes  Wireframes  

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  of

Mobile 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  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  

Get  some    

Mobile Axure Resources  -­  Axure  Libraries  

-­  Photoshop  Resources    

-­  Icons  Libraries  !

!!!!!

http://www.axureformobile.com/mobile-resources/!

Make  Axure’s    

.html Mobile-friendly Well,  it’s  actually  the  .css  code…  !      

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!

!

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; } !

Let  Axure    

Auto-generate QR codes

Let  Axure    

Auto-generate QR codes

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 !

 Line  84:  

!treeUl += "<img id ='qr' />”;!

Let  Axure    

Auto-generate QR codes

 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); !!

Let  Axure    Auto-generate QR codes  

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…  

http://www.axureformobile.com  

LennartHennigs  

Please  stop  by  if  you  want  to  

Find out more.  

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!

!