design for ios 7
DESCRIPTION
Janos Tolgyesi for NeosperienceTRANSCRIPT
![Page 1: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/1.jpg)
iOS 7 design cafeJanos Tolgyesi
20/02/2014
![Page 2: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/2.jpg)
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
![Page 3: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/3.jpg)
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
![Page 4: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/4.jpg)
iOS 7: Clear design
• Focus on function • Focus on the basics • Focus on content • Focus on interactions
![Page 5: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/5.jpg)
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
![Page 6: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/6.jpg)
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
![Page 7: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/7.jpg)
Focus on content
• Strip away the skeuomorphic ornamentation and realism, leave the fundamentals
• De-emphasise “chrome” • Content as a UI
![Page 8: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/8.jpg)
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
![Page 9: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/9.jpg)
What is “chrome”?
• Everything that are not part of the content themself
• Navigation bar, tab bar, hamburger menu, etc. • Hide chrome whenever possibile
![Page 10: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/10.jpg)
DEMO for hiding “chrome” iOS Safari hides URL and toolbar
![Page 11: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/11.jpg)
Content as an UI
• Whole screen whenever possible • Content defining the screen: blurred glass • Use content for navigation
![Page 12: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/12.jpg)
DEMO for Content as a UI: iOS Reminders and Passbook
![Page 13: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/13.jpg)
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”
![Page 14: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/14.jpg)
New design paradigm
• iOS 6: “looks like real things” • iOS 7: “feels like real things”
![Page 15: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/15.jpg)
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
![Page 16: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/16.jpg)
New developer tools in iOS 7
• UIKit dynamics • Multi-level UI: blurred glass and parallax effect • Bouncy animations • New gestures • Custom screen transitions
![Page 17: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/17.jpg)
UIKit Dynamics
• Physics engine for animating UI elements • Relatively simple API • Gravity, attachments, springs, collision, constant
force, snap, friction, mass, flexibility, etc.
![Page 18: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/18.jpg)
DEMO:UIKit Dynamics Catalog
![Page 19: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/19.jpg)
Advanced UIKit Dynamics
• Combining of these effects allows to define UI that obeys to physical laws
![Page 20: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/20.jpg)
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
![Page 21: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/21.jpg)
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
![Page 22: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/22.jpg)
[DEMO]Blurred glass: Apple Control Center
Parallax effect: Home screen and alert popup
![Page 23: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/23.jpg)
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
![Page 24: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/24.jpg)
[DEMO: Custom gestures] 3D catalogue of Mattel ToyBox
![Page 25: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/25.jpg)
Custom screen transitions
• New back and next screen animations • The developer (and the designer!) can define
new screen transitions
![Page 26: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/26.jpg)
[DEMO: Custom screen transitions] ILoveCats example
![Page 27: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/27.jpg)
Designer tools
• To design dynamic interactions, Photoshop is not enough any more
• Design dynamic UIs without writing a line of code: Quartz Composer
![Page 28: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/28.jpg)
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
![Page 29: Design for iOS 7](https://reader030.vdocuments.us/reader030/viewer/2022020217/54c754534a7959253c8b4582/html5/thumbnails/29.jpg)
Conclusion
• Designers have to be a bit developers • Developers have to be a bit designers
… and we surely need a common language