Designing Responsive Interfaces in Axure 6.5 & 7


Published on

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

These presentation is inspired on the following designers blog post:

Published in: Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Designing Responsive Interfaces in Axure 6.5 & 7

  1. 1. Designing Responsive Prototypes Axure 6.5 & Axure 7 #AxureLondon
  2. 2. Very Special Thanks! @Axurerp@Ostmodern #AxureLondon
  3. 3. Introduction #AxureLondon
  4. 4. Just so you know… “We basically made AxShare free about a month or two ago, with 1000 projects at 100MB each” #AxureLondon
  5. 5. Responsive Design in Axure 6.5
  6. 6. 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  responsive-prototype-in-axure-tutorial/ #AxureLondon
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. How does the sentinel works? Dynamic Panels #AxureLondon
  11. 11. 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
  12. 12. Have you played the sentinel game? #AxureLondon
  13. 13. See the sentinel in action #AxureLondon
  14. 14. “Show and Tell” By Clive Hughes
  15. 15. Welcome to Axure 7!
  16. 16. Quick Comparison Axure 6.5 Axure 7 #AxureLondon
  17. 17. Quick Comparison Axure 6.5 Axure 7 #AxureLondon
  18. 18. Quick Comparison Axure 6.5 Axure 7 #AxureLondon
  19. 19. Quick Comparison Axure 6.5 Axure 7  N/A #AxureLondon
  20. 20. Responsive Image  Try it yourself… #AxureLondon
  21. 21. Adaptive Views A quick overview
  22. 22. 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
  23. 23. 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
  24. 24. Let’s see it in action Simple Responsive Website #AxureLondon
  25. 25. Accounting for all screen sizes >1020 >768>960 480 or less #AxureLondon
  26. 26. Advance tutorial Making Axure Responsive Demos Less Confusing  responsive-demos-less-confusing.html #AxureLondon
  27. 27. Thanks!  @MetroWiseUX  Please rate this event   Suggestions for next meeting?  Share your Axure fun with all of us!  Feedback is always welcome #AxureLondon