BUILDING MOBILE PROTOTYPES

WITH AXURE RP 7.0
LENNART HENNIGS
www.axureformobile.com

bit.ly/a4m_newsletter
WHY USE AXURE 

FOR MOBILE PROTOTYPING?
DISCLAIMER:

IT’S NOT ABOUT THE TOOL YOU USE.

DISCLAIMER:

IT’S NOT ABOUT THE TOOL YOU USE.

IT’S ABOUT PROTOTYPING.
„Prototyping is practice for people who design
and make things. It’s not simply another tool for
your design toolkit – it’...
WHY PROTOTYPE?
▪ Show what the app’s user experience will be like.

▪ Create something tangible.

▪ Shift the perspective:...
SHOW NON-DESIGNERS WHAT THE UX WILL BE LIKE.

AND WE DELIVER THIS. REALLY?
CREATE SOMETHING TANGIBLE.

SHOW, DON’T TELL.
https://db.tt/EvJQlqut
FAIL EARLY, FAIL FAST & FAIL OFTEN.
gapingvoid.com
AXURE IS ONLY ONE TOOL OF MANY…

Omnigraffle

Microsoft Visio
Adobe Illustrator
Adobe Fireworks
Balsamiq
Quartz Composer
T...
SO, WHY CHOOSE AXURE FOR PROTOTYPING?
▪ It’s widely popular.

▪ Active community & responsive developers.

▪ It has a low ...
QUICK DETOUR: WHAT’S NEW IN AXURE 7.0?
▪ Improved User Interface!
▪ Ability to prototype responsive websites !
▪ Database-...
STRENGTHS OF AXURE.
▪ Detect and work with gestures.

▪ Prototype animations and transitions.

▪ Build responsive prototyp...
Luke Wroblewski – Touch Gesture Reference Cards
DETECTABLE USER ACTIONS.
EVENTS TO DETECT USER ACTIONS.
ANIMATIONS AND TRANSITIONS.
bit.ly/a4m_238
Animations: 	 Move, Scroll To, Set Panel Size

Transitions: 	 Set Panel to Stat...
STEPS FOR MOBILE PROTOTYPING.
1. Create a concept.

2. Set up Axure.

3. Use pages or panels?

4. Start building.

5. View...
STEPS FOR MOBILE PROTOTYPING.
1. Create a concept.

2. Set up Axure.

3. Use pages or panels?

4. Start building.

