The iPhone X (read: iPhone ten) is officially here, well it will be on November 3rd. It rocks an edge to edge Super Retina Display with a resolution of 1125×2436px. It also has a cut-out at the top of the screen where you can find some futuristic face unlock features.
Designing for this beautiful machine will bring some new challenges, but also some new design opportunities. 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. When designing @ 1x you need an artboard of 375×812px. 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 creating your design, 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). By the way, the home indicator is that small line that lives on the bottom of your screen, it replaces the physical home button. You swipe up from any app to go back to your homescreen or into multitasking.
If you currently have an app that uses iOS native component you will be fine and your app will already be adapted for this new iPhone. This can be navigation bars, tables, collection views and tab bars. They will be automatically inset and positioned.
If you use custom layout, your app might need to be updated to the new screen layout. If you use Auto Layout however, that might be fairly easy.
Not indicating that the content you copy/paste is not your original work could be seen as plagiarism.
Some tips to share content and add value:
Repeated plagiarized posts are considered spam. Spam is discouraged by the community, and may result in action from the cheetah bot.
Creative Commons: If you are posting content under a Creative Commons license, please attribute and link according to the specific license. If you are posting content under CC0 or Public Domain please consider noting that at the end of your post.
If you are actually the original author, please do reply to let us know!
Thank You!
Hi! I am a robot. I just upvoted you! I found similar content that readers might be interested in:
https://blog.prototypr.io/designing-for-the-iphone-x-4239d5ac736c