Responsive Design with Axure 7.0’s Adaptive Views
Download as PPTX, PDF5 likes2,991 views
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.
![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]](https://image.slidesharecdn.com/svetlindenkov-introduction20150224v03-150702025916-lva1-app6892/85/Responsive-Design-with-Axure-7-0-s-Adaptive-Views-9-320.jpg)
Ad
More Related Content
What's hot (16)
Viewers also liked (20)
Ad
Similar to Responsive Design with Axure 7.0’s Adaptive Views (20)
Ad
Responsive Design with Axure 7.0’s Adaptive Views
- 1. Responsive Design with Axure 7.0’s Adaptive Views by Svetlin Denkov @svetlindenkov +
- 2. Who am I?
- 3. → DePaul CDM IxDA Chicago
- 4. ?
- 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. I write, but also… …present on Axure and other prototyping tools: Axure Meetup Chicago
- 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. 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. 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. The RWD Context *RWD = Responsive Web Design
- 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. 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. RWD & Axure
- 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. Let’s Jump In!
- 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. Prerequisite: Laying Content & Mobile Viewports
- 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. 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. 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. 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
- 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. iPhone 5/5c/5S Example (cont) If content is at retina (640px by 1136px): If content is at non retina (320px by 568px):
- 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. Takeaways
- 31. TAKEAWAYS For RWD: - Have agreement on the breakpoints - Plan ahead before starting to prototype - Prototype only what’s necessary
- 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. CONCLUSION Give Axure 7.0 and Adaptive Views a try. They will be a nice addition to your tool set!
- 34. Questions? (Really, don’t be shy!)
- 35. That’s All Folks! light_forger @svetlindenkov Svetlin Denkov *Icon credit: www.flaticon.com *Image credit: www.axure.com
Editor's Notes
- #2: - Housekeeping: targeted audience - Questions during presentation + Q&A at the end - Assets shared at the end: .rp file, .pdf of presentation and video recording - Other tools for RWD exist: Macaw, Apple Xcode, Sketch, Pixate, Proto.io.
- #4: - Graduated with MS in HCI from DePaul in 2012. This same course inspired me to focus on prototyping. - Co-founded DPU HCI FB group with Nikola Ranguelov and other fellow students - Many alumni in the Chicago HCI world - Bill involved me with IxDA Chicago - This lecture is a way to give back to alma matter and fellow future UXers.
- #5: - Over 5 years experience in the UX field - Primarily doing work in the mobile and tablet spaces. - Started out at Motorola back in the P2K/Linux Java days -> - Spent some time in Sears in the mobile team - Now at ReSound working on Connectivity and TeleAudiology solutions for company’s top HIs
- #7: - Axure is my primary tool given its versatility (documentation, collaboration, complex flows and interactions). - Pick the tool that fits the job the best. No single tool does everything well. - Exposure to different working environments and project experience will teach you the foundations of prototyping. - Must at the least have some mobile tools under your belt, a full platform such as Axure or Justinmind, and some dev. based prototyping tools (FramerJS, jQuery, etc.).
- #8: - # years of experience - types of projects - workshops, articles on Axure but other tools - passionate prototyper - frequent presentations at Axure meetup and Axure world
- #10: - Adaptive Views: what is it? How to use it? [Give history of where it came from e.g., flicker spy] - I will talk about tips & tricks during the demo wherever applicable - Not a discussion of RWD or mobile platforms. - Assuming you have good understanding of Axure basics since Bill already gave you couple of labs on the subject. - However if you have specific questions, feel free to ask them
- #11: - Adaptive Views: what is it? How to use it? - tips & tricks during the demo - not a discussion of RWD or mobile platforms - assuming you have good understanding of Axure basics since Bill gave you lecture on this
- #12: - Adaptive specs still need a lot of work. Lennart Hennigs proposed a solution for this in his “Axure for Mobile (2nd edition)” - Jayne Spottswood (fellow DPU alumnus) covered adaptive libraries briefly in the 11/2014 Axure Meetup Chicago - OnWindowResize = for fluid design, OnAdaptiveViewChange to show on/off modules depending on orientation
- #14: - This won’t be a discussion on whether or not breakpoints are tied to devices or resolutions. - Explain what a breakpoint is - Cover the typical breakpoints. Discuss landscape vs. portrait. Discuss Android fragmentation and that of iOS.
- #15: - Designing inside the tool is always tempting. But don’t! - Paper is the best way to iterate different ideas. Once in Axure, an idea has the aura of finality, and we are more hesitant to changes. - Paper = little time and resource investment
- #17: - Be confident with the tool: know it capabilities and limitations - Educate others if it comes down to it - Early own establish the purpose of the prototype (documentation, proof of concept demo, full scale project, etc.) - Identify if you are doing a click through or doing a deep dive on specific flows (drives interactive fidelity) - Talk to Product Management regarding expectations for level of documentation (how much, in Axure?, etc.) and who will be in charge of Visual Design - Each company culture and even each smaller team may have a different approach to prototyping RWD with Axure - Picking a screen organization method will impact how you approach documentation
- #18: - regardless of whether you work in Axure or not (e.g., CSS based Framework) you will need to understand this basic concept - many novice users of Axure for mobile are tripped up by this concept
- #19: - Could have easily picked any Android platform or cross form factor design, but simply no time for that - The platform here is not import since we will illustrate basic concepts of Adaptive Views. -
- #20: - regardless of whether you work in Axure or not (e.g., CSS based Framework) you will need to understand this basic concept - many novice users of Axure for mobile are tripped up by this concept
- #21: Viewport is used in HTML/CSS and other prototyping tools It is an important concept to know, especially if designing for mobile/tablet
- #22: - Additional information is included in the Resources page of the prototype file. - Good starting reference is screensiz.es - Using retina sized widgets in your Axure file has certain consequences, but this is not the focus of the presentation (consult forums): - largea file size - larger working area - works best for comps and must adjust viewport - For retina sized mobile widgets look up the paid libraries of Axuretopia. Personally have not used them.
- #23: - The viewport can be based on ‘device-width’ or ‘device-height’ (then the viewport is the size of the physical screen) - Custom viewports can also be created. See Resources section in .rp file for Android and iOS articles on topic. - Early versions of iOS7 had bugs with ‘device-width’. It seems to be resolved now. - For zooming to work, must have Maximum Scale larger than Minimum Scale and User Scalable set to ‘yes’. - We can cover these options in more detail during the demo. Not very well documented in Axure so must read the manufacturer’s details.
- #24: - We are interested in the display’s width and height in logical points - This determines how the pixels from the expected content resolution map to points based on the viewport configuration - Density helps with understanding how crisp graphics look on a screen: the higher the number, the crisper the graphics - Aspect ratio is important when trying to use an mWeb design across devices of different content resolutions e.g., from Android to iOS
- #26: - The more pixels per point, the crisper the graphics - Designing for retina or non-retina will determine the resolution of your comps (imported in Axure) - Having non retina comps in retina resolution will result in pixelation. The reverse will result in oversized graphics. - Thus must adjust how the content is shown in the display via the viewport.
- #27: - Alternatively can enable zooming. Makes most sense if your content is at retina: Maximum Scale = 1.0 and User Scalable = yes - For our prototype we will non retina since it is easiers to visualize the assets on the screen
- #30: - Base = view you start with, so make sure you know whether you are doing Mobile or Desktop first - Axure is looking into copying views - Often times you’d think you are in one view, just to find out you are in a different view. This is a hassle, especially if you have multi-view inheritance - Jeff Harrison has examples of how you can do fluid design: onWindowResize and setting the widget size (via DPs)
- #35: - How do you like Axure so far? - What amount of RWD experience you have? - What other tools do you use for RWD? - How do you envision using Axure?