Design Guidelines and 13 Essential Changes for iPhone X UI

The iPhone X features a 1125×2436‑pixel Super Retina full‑screen display with a top notch for Face ID sensors, a height of 812 pt (145 pt taller than previous iPhones), and requires designers to work with a 375×812 pt canvas using @3x assets.

When adapting apps, native iOS controls (navigation bar, table view, collection view, tab bar) automatically respect the new safe‑area insets, but custom layouts must be updated to avoid the rounded corners, notch, and Home indicator.

Key design changes (13 points):

Provide a full‑screen experience : Ensure scrollable content extends to the very bottom of the screen without hiding the notch or curved edges.

Center important information : Place critical UI elements within the safe‑area so they are not clipped by sensors or corners.

New status bar : The status‑bar height increases from 20 pt to 44 pt; design it to be flexible for calls or navigation usage.

Display the new status bar : Do not hide the status bar unless absolutely necessary, as the extra height offers more space for content.

Full‑screen images : Update full‑screen pictures to avoid cropping of important visual elements.

Avoid interactive controls at the bottom : Do not place buttons near the Home indicator to prevent accidental gesture conflicts.

Never hide the Home indicator : It should only be hidden for immersive experiences like video playback.

Richer colors : The new display uses the P3 color gamut, offering more saturated colors especially for photos and videos.

Respect user gestures : Custom gestures near the Home indicator or status bar must not interfere with native iOS gestures.

Face ID integration : Replace Touch ID UI elements with Face ID prompts and ensure related UI is provided.

Custom keyboards : Do not add Emoji or dictation buttons; the system adds them near the Home indicator automatically.

Larger navigation bar : iOS 11 introduces a taller navigation bar that works well with the new status bar.

Use Xcode 9 simulator : Preview UI changes instantly on the simulator to verify layout adjustments.

Designers can also refer to Apple’s official resources such as Sketch, Photoshop, and Adobe XD templates available at the Apple Design Resources page, as well as the iOS Human Interface Guidelines for iPhone X.

For a video overview, see Apple’s "Designing for iPhone X" session (https://developer.apple.com/videos/play/fall2017/801/).