Designing Apps for iPhone X
If iPhone X is a design for the next 10 years, maybe our app design should change with it? Here’s my Rule of Thumbs to help :)
This map is horribly incorrect. The entire bottom centimeter of the phone should be red.
Stefan Kieleithner and Michael Ochs:
Supporting the iPhone X was more difficult than initially anticipated, and it required much more work than adding support for any previously announced new iPhone model.
This time around, things were different, because not only did the screen size change — which was the case for previous hardware generations like the iPhone 6 and 6 Plus, and the 12.9" and 10.5" iPad Pro — but Apple also added a whole new concept with always visible elements. Because of this, if not laid out correctly, both the sensor housing and the indicator for accessing the Home screen will obscure content that would otherwise display fine on simple rectangular screens.
All iOS apps with dark modes or dark themes must reconsider them for OLED.
On LCDs, dark gray looks better than black. OLED is different.
Previously: iPhone X Design and the Notch.
Update (2017-11-10): Ryan Christoffel:
We’re only a week out from the iPhone X’s debut, so what we see from X-ready apps today will likely evolve over time as developers are able to live with the device longer. But despite it being early days still, there are several apps that stand out among the best the App Store has to offer for iPhone X.
Update (2017-11-20): Federico Viticci:
The most visible departure from Overcast 3.0 is the replacement of the “stacked card” visual metaphor (of which I was a fan) with a more traditional horizontal navigation. Show pages and episode details are now always pushed into view from the side of the app; the Now Playing screen has gone back to the Overcast 2.0 style, abandoning the Apple Music-inspired card design of version 3.0.
According to Arment, these were necessary changes to take advantage of the iPhone X’s screen and increase the reachability of all navigation controls throughout the app. It’s hard to tell without an iPhone X in my hands, but I assume that “embracing the notch” with a unified title bar should look better than blocking out the device’s status bar with a black background, which Overcast’s old stacked card UI (pictured in the image above) would have done.
Update (2017-12-15): Sebastiaan de With:
Now, a month after the release of iPhone X, I want to show you how we designed and released an app redesigned for iPhone X, without ever even having held one.
Update (2018-01-14): Khaos Tian:
Wait iMovie is still not updated for iPhone X?
[…] Previously: iPhone X Design and the Notch, Designing Apps for iPhone X. […]