Design for iOS 7

29 %
71 %
Information about Design for iOS 7

Published on February 20, 2014

Author: Neosperience



Janos Tolgyesi for Neosperience

iOS 7 design cafe Janos Tolgyesi

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 • • 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

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.

 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: • OnCue music player:

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

 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 Composer

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

More resources •

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

iOS 7: Design in der Analyse – GIGA

Am 10. Juni 2013 stellte Apple in San Francisco ein rundum erneuertes iOS 7 der Öffentlichkeit vor. Auch das Design wurde (endlich) aufgefrischt..
Read more

iOS 7 vs iOS 6: Designs und Apps im großen Vergleich – GIGA

Wir haben unseren großen Design-Vergleich zwischen iOS 7 und OS 6 aktualisiert und mit Screenshots von iOS 7.1 bestückt...
Read more

The iOS 7 Design Cheat Sheet - Ivo Mynttinen / User ...

With the release of iOS 7, app designers and developers will need to adjust their visual language to match the new "flat" design of iOS. In addition to the ...
Read more

iOS 7 – komplett neues Design & neue Funktionen und Tricks!

iOS 7 bietet ein neues Design, neue Funktionen, neue Tricks, Kamera Einstellungen und vieles mehr! So könnt ihr auch alle anpassen und ändern!
Read more

iOS 7: Diese Apps zeigen wie man Flat Design richtig ...

So sehr man die neue iOS-7-Oberfläche auch mag, ohne entsprechende Apps ist man schnell raus aus der schönen neuen Flat-Design-Welt.
Read more

iOS 7 – 30 Tipps, Tricks und versteckte Features | t3n

Ob Mail-, Wetter- oder Safari-App: Die besten Tipps und Tricks für iOS 7 findest du in unserer Übersicht. Jetzt reinlesen und ausnutzen!
Read more

The iOS Design Guidelines - Ivo Mynttinen / User Interface ...

The iOS Design Guidelines. Design great-looking apps for Apple iOS devices. ... Since iOS 7, app icons have been using the shape of a superellipse.
Read more

iOS 7 Line SkinPack für Windows - Download - CHIP

iOS 7 Line SkinPack für Windows Das "iOS 7 Skin Pack" simuliert die Oberfläche eines iPhones. Wer sich den Apple-Look auch auf den Rechner holen möchte ...
Read more

Whited00r 7 macht’s möglich – iOS 7 für ältere iPhone-Modelle

Ihr seid noch im Besitz eines veralteten iPhones und wisst nicht was ihr damit anfangen sollt? Wie wäre es mit einem Design-Wechsel zu iOS 7 – Whited00r ...
Read more

iOS - iOS 10 - Apple (DE)

Alles, was du liebst, ist mit iOS 10 jetzt noch ausdrucksstärker und dynamischer. Und macht so viel Spaß wie noch nie.
Read more