5. View...
WHAT DO I HAVE TO PUT IN HERE?
AXURE’S MOBILE DEVICE SETTINGS.
New for iOS 7.1: User Scalable = no, minimal-ui
http://bit.ly/a4m_250
your  target
resolution
USE GLOBAL GUIDES.
ADD MOBILE-FRIENDLY CSS.
* {
! outline: none;
! -webkit-text-size-adjust: none;
! -webkit-touch-callout: none;
! -webkit-u...
STEPS FOR MOBILE PROTOTYPING.
1. Create a concept.

2. Set up Axure.

3. Use pages or panels?

4. Start building.

5. View...
USING PAGES.
USING PANELS.
PAGES vs. PANELS.
!
!
Pages
▪ No learning curve

▪ the back button is working

▪ Need to create a spec?

!
Broad over-simp...
RESPONSIVE WEB DESIGN.
http://mediaqueri.es
ADAPTIVE LAYOUTS - AXURE’S APPROACH TO RWD.
▪ Create breakpoints for your screen classes.

▪ UI elements have now… 

▪ ada...
CREATING ADAPTIVE LAYOUTS.
▪ First, define your breakpoints.

▪ Start mobile first.

▪ Then, build you way up with “>=“

▪...
STEPS FOR MOBILE PROTOTYPING.
1. Create a concept.

2. Set up Axure.

3. Use pages or panels?

4. Start building.

5. View...
WHAT DO I DO NEXT?
USE MOBILE UI PATTERNS.
inspired-ui.com!
mobile-patterns.com!
pttrns.com!
androidpatterns.com
USE MOBILE UI PATTERNS.
UI PATTERNS COVERED IN THE BOOK.
▪ Dialogs and Popups

▪ Text Fields and Forms

▪ Tabs

▪ Accordion Lists

▪ Splash Screen...
UI PATTERNS COVERED IN THE BOOK.
▪ Dialogs and Popups

▪ Text Fields and Forms

▪ Tabs

▪ Accordion Lists

▪ Splash Screen...
TEXT FIELDS AND FORMS.
bit.ly/a4m_forms
ACCORDION LISTS.
bit.ly/a4m_accordion
SCROLLING DETECTION & FULL SCREEN ON SCROLL.
bit.ly/a4m_fullscreen
STEPS FOR MOBILE PROTOTYPING.
1. Create a concept.

2. Set up Axure.

3. Use pages or panels?

4. Start building.

5. View...
VIEW YOUR PROTOTYPE.
▪ online / offline / as a native app?

!
▪ on your device

▪ on a larger screen

▪ mirror your protot...
MIRROR YOUR PHONE VIA REFLECTOR.
USE THE iOS SIMULATOR.
STEPS FOR MOBILE PROTOTYPING.
1. Create a concept.

2. Set up Axure.

3. Use pages or panels?

4. Start building.

5. View...
INCREASE YOUR PROTOTYPE’S FIDELITY.
x. Structure
y. Level of interactivity
z. Visual fidelity
BONUS MATERIAL:

SOME AXURE PROTOTYPING TIPS
Axure  tip  #1:  	
  
Know  your  shortcuts. bit.ly/a4m_260
Axure  tip  #2:  	
  
Give  everything  a  name.
Image Source: thebricktestament.com
Axure  tip  #3:  	
  
Turn  everything  you  re-­use  into  Masters.
Axure  tip  #4:  Plan  ahead.
Stick  to  the  key  use  cases.
Prototype  the  20%  that  will  be  used  80%  of  the  time.  
Harrelson & Buley – Sketchboards and Prototypes, 2008.
What  is  critical  for  good  UX  and  complex  for  the  user?
Axure  tip  #5:    
Don’t  get  lost  in  Axure.
Axure  tip  #6:    
Complexity  will  fight  back.
Axure  tip  #7:    
Good  enough  IS  REALLY  good  enough!
www.axureformobile.com!
www.usercentered.de
@LennartHennigs
Upcoming SlideShare
Loading in...5
×

Building Mobile Prototypes With Axure RP 7.0

5,341

Published on

This presentation provides an overview of how to build mobile prototypes with the prototyping tool Axure RP 7.0.

For more details visit: www.axureformobile.com

Published in: Design, Technology

Building Mobile Prototypes With Axure RP 7.0

  1. 1. BUILDING MOBILE PROTOTYPES
 WITH AXURE RP 7.0 LENNART HENNIGS
  2. 2. www.axureformobile.com bit.ly/a4m_newsletter
  3. 3. WHY USE AXURE 
 FOR MOBILE PROTOTYPING?
  4. 4. DISCLAIMER:
 IT’S NOT ABOUT THE TOOL YOU USE.

  5. 5. DISCLAIMER:
 IT’S NOT ABOUT THE TOOL YOU USE.
 IT’S ABOUT PROTOTYPING.
  6. 6. „Prototyping is practice for people who design and make things. It’s not simply another tool for your design toolkit – it’s a design philosophy.” ! Todd Zaki Warfel
  7. 7. WHY PROTOTYPE? ▪ Show what the app’s user experience will be like. ▪ Create something tangible. ▪ Shift the perspective: Show, don’t tell. ▪ You want to fail early, fail fast and fail often. Image Source: elnerol.deviantart.com
  8. 8. SHOW NON-DESIGNERS WHAT THE UX WILL BE LIKE.
 AND WE DELIVER THIS. REALLY?
  9. 9. CREATE SOMETHING TANGIBLE.
 SHOW, DON’T TELL. https://db.tt/EvJQlqut
  10. 10. FAIL EARLY, FAIL FAST & FAIL OFTEN. gapingvoid.com
  11. 11. AXURE IS ONLY ONE TOOL OF MANY…
 Omnigraffle Microsoft Visio Adobe Illustrator Adobe Fireworks Balsamiq Quartz Composer Tumult Hype Indigo Studio Justinmind Prototyper
  12. 12. SO, WHY CHOOSE AXURE FOR PROTOTYPING? ▪ It’s widely popular. ▪ Active community & responsive developers. ▪ It has a low learning curve (after some getting used to). ▪ No coding skill required (but some basic knowledge is helpful). ▪ It’s prototype is HTML based (you can view it on any device). ▪ You can host it for free online. ▪ You can find libraries with common UI elements online. ▪ Version 7.0 of Axure is easier to work with…
  13. 13. QUICK DETOUR: WHAT’S NEW IN AXURE 7.0? ▪ Improved User Interface! ▪ Ability to prototype responsive websites ! ▪ Database-like functionality! ▪ A lot of new events! ▪ All UI elements can now be shown, hidden & animated! ▪ Auto-resize of dynamic panels based on it’s active state! ▪ Text field types! ▪ Inner, outer & text shadow! ▪ … bit.ly/newinaxure7
  14. 14. STRENGTHS OF AXURE. ▪ Detect and work with gestures. ▪ Prototype animations and transitions. ▪ Build responsive prototypes. ▪ Create a specification in a short amount of time. ▪ You can scale your project as you go ▪ …from wireframes and flows to fully interactive prototypes ▪ …from sketchy to high fidelity
  15. 15. Luke Wroblewski – Touch Gesture Reference Cards DETECTABLE USER ACTIONS.
  16. 16. EVENTS TO DETECT USER ACTIONS.
  17. 17. ANIMATIONS AND TRANSITIONS. bit.ly/a4m_238 Animations: Move, Scroll To, Set Panel Size Transitions: Set Panel to State, Toggle Visibility, Show & treat as…
  18. 18. STEPS FOR MOBILE PROTOTYPING. 1. Create a concept. 2. Set up Axure. 3. Use pages or panels? 4. Start building. 5. View your prototype. 6. Go back to step 4 and scale your prototype. 7. Present your prototype to others.
  19. 19. STEPS FOR MOBILE PROTOTYPING. 1. Create a concept. 2. Set up Axure. 3. Use pages or panels? 4. Start building. 5. View your prototype. 6. Go back to step 4 and scale your prototype. 7. Present your prototype to others.
  20. 20. WHAT DO I HAVE TO PUT IN HERE?
  21. 21. AXURE’S MOBILE DEVICE SETTINGS. New for iOS 7.1: User Scalable = no, minimal-ui http://bit.ly/a4m_250
  22. 22. your  target resolution USE GLOBAL GUIDES.
  23. 23. ADD MOBILE-FRIENDLY CSS. * { ! outline: none; ! -webkit-text-size-adjust: none; ! -webkit-touch-callout: none; ! -webkit-user-select: none; } input, textarea { ! -webkit-user-select: auto; }
  24. 24. STEPS FOR MOBILE PROTOTYPING. 1. Create a concept. 2. Set up Axure. 3. Use pages or panels? 4. Start building. 5. View your prototype. 6. Go back to step 4 and scale your prototype. 7. Present your prototype to others.
  25. 25. USING PAGES.
  26. 26. USING PANELS.
  27. 27. PAGES vs. PANELS. ! ! Pages ▪ No learning curve ▪ the back button is working ▪ Need to create a spec? ! Broad over-simplification: ▪ use it for websites ! ! Panels ▪ Gestures ▪ Animations & Transitions ▪ No page transitions in Axure ! ! ▪ use it for apps
  28. 28. RESPONSIVE WEB DESIGN. http://mediaqueri.es
  29. 29. ADAPTIVE LAYOUTS - AXURE’S APPROACH TO RWD. ▪ Create breakpoints for your screen classes. ▪ UI elements have now… ▪ adaptive properties (location, size, color, style, interaction styles) ▪ fixed properties (text, interactions, disabled by default). ▪ Your screen classes can inherit the properties from its parents. ▪ “Unplace” elements to use a different representation.
  30. 30. CREATING ADAPTIVE LAYOUTS. ▪ First, define your breakpoints. ▪ Start mobile first. ▪ Then, build you way up with “>=“ ▪ …and set your “Page Align” to center (for the topmost view).
  31. 31. STEPS FOR MOBILE PROTOTYPING. 1. Create a concept. 2. Set up Axure. 3. Use pages or panels? 4. Start building. 5. View your prototype. 6. Go back to step 4 and scale your prototype. 7. Present your prototype to others.
  32. 32. WHAT DO I DO NEXT?
  33. 33. USE MOBILE UI PATTERNS. inspired-ui.com! mobile-patterns.com! pttrns.com! androidpatterns.com
  34. 34. USE MOBILE UI PATTERNS.
  35. 35. UI PATTERNS COVERED IN THE BOOK. ▪ Dialogs and Popups ▪ Text Fields and Forms ▪ Tabs ▪ Accordion Lists ▪ Splash Screen ▪ Drag to Refresh ▪ Lists with Selection Highlight ▪ Sliding Menus ▪ Fullscreen on Scroll ▪ Sticky Headers for Lists ! ▪ How embed audio & video files ▪ Enhance the HTML output ▪ How to use Webfonts ▪ How to use Adaptive Views
  36. 36. UI PATTERNS COVERED IN THE BOOK. ▪ Dialogs and Popups ▪ Text Fields and Forms ▪ Tabs ▪ Accordion Lists ▪ Splash Screen ▪ Drag to Refresh ▪ Lists with Selection Highlight ▪ Sliding Menus ▪ Fullscreen on Scroll ▪ Sticky Headers for Lists ! ▪ How embed audio & video files ▪ Enhance the HTML output ▪ How to use Webfonts ▪ How to use Adaptive Views
  37. 37. TEXT FIELDS AND FORMS. bit.ly/a4m_forms
  38. 38. ACCORDION LISTS. bit.ly/a4m_accordion
  39. 39. SCROLLING DETECTION & FULL SCREEN ON SCROLL. bit.ly/a4m_fullscreen
  40. 40. STEPS FOR MOBILE PROTOTYPING. 1. Create a concept. 2. Set up Axure. 3. Use pages or panels? 4. Start building. 5. View your prototype. 6. Go back to step 4 and scale your prototype. 7. Present your prototype to others.
  41. 41. VIEW YOUR PROTOTYPE. ▪ online / offline / as a native app? ! ▪ on your device ▪ on a larger screen ▪ mirror your prototype ▪ use an emulator
  42. 42. MIRROR YOUR PHONE VIA REFLECTOR.
  43. 43. USE THE iOS SIMULATOR.
  44. 44. STEPS FOR MOBILE PROTOTYPING. 1. Create a concept. 2. Set up Axure. 3. Use pages or panels? 4. Start building. 5. View your prototype. 6. Go back to step 4 and scale your prototype. 7. Present your prototype to others.
  45. 45. INCREASE YOUR PROTOTYPE’S FIDELITY. x. Structure y. Level of interactivity z. Visual fidelity
  46. 46. BONUS MATERIAL:
 SOME AXURE PROTOTYPING TIPS
  47. 47. Axure  tip  #1:     Know  your  shortcuts. bit.ly/a4m_260
  48. 48. Axure  tip  #2:     Give  everything  a  name. Image Source: thebricktestament.com
  49. 49. Axure  tip  #3:     Turn  everything  you  re-­use  into  Masters.
  50. 50. Axure  tip  #4:  Plan  ahead.
  51. 51. Stick  to  the  key  use  cases.
  52. 52. Prototype  the  20%  that  will  be  used  80%  of  the  time.  
  53. 53. Harrelson & Buley – Sketchboards and Prototypes, 2008. What  is  critical  for  good  UX  and  complex  for  the  user?
  54. 54. Axure  tip  #5:     Don’t  get  lost  in  Axure.
  55. 55. Axure  tip  #6:     Complexity  will  fight  back.
  56. 56. Axure  tip  #7:     Good  enough  IS  REALLY  good  enough!
  57. 57. www.axureformobile.com! www.usercentered.de @LennartHennigs
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×