design for ios 7
DESCRIPTION
Janos Tolgyesi for NeosperienceTRANSCRIPT
iOS 7 design cafeJanos Tolgyesi
20/02/2014
Agenda• New design paradigm of iOS 7 • Clear design • Content as a UI • UIKit Dynamics: physics in the UI • Multilevel UI and parallax • New tools for designers: Quartz Composer • Conclusions
iOS 6: Skeumorphism
• UI elements “look like real things” • Helps the user to guess the function of a UI
element • Examples: 3D buttons, paper-like backgrounds,
etc. • Some says it has a transitional function
iOS 7: Clear design
• Focus on function • Focus on the basics • Focus on content • Focus on interactions
Focus on function
• An app that does everything is an app that does nothing
• An app designed for everyone is an app designed for no one
Focus on the basics
• Contrast: use for driving user’s attention • Repetition: the brain searches for patterns • Alignment: make order between UI elements • Proximity: related things close the each other • Typography: minimum number of font styles
Focus on content
• Strip away the skeuomorphic ornamentation and realism, leave the fundamentals
• De-emphasise “chrome” • Content as a UI
Simplified UI elements
• If the basic UI is simple then any extra visual weights (gradients, borders, etc.) drives attention
• Use them only if the items require special attention
What is “chrome”?
• Everything that are not part of the content themself
• Navigation bar, tab bar, hamburger menu, etc. • Hide chrome whenever possibile
DEMO for hiding “chrome” iOS Safari hides URL and toolbar
Content as an UI
• Whole screen whenever possible • Content defining the screen: blurred glass • Use content for navigation
DEMO for Content as a UI: iOS Reminders and Passbook
Focus on interactions• Direct manipulation
• iOS “Photos” does not use arrows to move between photos
• Manipulate UI elements as they would behave in reality
• 3D effects: parallax and multilayer UI • Navigation with gestures: swipe from the left
edge of the screen takes you “Back”
New design paradigm
• iOS 6: “looks like real things” • iOS 7: “feels like real things”
Making the UI feel “real”
• Dynamics: instead of thinking about animations, think about physical principles
• Bouncy button? Springs? Magnets? Gravity?
• Continuity: instead of separate screens think about items that persist from screen to screen
• How to animate them? How to make transitions?
• Bounciness: add playfulness to the items
New developer tools in iOS 7
• UIKit dynamics • Multi-level UI: blurred glass and parallax effect • Bouncy animations • New gestures • Custom screen transitions
UIKit Dynamics
• Physics engine for animating UI elements • Relatively simple API • Gravity, attachments, springs, collision, constant
force, snap, friction, mass, flexibility, etc.
DEMO:UIKit Dynamics Catalog
Advanced UIKit Dynamics
• Combining of these effects allows to define UI that obeys to physical laws
More demo on UIKit dynamics
• Collection view with springs, exploding share button, bouncing rubber button
• Sandwich flow: Content as an UI & UIKit Dynamics • Circle menu:
http://www.youtube.com/watch?v=YLn2WXDvv2E • OnCue music player:
http://www.youtube.com/watch?v=J_qkN696W5o
Multi-level UI
• Different levels of the app (background, content, menu, popup, etc.)
• Different levels of the UI • Developer tools: parallax effect and blurred
glass
[DEMO]Blurred glass: Apple Control Center
Parallax effect: Home screen and alert popup
New gestures
• Gestures are somewhat analogue to keyboard shortcuts
• iOS 7 introduced the “swipe from the edge of screen” gesture
• Left screen is used for “Back” • Other edges might be defined by developer • Reserved for power users
[DEMO: Custom gestures] 3D catalogue of Mattel ToyBox
Custom screen transitions
• New back and next screen animations • The developer (and the designer!) can define
new screen transitions
[DEMO: Custom screen transitions] ILoveCats example
Designer tools
• To design dynamic interactions, Photoshop is not enough any more
• Design dynamic UIs without writing a line of code: Quartz Composer
Quartz Composer• Free tool from Apple • Used for designing visual effects, animations,
transitions, etc. • Does not need you to write code • But still has a steep learning curve • Video tutorial: Building Facebook home with
Quartz Composerhttp://vimeo.com/daveobrien/videos
Conclusion
• Designers have to be a bit developers • Developers have to be a bit designers
… and we surely need a common language