The black notch at the upper edge of the device, which covers part of the display, is
probably the most controversial innovation. It is already clear that this will lead to
display problems in the near future, which will mainly affect the landscape mode. Until
a corresponding design solution is implemented for the majority of apps, iPhone X users
of the first hour will probably have to put up with partially hidden videos or misplaced
However, Apple gives general hints in its guidelines that concern the handling of the
notch. The round corners and the notch for sensors and cameras should not be hidden by
black bars. It is recommended to follow this recommendation to avoid penalties in the
App Store placement.
Figure 1: Notch, left: correct handling of the notch, right: what not to do - hide notch
Due to the notch, the status bar of the new iPhone has also changed significantly. For
the first time in the history of the iPhone, the known height has been increased from 20
pt to 44 pt and is now as high as the navigation bar sitting below it.
Figure 2: Status bar, left: iPhone X 44pt, right: iPhone 7
The corner radius was also measured with 44 pt. Apple follows a clear line here, because
this number has accompanied designers since the first days of the iPhone: A square with
a side length of 44 pt represents the smallest unit that users can easily hit, according
to Apple's guidelines.
Figure 3: Corner radius of the iPhone X
Status indicators such as background location retrieval, which previously doubled the
size of the status bar, are now presented in the form of a button centered around the
time and take up a minimum of space.
Figure 4: New design of the In-Call status bar in the form of
colored buttons (here blue for location retrieval in the background).
Landscape Modes and Safe Areas
As a consequence of the notch introduction and to ensure the correct display of layouts
in landscape mode, so-called safe areas have been introduced. Apple again defines a
distance of 44 pt between content and the device corners. However, backgrounds are
allowed to extend over the full width to suggest a full-screen experience to the
Figure 5: Safe Areas for landscape mode
In contrast, designers have more leeway when designing video players or cards. Apple
itself defines free-standing UI elements here, some of which extend into the corners.
These usually have a superelliptical shape, a mixture of ellipse and rectangle, which
nicely shows how the controls can harmonize with the rounded corners of the display.
Figure 6: Free-standing UI elements in the video player
In summary, visually appealing and platform-compliant interfaces on the iPhone X mean
significantly more effort for designers and developers compared to previous models.
However, the enlargement of the display also opens up many new possibilities to further
develop the user experience. This decision is particularly beneficial for apps in the
gaming and photography sectors, but it also offers a good opportunity to make more
information ascertainable with the same device size.
It is worthwhile for all designers to have the complete catalog of specifications defined in the Human
Interface Guidelines ready to hand. Apple's Developer portal also offers free iPhone X templates for the
popular tools Photoshop, XD and Sketch.