Designing Responsive Interfaces in Axure 6.5 & 7
Upcoming SlideShare
Loading in...5
×
 

Designing Responsive Interfaces in Axure 6.5 & 7

on

  • 1,463 views

Slides for the Axure London Meetup on March 19th, 2014. ...

Slides for the Axure London Meetup on March 19th, 2014.

http://www.meetup.com/Axure-London-Meetup/events/166709342/

These presentation is inspired on the following designers blog post:
http://www.theinteractive.it/2013/02/how-to-create-a-responsive-prototype-in-axure-tutorial/

http://www.axureworld.org/library/making-axure-responsive-demos-less-confusing.html

Statistics

Views

Total Views
1,463
Views on SlideShare
1,446
Embed Views
17

Actions

Likes
3
Downloads
21
Comments
0

3 Embeds 17

http://www.slideee.com 14
https://twitter.com 2
http://www.pinterest.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

Designing Responsive Interfaces in Axure 6.5 & 7 Designing Responsive Interfaces in Axure 6.5 & 7 Presentation Transcript

  • Designing Responsive Prototypes Axure 6.5 & Axure 7 #AxureLondon
  • Very Special Thanks! @Axurerp@Ostmodern #AxureLondon
  • Introduction #AxureLondon View slide
  • Just so you know… “We basically made AxShare free about a month or two ago, with 1000 projects at 100MB each” #AxureLondon View slide
  • Responsive Design in Axure 6.5
  • Responsive Design in Axure 6.5  Why bother with Axure 6.5?  Prototyping is all about “make believe”  Lessons to be learned  How to create a responsive prototype in Axure [Tutorial] by Fabio Sirna  http://www.theinteractive.it/2013/02/how-to-create-a- responsive-prototype-in-axure-tutorial/ #AxureLondon
  • Responsive Design in Axure 6.5  Introducing… The Sentinel A intermittent dynamic panel which is used to intercept the screen size, detecting the presence or absence of another dynamic panel below its bottom side. #AxureLondon
  • How does the sentinel works? The inspector  Create the dynamic panel for the sentinel, called Inspector.  Make it intermittent (infinite loop).  To make the sentinel intermittent we need to activate it on the event OnPageLoad #AxureLondon
  • How does the sentinel works? Pin to browser  The next step is to place the panel in a fixed position depending on the viewport size of the browser using the Pin to browser function. #AxureLondon
  • How does the sentinel works? Dynamic Panels #AxureLondon
  • How does the sentinel works? The sentinel in action  When the Inspector hides it triggers the OnHide event.  OnHide add logic to figure out if the Inspector is over any of the dynamic panels.  Good idea… but… what about performance?  Does it really matter? #AxureLondon
  • Have you played the sentinel game? #AxureLondon
  • See the sentinel in action #AxureLondon
  • “Show and Tell” By Clive Hughes
  • Welcome to Axure 7!
  • Quick Comparison Axure 6.5 Axure 7 #AxureLondon
  • Quick Comparison Axure 6.5 Axure 7 #AxureLondon
  • Quick Comparison Axure 6.5 Axure 7 #AxureLondon
  • Quick Comparison Axure 6.5 Axure 7  N/A #AxureLondon
  • Responsive Image  Try it yourself… http://bit.ly/LAM_RI #AxureLondon
  • Adaptive Views A quick overview
  • Adaptive Views  Adaptive Views define the breakpoints where you want your pages to switch to a different layout or style. Presets: Choose a screen width based on a predefined size. Name: A label for your adaptive view. Width: The pixel width of a browser window. Height: The screen height of a browser window. Parent: The view which widget and formatting properties will inherit from. #AxureLondon
  • Adaptive Views- Inheritance  Each adaptive view must be a child of another view.  Some properties inherit from its parent views, while other properties do not.  The location, size, style, and interaction styles of a widget can vary across adaptive views.  Properties like text, interactions, disabled by default are the same for all widgets across all views. #AxureLondon
  • Let’s see it in action Simple Responsive Website #AxureLondon
  • Accounting for all screen sizes >1020 >768>960 480 or less #AxureLondon
  • Advance tutorial Making Axure Responsive Demos Less Confusing  http://www.axureworld.org/library/making-axure- responsive-demos-less-confusing.html #AxureLondon
  • Thanks!  @MetroWiseUX  Please rate this event   Suggestions for next meeting?  Share your Axure fun with all of us!  Feedback is always welcome #AxureLondon