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
SAVE 50% To celebrate WWDC23, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.
