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

More resources

• http://capptivate.co