Designing apps for the iPhone X notch
Get it right and it looks great. Get it wrong, and, well...
A number of people have written blog posts about the new sensor housing in iPhone X, but Max Rudberg has published the best yet in his article UI Design for iPhone X: Top Elements and the Notch.
Not only does Rudberg walk us through the key parts of Apple’s design guidelines for iPhone X, but he gives hands-on examples of how various components can look and work alongside the sensor housing. So, for the navigation bar he compares translucent bars, transparent bars, and a card-like approach as seen in Apple Music.
There’s a lot of fine-grained detail to absorb before you start updating your apps for iPhone X, but I really recommend you pay close attention to his discussion of alignment in landscape mode – it’s harder than it looks!
If you’re short on time, here’s a quote that sums it up nicely:
Eventually, they will get rid of the notch. It could be 2, 5, or even 10 years, but it’s a stop gap, not a permanent design solution. In the meantime, treat it like the elephant in the room. We all know it’s there, but for the most part, you should design as if it’s not.
Link: UI Design for iPhone X: Top Elements and the Notch
LEARN SWIFTUI FOR FREE I wrote a massive, free SwiftUI tutorial collection, and also have a growing list of free SwiftUI tutorials on YouTube – get started today!
About the author
Paul Hudson is the creator of Hacking with Swift, the most comprehensive series of Swift books in the world. He's also the editor of Swift Developer News, the maintainer of the Swift Knowledge Base, and a speaker at Swift events around the world. If you're curious you can learn more here.
