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.

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.

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.

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.