Responsive Design with Axure 7.0’s Adaptive Views
-
Upload
svetlin-denkov -
Category
Documents
-
view
49 -
download
1
Transcript of Responsive Design with Axure 7.0’s Adaptive Views
Responsive Design with Axure 7.0’s Adaptive Views
by Svetlin Denkov@svetlindenkov
+
Who am I?
→DePaul CDM IxDA Chicago
?
Prototyping Experience
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
I write, but also…
…present on Axure and other prototyping tools:
Axure Meetup Chicago
Today’s Agenda
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]
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
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
The RWD Context
*RWD = Responsive Web Design
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
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
RWD & Axure
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
Let’s Jump In!
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
ClickthroughPrototype
Prerequisite:
Laying Content & Mobile Viewports
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)
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
The Viewport
The viewport has two parts to it.
1. Creating the size of the viewport2. Controlling how the content is displayed
Note: The latter allows for zooming in/out of the content (see Maximum Scale and User Scalable).
ViewportSize
Content Scaling
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
Real World Example
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 Retina1pt = 1px
Retina1pt = 2px
iPhone 5/5c/5S Example (cont)
If content is at retina (640px by 1136px):
If content is at non retina (320px by 568px):
Hammer Time!
(Ahem…Demo Time)
Adaptive Views Limitations
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
Takeaways
TAKEAWAYS
For RWD:
- Have agreement on the breakpoints- Plan ahead before starting to prototype- Prototype only what’s necessary
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
CONCLUSION
Give Axure 7.0 and Adaptive Views a try.
They will be a nice addition to your tool set!
Questions?
(Really, don’t be shy!)
That’s All Folks!
light_forger
@svetlindenkov
Svetlin Denkov
*Icon credit: www.flaticon.com*Image credit: www.axure.com