Designing for iPhone X: Resources & Tips
A week ago, Apple has presented their “jubilee” iPhone X. If you have missed the presentation, here is a short version of it:
Apple once more put their mark and “impose” changes in web and app design. But let’s see how the new iPhone X is different from its predecessors.
For more than a decade, our intention has been to create an iPhone that is all display. A physical object that disappears into the experience.
Jony Ive (Chief Design Officer @ Apple)
The jubilee iPhone X version is offering an immersive experience. There is no home button, the screen goes from edge to edge.
The 5.8-inch display is HDR and its dimensions are 2436-by-1125-pixel resolution at 458 ppi. (full specs here)
The full immersion into device experience in not something new. The topic is widely discussed amongst developers and designers.
The new display and design
The all screen display poses some challenges for web and app designers.
It is a great idea to have an all screen display that will offer a deeply engaging experience for users.
On the other hand, “the Notch”, which is on the top of the phone, must be considered when designing a website or an app. There is already a debate whether this tiny little piece should be ignored or incorporated in designs.
If you have a look at twitter with hashtag #iPhoneX, you will see quite a lot of opinions and reactions about it, as well as some ideas how it can be part of designs.
Here are some of them:
— Luboš Volkov⚡️ (@0therPlanet) 18 септември 2017 г.
— Vojta Stavik (@vojtastavik) 13 септември 2017 г.
— JonestownCoffee (@jonestowncoffee) 16 септември 2017 г.
— Sanem Avcil #Arkit (@Sanemavcil) 16 септември 2017 г.
— Diogo Seabra (@imthebirdguy) 15 септември 2017 г.
Of course, there are official guidelines from Apple, which can be quite useful in your next design.
In terms of layout, they are giving some advice and explanations.
When designing for iPhone X, you must ensure that layouts fill the screen and aren’t obscured by the device’s rounded corners, sensor housing, or the indicator for accessing the Home screen.
Most apps that use standard, system-provided UI elements like navigation bars, tables, and collections automatically adapt to the device’s new form factor. Background materials extend to the edges of the display and UI elements are appropriately inset and positioned.
For apps with custom layouts, supporting iPhone X should also be relatively easy, especially if your app uses Auto Layout and adheres to safe area and margin layout guides.
Preview your app on iPhone X. You can use Simulator (included with Xcode) to preview your app and check for clipping and other layout issues. Some features, like wide color imagery, are best previewed on actual devices.
Provide a full-screen experience. Make sure backgrounds extend to the edges of the display, and that vertically scrollable layouts, like tables and collections, continue all the way to the bottom.
Inset essential content to prevent clipping. In general, content should be centered and symmetrically inset so it looks great in any orientation and isn’t clipped by corners or the device’s sensor housing, or obscured by the indicator for accessing the Home screen. For best results, use standard, system-provided interface elements and Auto Layout to construct your interface. All apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar.
Be mindful of the status bar height. The status bar is taller on iPhone X than on other iPhones. If your app assumes a fixed status bar height for positioning content below the status bar, you must update your app to dynamically position content based on the user’s device. Note that the status bar on iPhone X doesn’t change height when background tasks like voice recording and location tracking are active.
iPhone X Resources
The design community acts fast and there are already resources that will help you in presenting designs for iPhone X.
Here is a list of useful mockups, guidelines and tips.
iPhone X Mockup (Includes some iOS 11 standard UI elements)
Human Interface Guidelines from Apple Developers – https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
Tips, Tricks & Opinions
- “The Notch” and CSS by Chris Coyier – https://css-tricks.com/the-notch-and-css/
- iPhone X user interface game design — new UX patterns – https://medium.muz.li/iphone-x-user-interface-game-design-new-ux-pattern-15feb14b34f3
- Removing the White Bars in Safari on iPhone X – http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/
- Designing Responsive Webpages for the iPhone X by Thiruvenkadam – https://medium.com/peachstudio/designing-responsive-webpages-for-the-iphone-x-c3fc55732409
- How Does The iPhone X’s AR Engine Affect UX Designers? – https://blog.prototypr.io/how-does-the-iphone-xs-ar-engine-effect-ux-designers-36777085cdd
- Design for iPhone X – https://blog.prototypr.io/designing-for-the-iphone-x-4239d5ac736c
- The iPhone X Notch is All About Branding – https://medium.com/swlh/the-iphone-x-notch-is-all-about-branding-aef4f34c365b
- iPhone X: Dealing with Home Indicator – https://medium.com/the-traveled-ios-developers-guide/iphone-x-dealing-with-home-indicator-2e8e47f5647f
- Dear Apple, The iPhone X and Face ID are Orwellian and Creepy – https://hackernoon.com/dear-apple-the-iphone-x-and-face-id-are-orwellian-and-creepy-bfca99c61fca