Janos Tolgyesi for Neosperience

1. iOS 7 design cafe
Janos Tolgyesi
20/02/2014

2. 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

3. 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

4. iOS 7: Clear design
•
Focus on function
•
Focus on the basics
•
Focus on content
•
Focus on interactions

5. 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

6. 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

7. Focus on content
•
Strip away the skeuomorphic
ornamentation and realism, leave the
fundamentals
•
De-emphasise “chrome”
•
Content as a UI

8. 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

9. What is “chrome”?
•
Everything that are not part of the content
themself
•
Navigation bar, tab bar, hamburger menu, etc.
•
Hide chrome whenever possibile

10. DEMO for hiding “chrome”
iOS Safari hides URL and toolbar

11. Content as an UI
•
Whole screen whenever possible
•
Content defining the screen: blurred glass
•
Use content for navigation

12. DEMO for Content as a UI:
iOS Reminders and Passbook

13. 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”

14. New design paradigm
•
iOS 6: “looks like real things”
•
iOS 7: “feels like real things”

15. Making the UI feel “real”
•
Dynamics: instead of thinking about animations,
think about physical principles
•
•
Continuity: instead of separate screens think
about items that persist from screen to screen
•
•
Bouncy button? Springs? Magnets? Gravity?
How to animate them? How to make transitions?
Bounciness: add playfulness to the items

16. New developer tools in iOS 7
•
UIKit dynamics
•
Multi-level UI: blurred glass and parallax effect
•
Bouncy animations
•
New gestures
•
Custom screen transitions

17. UIKit Dynamics
•
Physics engine for animating UI elements
•
Relatively simple API
•
Gravity, attachments, springs, collision, constant
force, snap, friction, mass, flexibility, etc.

18. DEMO:
UIKit Dynamics Catalog

19. Advanced UIKit Dynamics
•
Combining of these effects allows to define UI
that obeys to physical laws

20. 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

21. 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

22. [DEMO]
Blurred glass: Apple Control Center
Parallax effect: Home screen and alert popup

23. 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

24. [DEMO: Custom gestures]
3D catalogue of Mattel ToyBox

25. Custom screen transitions
•
New back and next screen animations
•
The developer (and the designer!) can define
new screen transitions

26. [DEMO: Custom screen transitions]
ILoveCats example

27. Designer tools
•
To design dynamic interactions, Photoshop is
not enough any more
•
Design dynamic UIs without writing a line of
code: Quartz Composer

28. 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 Composer
http://vimeo.com/daveobrien/videos

29. Conclusion
•
Designers have to be a bit developers
•
Developers have to be a bit designers
… and we surely need a common language

30. More resources
•
http://capptivate.co