Designing for iPhone X

5 min readDec 4, 2017

Guidelines to designing for iOS 11

Taller Screen

The extra 145 pt can mean an additional row of content, or the addition of a menu that we once thought was too cramped. That extra space applies to both the iPhone 8 and 8 Plus since they share the exact same ratio, despite having different resolutions.

The Notch

Perhaps the most controversial aspect of the new design is in the top 10%. The sensor housing, also known as the Notch, is an element that distracts and keep the iPhone X’s screen from truly being edge-to-edge. Technology-wise, it’s currently impossible to do without as it houses Face ID, the camera and the speaker. Design-wise, it’s one of the biggest compromises that Apple has made in recent years. But, after looking at how other phone makers are solving the problem, with either a large forehead, chin or both, I can’t say they’re without compromises.

Apple advises against hiding the notch with black bars. Their reasoning is that, as bothersome as it is, the notch still provides valuable space for the status bar and extra content. It provides context of the content underneath and gives a feeling that the screen is larger. Background elements such as wallpapers, maps and colors don’t suffer when being slightly clipped by the rounded corners and the notch. By hiding that space, your app will feel smaller and inconsistent with other apps, as explained in this video.

Large Titles

In iOS 11, screen titles are generally sized at 34 pt. They’re set at Semibold, in black. What’s interesting is that when you scroll, the title transitions to the Navigation bar, giving us back that valuable space. In Landscape, it just remains small in the bar. This sends a clear message to designers that first, you should use that extra space wisely and second, you need to make your design adaptive because that extra space may exist in portrait mode, but not in landscape mode.

Bigger Status Bar

The status bar has more than doubled in height, increasing from 20 pt to 44 pt. The Notifications can now be dragged from the top left. The Control Center can be swiped from the top right. Swiping from the bottom gives way to the Home screen, if done quickly. Or, to reach the screens navigator, you must interrupt that Home swipe.

Safe Area Layout Guides

When designing for the iPhone X, the rounded corners and the notch can clip the content. That should be avoided at all time. Using the safe area layout guide, you can push the content where the notch wouldn’t be, thus ensuring that no clipping will occur. In general, backgrounds should not follow the safe area guide, while content such as texts, images and buttons should follow these guides.

iPhone X in Landscape

In landscape, the status bar is hidden to maximize content space. The navigation bar is reduced to 32 pt, the tab bar to 30 pt and the home indicator, to 23 pt. While most users won’t switch to landscape mode on the iPhone X, there are still important scenarios for this usage. For example, for viewing a landscape photo, a full-screen video, or for reading an article with larger texts. After they’re finished, it’s counter intuitive to have to switch back to portrait, especially if the device is docked or held comfortably in a landscape position.

If your app is already adaptive for iPads, why not support iPhone’s landscape as well? A large gain with minimal effort, as most modern apps are designed with adaptive layouts in mind.

The Rounded Corners

Content clipping can also occur in the corners of the iPhone X. Unless you hide the status bar or home indicator, you shouldn’t face this issue, since they cover the corner areas. However, for apps that are used mostly in full-screen, like Camera, it will be important to ensure that there is enough margin in the corners. To perfectly follow the rounded corners, a radius of around 16 pt is recommended for your buttons.

Adaptive Layout and Multitasking

With the increasing number of device resolutions to deal with, it is crucial to make your layout adaptive. Using tools like Sketch’s Constraints and Xcode’s Auto Layout, you have to design in a way that the screen size is flexible and can show extra menus if needed.

STACK VIEWS

In Xcode, you’ll also find Stack Views, a fantastic tool for making your layouts more reactive to changes. Same elements and groups can stack together dynamically and all you need to edit is the spacings as well as how the content will fill the box. Then, you can complete the work with Auto Layout. Apple recommends to use Stack Views first, then Auto Layout second.

Points and Pixels

Developers work with point values, so it is important to understand the difference with pixels. When the iPhone was first introduced, the two units were the same: 1pt equals 1px. Then, when retina screens came along, 1pt became 2px. So think of points as the values in the original iPhone, and pixels as the real values depending on the pixel density (iPhone 4, 5, 6, 7, 8 = @2x, iPhone 8 Plus, iPhone X = @3x). To better understand the different between points and pixels, I highly recommend watching this video.