Building Mobile Prototypes With Axure RP 7.0
Upcoming SlideShare
Loading in...5
×
 

Building Mobile Prototypes With Axure RP 7.0

on

  • 2,608 views

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

Statistics

Views

Total Views
2,608
Views on SlideShare
2,562
Embed Views
46

Actions

Likes
37
Downloads
9
Comments
0

3 Embeds 46

http://gh45.galisto.ch 26
http://www.slideee.com 19
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building Mobile Prototypes With Axure RP 7.0 Building Mobile Prototypes With Axure RP 7.0 Presentation Transcript

    • 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’s a design philosophy.” ! Todd Zaki Warfel
    • 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
    • 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 Tumult Hype Indigo Studio Justinmind Prototyper
    • 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…
    • 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
    • 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
    • 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 State, Toggle Visibility, Show & treat as…
    • 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.
    • 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.
    • 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-user-select: none; } input, textarea { ! -webkit-user-select: auto; }
    • 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.
    • USING PAGES.
    • USING PANELS.
    • 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
    • RESPONSIVE WEB DESIGN. http://mediaqueri.es
    • 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.
    • 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).
    • 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.
    • 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 ▪ 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
    • 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
    • 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 your prototype. 6. Go back to step 4 and scale your prototype. 7. Present your prototype to others.
    • VIEW YOUR PROTOTYPE. ▪ online / offline / as a native app? ! ▪ on your device ▪ on a larger screen ▪ mirror your prototype ▪ use an emulator
    • 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 your prototype. 6. Go back to step 4 and scale your prototype. 7. Present your prototype to others.
    • 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