Sep 13, 2017
Today we've witnessed the latest from Apple, whatever you feel it was amazing or not; they have released the new iPhone. It's here and it's what Apple think will be the future of the smartphone. Introducing the iPhone X, coming with a new size of 5.8-in with a "super" retina display. Wait! We are not going to go through its features but more into their human interface guidelines. Basically what has changed on the UI aspect of things that will probably affect our work somehow if you are in iOS Design. Let's dig!
Apple also shared their UI Design Resources, how cool is that? They provided files for Photoshop, Sketch and Adobe XD where based on the iOS SDK, it's just a really good and reliable resource to dig through for your next project or just by curiosity.
...a large, high-resolution, rounded, edge-to-edge display that delivers an immersive, content-rich experience like never before.
Image via Apple Developer Site
In Portrait, the iPhone X has the same width as its predecessors (iPhone 6, iPhone 7, and iPhone 8) but the display is actually higher of 20% on the vertical space for the content space. To be specific, it's 145pt taller. For our UI assets, they will have to be @3x to support its high-resolution display.
• Portrait Dimensions: 1125px × 2436px (375pt × 812pt @3x)
• Landscape Dimensions: 2436px × 1125px (812pt × 375pt @3x)
Layout "Safe" Area
There are many things to think about when designing for the iPhone X including the newly sensor housing on the front. Make sure to remember about the backgrounds to give a fully immersive full-screen experience to the edges of the display all the way to the bottom. Apple is advising us to design with a mindset of having the content centered, looks right with the different orientation and to stay away from the corners including the sensor's area. Please take a look at the different possible situations below.
We gotta think about the aspect ratio as well especially how your UI will behave with auto-hiding for like playing videos or photo slideshows for example.
Since Apple got rid of the "home button of the iPhone X, they had to rethink about the gestures. Just to add to the list, now we have home screen, app switcher, notification center, control center and also Face ID. Regarding iOS 11, I am not a huge fan of how you have 3 different ways to swipe down, from the home screen. We can leave these thoughts of the full release of the next iOS.
Links on Apple Human Interface Guidelines
Images via Apple Developer Site