Designing for iPhone X: Resources & Tips

Post Views: 898

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.

Immersive Experience

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.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

Join Rolltop

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:

I was working on this idea of blending app design with the #iPhoneX notch. pic.twitter.com/lj2AhxWNeE

— Luboš Volkov⚡️ (@0therPlanet) 18 септември 2017 г.

I think I’ve fixed the notch issue in landscape #iphoneX pic.twitter.com/hGytyO3DRV

— Vojta Stavik (@vojtastavik) 13 септември 2017 г.

The #iPhoneX 3D facial recognition: pic.twitter.com/Lfa1XfOx2h

— JonestownCoffee (@jonestowncoffee) 16 септември 2017 г.

X Stands For Expensive? :))) @TheEllenShow #Iphone #TEchnology #Tech #IphoneX #iPhone10 #Funny #Cool #AR #AugmentedREality #Arkit #Apple pic.twitter.com/T947u8a6QW

— Sanem Avcil #Arkit (@Sanemavcil) 16 септември 2017 г.

iPhone X#comic #comics #comix #webcomic #webcomics #fun #funny #joke #apple #nsa #Government #iPhoneX #iphone pic.twitter.com/pows6UmUGw

— 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.

Layout

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.

iphone-x-layout

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.

iphone-x-layout-design

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.

iphone-x-layout-landscape-portrait

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.