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.
How to Extend Axure's Animation CapabilitySvetlin Denkov
It can be argued that animations and particularly transitions are integral part of innovative mobile experiences for iOS and Android. Nowadays, UXers must know about motion design and staging.
While there are tools out there which are built for prototyping animations, Axure has similar if not identical capability with the help of few technologies.
In this presentation, we will go over the current animation limitations of Axure 7.0 including firing multiple animations on the same item, resizing, animation origin and others. In the process we will step by step build a complex animation sequence with the help of AxQuery (Axure’s flavor of jQuery) and CSS3 transform properties.
This presentation will give you the tools to build animations otherwise not possible in Axure such as dynamic rotations, varying the animation speed with custom Bezier curves, and others.
Intro to Axure 7 - User Vision Breakfast BriefingStephen Denning
Axure 7 is the latest version of the successful prototyping software and offers some interesting new functionality. This presentation introduces the new version (in beta at the time of the presentation) and highlights some of the headline additions, including the "Repeater Widget" and "Adaptive Views".
How to fake a database/backend in Axure... and moreSandra González
For more information on London Axure Meetup visit:
http://AxureLondon.com
The RP File for the repeater widget presentation can be found here:
http://axurelondon.com/RP_Files/RepeaterWidget_AxureLondon.rp
Meetup Description:
Thank you all for voting on what our next topic should be. And the winner is (drum roll)... The Repeater Widget!
The Repeater Widget is one of the exciting new feature introduced with Axure 7, and it was created with the purpose of display repeating patterns of text, images, and links or in other words, the ability to "fake" a backend.
For Show-and-Tell, Scott from TalkTalk will walk us through the Axure prototype that helped shaped TalkTalk's current YouView TV app. He will demonstrate how to use Axure to prototype TV apps using a TV remote control to control the app…. I know what you all thinking… I had no idea that could even be done! If so, come along and check it out :D
Last but not least, I have a very special guest, author of the book Axure for Mobile, Lennart Hennigs, who will be joining us via Skype. I will have a few questions prepared for him, and I will be opening the floor for Q&A, so have your own brilliant mobile prototyping questions ready for him as well.
As always, there will be pizza and drinks sponsored by Axure, and I will have plenty this time, I pinky promise ;)
Well that's it for now, I hope to see you all in three week!
Cheers!
Sandra
How to Extend Axure's Animation CapabilitySvetlin Denkov
It can be argued that animations and particularly transitions are integral part of innovative mobile experiences for iOS and Android. Nowadays, UXers must know about motion design and staging.
While there are tools out there which are built for prototyping animations, Axure has similar if not identical capability with the help of few technologies.
In this presentation, we will go over the current animation limitations of Axure 7.0 including firing multiple animations on the same item, resizing, animation origin and others. In the process we will step by step build a complex animation sequence with the help of AxQuery (Axure’s flavor of jQuery) and CSS3 transform properties.
This presentation will give you the tools to build animations otherwise not possible in Axure such as dynamic rotations, varying the animation speed with custom Bezier curves, and others.
Intro to Axure 7 - User Vision Breakfast BriefingStephen Denning
Axure 7 is the latest version of the successful prototyping software and offers some interesting new functionality. This presentation introduces the new version (in beta at the time of the presentation) and highlights some of the headline additions, including the "Repeater Widget" and "Adaptive Views".
How to fake a database/backend in Axure... and moreSandra González
For more information on London Axure Meetup visit:
http://AxureLondon.com
The RP File for the repeater widget presentation can be found here:
http://axurelondon.com/RP_Files/RepeaterWidget_AxureLondon.rp
Meetup Description:
Thank you all for voting on what our next topic should be. And the winner is (drum roll)... The Repeater Widget!
The Repeater Widget is one of the exciting new feature introduced with Axure 7, and it was created with the purpose of display repeating patterns of text, images, and links or in other words, the ability to "fake" a backend.
For Show-and-Tell, Scott from TalkTalk will walk us through the Axure prototype that helped shaped TalkTalk's current YouView TV app. He will demonstrate how to use Axure to prototype TV apps using a TV remote control to control the app…. I know what you all thinking… I had no idea that could even be done! If so, come along and check it out :D
Last but not least, I have a very special guest, author of the book Axure for Mobile, Lennart Hennigs, who will be joining us via Skype. I will have a few questions prepared for him, and I will be opening the floor for Q&A, so have your own brilliant mobile prototyping questions ready for him as well.
As always, there will be pizza and drinks sponsored by Axure, and I will have plenty this time, I pinky promise ;)
Well that's it for now, I hope to see you all in three week!
Cheers!
Sandra
Slides from my talk at Mobilization 2014 conference in Łódź, Poland.
Brief introduction to new tool by jimu Labs, called Mirror. It allows quick preview of UI changes directly on devices.
This presentation was given at the jQuery conference 2010 in Mountain View and featured the first public premiere of a sneak peek video of our upcoming JavaScript game engine.
The video preview can be found here: http://youtu.be/Ol3qQ4CEUTo
Enjoy and follow me at @pbakaus on Twitter!
Integrating Axure Into Your Design ProcessFred Beecher
Like any powerful design tool, Axure RP Pro can adapt itself to your design process. But to gain the full benefit of this tool, you must (at least a little bit) adapt your process to Axure as well. This presentation will help you do both of these things.
Storyboarding is an exciting new feature in iOS 5 that will save you a lot of time building user interfaces for your apps. With a storyboard you have a better conceptual overview of all the screens in your app and the connections between them.
Conditional Logic, Variables, & Raised Events in AxureFred Beecher
Loren Baxter & I put together this presentation to introduce you to some of Axure's most advanced features. Even long-time Axure users can get something out of it, including several undocumented conditional logic tricks.
The following presentation highlights the steps to create your own First Person VR Controller and test environment using Unity3D, Cardboard SDK, a Playstation controller, Android Device and Head Mounted Google Cardboard.
UIStackView – Tom Bowden – Dec 2015 – Eventacular IncTom Bowden
Presentation on a new Apple UIKIt view layout technology in iOS 9 called UIStackView, with examples regarding its usage and properties. Presentation given by Tom Bowden, CEO of Eventacular, at Tokyo iOS Meetup in December 2015.
In this course i present an overview of Axure and what you can do with it.
The most important, i try to point you in the right direction to become an expert by yourself.
In this presentation i cover the following subjects:
- Basic widgets for wireframing
- Prototyping: Events, Interactions and Conditionals
- Exporting for devices (mobile and desktop)
- Documentation and Notes
- Tips, a lot of them
- Connect Axure prototypes with third party services
Slides from my talk at Mobilization 2014 conference in Łódź, Poland.
Brief introduction to new tool by jimu Labs, called Mirror. It allows quick preview of UI changes directly on devices.
This presentation was given at the jQuery conference 2010 in Mountain View and featured the first public premiere of a sneak peek video of our upcoming JavaScript game engine.
The video preview can be found here: http://youtu.be/Ol3qQ4CEUTo
Enjoy and follow me at @pbakaus on Twitter!
Integrating Axure Into Your Design ProcessFred Beecher
Like any powerful design tool, Axure RP Pro can adapt itself to your design process. But to gain the full benefit of this tool, you must (at least a little bit) adapt your process to Axure as well. This presentation will help you do both of these things.
Storyboarding is an exciting new feature in iOS 5 that will save you a lot of time building user interfaces for your apps. With a storyboard you have a better conceptual overview of all the screens in your app and the connections between them.
Conditional Logic, Variables, & Raised Events in AxureFred Beecher
Loren Baxter & I put together this presentation to introduce you to some of Axure's most advanced features. Even long-time Axure users can get something out of it, including several undocumented conditional logic tricks.
The following presentation highlights the steps to create your own First Person VR Controller and test environment using Unity3D, Cardboard SDK, a Playstation controller, Android Device and Head Mounted Google Cardboard.
UIStackView – Tom Bowden – Dec 2015 – Eventacular IncTom Bowden
Presentation on a new Apple UIKIt view layout technology in iOS 9 called UIStackView, with examples regarding its usage and properties. Presentation given by Tom Bowden, CEO of Eventacular, at Tokyo iOS Meetup in December 2015.
In this course i present an overview of Axure and what you can do with it.
The most important, i try to point you in the right direction to become an expert by yourself.
In this presentation i cover the following subjects:
- Basic widgets for wireframing
- Prototyping: Events, Interactions and Conditionals
- Exporting for devices (mobile and desktop)
- Documentation and Notes
- Tips, a lot of them
- Connect Axure prototypes with third party services
A continuation of the "technical issues" presentation. Reviews the technology of responsive design, then focuses on writing and design issues including how to shorten text, the "mobile first" design philosophy, and more. Also presents a way to automatically switch between "click" and "tap" in instructions.
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
A session talk for #NAGW2012 on:
Mobile app, choices
Dreamweaver’s place
Creating Mobile Design (actual design, not code)
Other helpful Adobe tools to create HTML/CSS
jQuery Mobile in DW
PhoneGap Build in DW
Lecture 6 of the COMP 4010 course on AR/VR. This lecture is about designing AR systems. This was taught by Mark Billinghurst at the University of South Australia on September 1st 2022.
SharePoint Saturday Zurich 2017 - SharePoint Framework the new development wayGiuliano De Luca
Sharepoint Framework is the new way to develop solution totally safe for your SharePoint environment and like a plus we have a new tool chain that the developers can use also on other operative systems.
Now we have the possibility to use Typescript and other popular client side framework like Angular, React and Knockout.
In this session I would like to show, how to move the first steps with SharePoint Framework.
A brief exploration of proposed Level 4 Media Queries and some thoughts about the future of the web. Presented at Responsive Day Out in Brighton on June 27 2014.
Similar to Responsive Design with Axure 7.0’s Adaptive Views (20)
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
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
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
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
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
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
- 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.
- 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.
- 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
- 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.).
- # years of experience
- types of projects
- workshops, articles on Axure but other tools
- passionate prototyper
- frequent presentations at Axure meetup and Axure world
- 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
- 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
- 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
- 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.
- 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
- 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
- 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
- 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.
-
- 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
Viewport is used in HTML/CSS and other prototyping tools
It is an important concept to know, especially if designing for mobile/tablet
- 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.
- 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.
- 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
- 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.
- 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
- 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)
- 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?