Are you ready for the new iPhone X UI?

The iPhone X is here. Are you ready for the new changes to the UI?

The new iPhone X presents new UI design challenges. With the introduction of the top notch, designers must ensure that layouts are not obscured by the iPhone X’s sensor housing or the rounded corners.

Screen Size & Layout

In portrait orientation, the width of the iPhone X matches the displays of the iPhone 6, 7, and 8. However, the iPhone X is 145pt taller, which is about 20% more vertical space. The aspect ratio is also different from previous iPhone generations.

iPhone X dimensions:

• Portrait: 1125px x 2436px (375pt x 812pt @3x)
• Landscape: 2436px x 1125px (812pt x 375pt @3x)

Apple encourages apps to provide a full-screen experience, meaning the backgrounds should extend to the edges of the display. In addition, vertically scrollable layouts should continue all the way to the bottom.

Color

The iPhone X display supports a P3 color space which can produce richer, more saturated colors for sRGB. Make sure your images include embedded color profiles.

Gestures

The iPhone X display uses screen-edge gestures to provide access to various controls. Designers should take care not to place elements along the edge that could interfere with the screen-edge gestures.

To learn more about the new UI for the iPhone X, read about the iOS Human Interface Guidelines.