iPhone X: Designing for the Notch

Zack Simon

2 min read

Sep 17, 2017

iPhone X: Designing for the Notch

The unveiling of Apple’s flagship phone, the iPhone X, has confirmed the existence of the largely speculated top “notch” or sensor housing. It has also confirmed how Apple intends for the UI to work with it.

Instead of trying to hide the sensor housing using a black UI, similar to how they hide the screen edges on the Apple Watch, Apple has chosen to show its horns (literally) by pronouncing the UI in full color past the sensor housing into each of the corners of the screen.

Portrait Orientation

While this seems purely aesthetic, there are a few considerations to make when designing around this sensor housing in both portrait and left/right landscape orientations. In portrait orientation, you’ll need to define how to adapt the status bar background, and if that should change for this device. Many apps choose to extend their navigation bar color into the background of the status bar, and on this new phone, this continues to be the recommended approach.

The safe area on the iPhone X keeps UI out of hte status bar and bottom area

It is also recommended that you do not make the status bar black in an attempt to mask the sensor housing. As it currently stands, there is no way to reliably resize the status bar, so you may encounter some weirdness in attempting to manually blend it in with the sensor housing. Regardless, your app should try to conform to the norm since it will have to coexist with many other applications in the user’s daily workflow.

Apple does not recommend masking the sensor housing with a black status bar. Allow your backgorund to extend edge-to-edge.

Landscape Orientation

The sensor housing does also have some ramifications when displaying UI in a landscape orientation. Your UI will have to adapt to this in ways that respect the sensor housing without causing the user anguish. iOS 11 already employs safe areas and margins to help ensure your layout does not fight with system UI like the new Home indicator and the status bar. This also applies to table view cells in landscape orientation. These safe areas and margins guide the UI to be centered nicely, regardless of whether or not the screen is landscape right or left.

Native table view cells scale the full width of the screen gracefully and conform to layout margins while content remains safely in the safe area

If your app uses platform-standard components and Auto Layout, your UI should scale gracefully to accommodate the iPhone X screen. For custom UI, you will need to be aware of any UI elements that would be cropped by the screen’s corners or sensor housing. It is still recommended that you conform to layout margins and the safe area when designing custom UI.

More Information

Discover how to get your apps ready for iPhone X and check out Apple’s newly updated design resources. I highly recommend this video, which provides an overview of designing for iPhone X. We also recommend reviewing the updated Human Interface Guidelines, as well as the updated Sketch, Photoshop and Adobe XD resources.

Zack Simon

Author Big Nerd Ranch

Zack is an Experience Director on the Big Nerd Ranch design team and has worked on products for companies ranging from startups to Fortune 100s. Zack is passionate about customer experience strategy, helping designers grow in their career, and sharpening consulting and delivery practices.

Speak with a Nerd

Schedule a call today! Our team of Nerds are ready to help

Let's Talk

Related Posts

We are ready to discuss your needs.

Stay in Touch WITH Big Nerd Ranch News