Since the screen is taller and you have more estate to display your content it might be useful to unhide that status bar.

If you currently hide the status bar in your design, Apple asks you to reconsider this decision. A great thing is that the height won’t be changed if a user makes a phone call or is using a navigation app, which was previously the case on other iPhones. Make sure that it can be dynamically changed in height. If your UI is doing something special with that space (previously 20pt high, now 44pt), you will need to update your interface because it will be taller on the iPhone X. If you use Auto Layout, your content will automatically be placed within a safe area so your design won’t be hidden behind the corners, sensors or the home indicator.īecause of the sensors on top of the display, the new status bar is split in 2 parts.

Make sure that important content is aligned in the center and use symmetrical insets, so your UI doesn’t get clipped by the device’s sensors or corners. Apple also kindly asks you not to hide the cut-out at the top and the curved edges at the bottom, so don’t go placing black bars to make it look like a regular old school iPhone 8. Let scroll views scroll to the very bottom of the screen even beyond the edges of the curved bottom of the display. Make sure you create a full screen experience. Let’s get started iphone X designįirst off, embrace the devices design, Apple employees didn’t work this hard for you to hide the wonderful features of this expensive piece of hardware. If you use Auto Layout however, that might be fairly easy. If you use custom layout, your app might need to be updated to the new screen layout. ^ iPhone 8 design on the left, automatically adapted to the iPhone X on the right You swipe up from any app to go back to your home screen or into multitasking. By the way, the home indicator is that small line that lives on the bottom of your screen, it replaces the physical home button. When designing for iPhone X, you must make sure you don’t obscure your UI with the devices unique features (the round edges, the cut-out at the top and the home indicator). You won’t export images 2x like the iPhone 8, but 3x like the iPhone 7-8 Plus, because of the new Retina display. When designing for iPhone X 1x you need an artboard of 375×812px. The width of the device in portrait mode is the same as the iPhone 6, 7 and 8, but is 145pt taller, which results in ± 20% more vertical space. Designing for iPhone X will bring some new challenges, but also some new design opportunities. It also has a cut-out at the top of the screen where you can find some futuristic face unlock features. It rocks an edge to edge Super Retina Display with a resolution of 1125×2436px. The iPhone X ( read: iPhone ten) is officially here, well it will be on November 3rd.

Status bar ios height