iPhone X is already here redesigning the way the content is displayed and creating a brand-new experience. It has an edge to edge Super Retina Display with a resolution of 1125×2436 px. iPhone X features a special cut-out at the top of the screen. Thus designing apps for this futuristic machine brings new challenges as well as opportunities. Let’s learn how to design an app or game to feel and look great on iPhone X.
Though the screen width remains the same for iPhone X, and it’s 145 pt taller than the iPhone 6, 7, and 8. Such screen dimensions result in 20% more vertical space. When working out the app design for iPhone X, try not to make the UI too complex taking advantage of all new features (cut-out, new home indicator, round edges).
The good news is if you have a native app for iOS, you don’t have to make any changes – the app will be automatically adopted for the new iPhone X. All navigation bars, collection views, tables, and tab bars will be automatically positioned. When designing, you must ensure that the layouts fit the screen perfectly. If your app has a custom layout, you may need to update it for the new iPhone X. With the Auto Layout, everything will be easy.
Specific challenges may occur with full-screen images. If you use them, consider updating the app while they can be cropped and some essential elements may be hidden.
Center your content
Brand-new status bar
Moreover, the status bar should be visible all time. Since the screen is bigger and taller, it would be a good idea to unhide the bar. It is essential to point, that the new status bar doesn’t change its height when the device records voice or tacks the location.
Where to place interactive controls?
However, you should and have to use the function bars and tab bars but try not to interfere with the home indicator.
Smart home indicator
With the new iOS, the users get an adoptive home indicator which hides automatically when the screen is inactive and appears when you relaunch the app. This function comes in handy when listing photos or watching videos. Besides the auto-hide, the home indicator adapts to the color of your app’s background and changes it automatically.
With the new smart home indicator, there is no place for button pressing, everything is controlled by gestures. Moreover, you can use custom gestures in games as well as set own gestures to control the device.
More colors than ever before
Improved security with Face ID
Apple advises keeping the original aspect ratio since the iOS won’t be able to scale the video based on the viewing mode correctly.