Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Design with Axure 7.0’s Adaptive Views

2,400 views

Published on

Introducing creating Responsive Web Design with Axure 7.0' Adaptive Views feature. Presentation was originally given at DePaul University in front of the students of HCI 430 course during the 2015 Winter quarter.

  • Be the first to comment

Responsive Design with Axure 7.0’s Adaptive Views

  1. 1. Responsive Design with Axure 7.0’s Adaptive Views by Svetlin Denkov @svetlindenkov +
  2. 2. Who am I?
  3. 3. → DePaul CDM IxDA Chicago
  4. 4. ?
  5. 5. Prototyping Experience
  6. 6. I use different tools for different projects. Here are some I apply for mobile and tablet prototyping: …but I constantly refine my process and toolkit! BalsamiqBlueprint
  7. 7. I write, but also… …present on Axure and other prototyping tools: Axure Meetup Chicago
  8. 8. Today’s Agenda
  9. 9. THE AGENDA Today we will cover: - Brief introduction of Adaptive Views [30 min] - Demo of this Axure feature [50 min] - Q&A on Axure and prototyping [10 min]
  10. 10. THE DEMO There is a lot of ground we can cover, so let’s focus on the basics: - Setting up and editing Adaptive Views - Inheritance across views - Placing and unplacing of widgets - Adaptive masters and styles **I promise, all of this will make sense shortly 
  11. 11. THE DEMO (cont) Feel free to look at the more advanced topics on your own: - Adaptive Views and documentation specs - Adaptive repeaters - Creating widget libraries for adaptive designs - OnWindowResize and OnAdaptiveViewChange **If you need help, drop me a line at @svetlindenkov
  12. 12. The RWD Context *RWD = Responsive Web Design
  13. 13. RESPONSIVE WEB DESIGN (RWD) At the 10k foot view: - Breakpoints exist for each channel/form factor/resolution - This is based on analytics and/or user research (not only the business goals) - Content and requirements exist for each breakpoint Mobile Tablet Desktop TV + + Wearables
  14. 14. RESPONSIVE WEB DESIGN (cont.) Prototyping comes last: - Figure out the main flows and key screens in the experience - Brainstorm early concepts. Do it with others if you can: x2  > x1  - Sketch UI details on paper/whiteboard Research Sketch Prototype
  15. 15. RWD & Axure
  16. 16. AXURE ACTION ITEMS Business considerations: - Set expectations of what Axure can/cannot do for RWD - Get buy-in from stakeholders and internal team Prototyping considerations: - Deep or wide prototype? - Page or dynamic panel organization? - Level of visual fidelity and documentation
  17. 17. Let’s Jump In!
  18. 18. MINI REAL WORLD PROJECT We will create a simple 1-screen prototype of a mobile e-commerce experience with the following: iPhone 5/5S (2 orientations) Simulating Clickthrough Prototype
  19. 19. Prerequisite: Laying Content & Mobile Viewports
  20. 20. 3-PIECE PUZZLE 1. The content is laid out in Axure to a certain size (based on the expected content size for the current device). 2. The mobile viewport takes this content and resizes it to fit in the physical display. 3. The physical display is constant. Display Viewport Content (in Axure)
  21. 21. The Content The content in pixels can be of different resolutions: - non retina or also known as 100% of the display size - retina or 200% of the display size - > 200% (Android and latest additions to iOS) *Image credit: www.teehanlax.com
  22. 22. The Viewport The viewport has two parts to it. 1. Creating the size of the viewport 2. Controlling how the content is displayed Note: The latter allows for zooming in/out of the content (see Maximum Scale and User Scalable). Viewport Size Content Scaling
  23. 23. The Display Each device has several measurements: - Physical height and width of the shell in inches - The display’s width and height in logical points Some derived measurements are: - Aspect ratio = content width / content height - Density = content width / physical width *Image credit: www.isores.com
  24. 24. Real World Example
  25. 25. iPhone 5/5C/5S The content of the device: - Can be laid at the expected size, 640px by 1136px (in portrait mode) OR - Can be laid at non-retina size, 320px by 568px The display size of the device: - Is measured 320pt by 568pt - Each point can then hold 1 or 2 content pixels Non Retina 1pt = 1px Retina 1pt = 2px
  26. 26. iPhone 5/5c/5S Example (cont) If content is at retina (640px by 1136px): If content is at non retina (320px by 568px):
  27. 27. Hammer Time! (Ahem…Demo Time)
  28. 28. Adaptive Views Limitations
  29. 29. ADAPTIVE LIMITATIONS Novice to intermediate level: - Base view cannot be reassigned - Views cannot be copied - Must constantly track which view you are working in Advanced level: - No fluid design (out-of-the-box) - No production-ready code (true for any Axure project, not just Adaptive ones) - Specs are a work-in-progress
  30. 30. Takeaways
  31. 31. TAKEAWAYS For RWD: - Have agreement on the breakpoints - Plan ahead before starting to prototype - Prototype only what’s necessary
  32. 32. TAKEAWAYS (cont) For Axure and Adaptive Views: - Axure is a good tool choice for prototyping RWD - Adaptive Views have a learning curve - Adaptive Views increase project complexity - Heavy interactions are possible but difficult to manage across views
  33. 33. CONCLUSION Give Axure 7.0 and Adaptive Views a try. They will be a nice addition to your tool set!
  34. 34. Questions? (Really, don’t be shy!)
  35. 35. That’s All Folks! light_forger @svetlindenkov Svetlin Denkov *Icon credit: www.flaticon.com *Image credit: www.axure.com

×