Building Mobile Prototypes With Axure RP 7.0

  • 3,704 views
Uploaded on

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

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

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,704
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
52
Comments
0
Likes
41

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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

  • 5. DISCLAIMER:
 IT’S NOT ABOUT THE TOOL YOU USE.
 IT’S ABOUT PROTOTYPING.
  • 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. 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. SHOW NON-DESIGNERS WHAT THE UX WILL BE LIKE.
 AND WE DELIVER THIS. REALLY?
  • 9. CREATE SOMETHING TANGIBLE.
 SHOW, DON’T TELL. https://db.tt/EvJQlqut
  • 10. FAIL EARLY, FAIL FAST & FAIL OFTEN. gapingvoid.com
  • 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. 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. 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. 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. Luke Wroblewski – Touch Gesture Reference Cards DETECTABLE USER ACTIONS.
  • 16. EVENTS TO DETECT USER ACTIONS.
  • 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. 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. 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. WHAT DO I HAVE TO PUT IN HERE?
  • 21. AXURE’S MOBILE DEVICE SETTINGS. New for iOS 7.1: User Scalable = no, minimal-ui http://bit.ly/a4m_250
  • 22. your  target resolution USE GLOBAL GUIDES.
  • 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. 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. USING PAGES.
  • 26. USING PANELS.
  • 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. RESPONSIVE WEB DESIGN. http://mediaqueri.es
  • 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. 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. 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. WHAT DO I DO NEXT?
  • 33. USE MOBILE UI PATTERNS. inspired-ui.com! mobile-patterns.com! pttrns.com! androidpatterns.com
  • 34. USE MOBILE UI PATTERNS.
  • 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. 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. TEXT FIELDS AND FORMS. bit.ly/a4m_forms
  • 38. ACCORDION LISTS. bit.ly/a4m_accordion
  • 39. SCROLLING DETECTION & FULL SCREEN ON SCROLL. bit.ly/a4m_fullscreen
  • 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. VIEW YOUR PROTOTYPE. ▪ online / offline / as a native app? ! ▪ on your device ▪ on a larger screen ▪ mirror your prototype ▪ use an emulator
  • 42. MIRROR YOUR PHONE VIA REFLECTOR.
  • 43. USE THE iOS SIMULATOR.
  • 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. INCREASE YOUR PROTOTYPE’S FIDELITY. x. Structure y. Level of interactivity z. Visual fidelity
  • 46. BONUS MATERIAL:
 SOME AXURE PROTOTYPING TIPS
  • 47. Axure  tip  #1:     Know  your  shortcuts. bit.ly/a4m_260
  • 48. Axure  tip  #2:     Give  everything  a  name. Image Source: thebricktestament.com
  • 49. Axure  tip  #3:     Turn  everything  you  re-­use  into  Masters.
  • 50. Axure  tip  #4:  Plan  ahead.
  • 51. Stick  to  the  key  use  cases.
  • 52. Prototype  the  20%  that  will  be  used  80%  of  the  time.  
  • 53. Harrelson & Buley – Sketchboards and Prototypes, 2008. What  is  critical  for  good  UX  and  complex  for  the  user?
  • 54. Axure  tip  #5:     Don’t  get  lost  in  Axure.
  • 55. Axure  tip  #6:     Complexity  will  fight  back.
  • 56. Axure  tip  #7:     Good  enough  IS  REALLY  good  enough!
  • 57. www.axureformobile.com! www.usercentered.de @LennartHennigs