Designing Responsive Prototypes Axure 6.5 & Axure 7 #AxureLondon
Jan 27, 2015
Designing Responsive Prototypes
Axure 6.5 & Axure 7
#AxureLondon
Very Special Thanks!
@Axurerp @Ostmodern
#AxureLondon
Introduction
@MetroWiseUX
#AxureLondon
Just so you know…
“We basically made AxShare free about a month or two ago, with 1000 projects at 100MB each”
#AxureLondon
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 SentinelA 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