Designing for iPhone X
towards a gesture driven future
iPhone X (iPhone ten) is the biggest change to happen to the iPhone since its early day, a much bigger screen real estate and the removal of the physical home button. For designers, this means more freedom in our canvas. Designing for this new machine will bring some new opportunities and challenges to both designer and developer. Above all, the new iPhone X gestures will surely impact the way an iPhone app UI/UX is designed.
Things to keep in mind when designing for new iPhone X
Let’s look at the new features of the iPhone X and how to design for them
Embrace the Notch
The status bar is taller on iPhone X than on other iPhones and it’s split into two parts because of the sensor housing (also known as the Notch). The extra height on iPhone provides more vertical space for content than on other iPhones, and the status bar occupies 44pt of that which your app probably won’t fully utilize. Also, the status bar on iPhone X doesn’t change height when background tasks like voice recording and location tracking are active, so reconsider hiding the status bar in your app. Hide it only to offer added value.
Don’t attempt to hide the device’s rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen.
Apple’s official policy is that designers and developers should embrace the notch. By hiding the notch with black bars, your app will feel inconsistent with other apps.
Don’t mess with gestures
With the new iPhone X, the home button is gone, replaced instead by gestures. Users now rely on swipe gestures at the bottom edge of the display to access the Home screen and app switcher so avoid placing interactive controls in close proximity to the home screen indicator and in corners and don’t hide the home indicator unless it’s absolutely necessary.
You can implement “Edge Protection” which will prefer the app’s specific gesture before the OS gesture. The user needs to swipe up twice to get to the home screen, the first one evokes your app behavior and the second one evokes the system behavior. Don’t use this all the time, because it will make it harder for your user to use system features.
Get the Layout right
All apps should adhere to the safe area and layout margins defined by UIKit. If you have an existing app built using UIKit and Auto Layout then your app should safely adhere to all the new margin layout guides and safe areas. Backgrounds should not follow the safe area guide, while UI elements such as texts, images, and buttons should follow these guides.
When adapting PlanesOnly app for iPhone X we at Thiken placed all the content within the safe area so it looks great in any orientation and isn’t clipped by corners or the device’s sensor housing.
Mind the new aspect ratio
iPhone X has a different aspect ratio than the other iPhones so artworks designed to fit previous generation iPhones could get a little weird. An Artwork designed for 4.7" iPhone could end up being cropped or pillarboxed when viewed on iPhone X. Likewise, a full-screen iPhone X artwork appears cropped or pillarboxed when displayed on a 4.7" iPhone. So make sure to create separate assets for the different aspect ratios.
All new pixel density
iPhone X sports Super Retina Display with a resolution of 2436 x 1125 (458ppi) and a @3x image scale factor so if you’re working with rasterized images, you’ll want to export your assets @3x. Apple recommends using PDF for glyphs and other flat, vector artwork that requires high-resolution scaling.
Websites in Landscape
iPhone X renders your site with a large empty space on the left and right sides in landscape mode. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners or the device’s sensor housing. To avoid this, Apple has published a guide for adapting your site for iPhone X in landscape mode.
You can start adopting viewport-fit and safe area insets, by using Safari in the iPhone X Simulator included in Xcode 9.
Hope this article gives you some good hints on how to design for the new iPhone X edge-to-edge screen. After you’ve made your adjustments, use Xcode 9.1 iPhone X simulator to preview your updated assets and screens.
