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