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.

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.

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:





 

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.

 

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.

Mockups

iPhone X Mockup (Includes some iOS 11 standard UI elements)

iphonex-large

Download


iPhone X Mockup Changeable Color
iPhone Mockup Sketch & Photoshop

Download


iPhone X Mockup Sketch
iPhone X Mockup Sketch

Download


iPhone X and iPhone 8 Mockup Free (PSD Smart Objects)
iPhone X and iPhone 8 Mockup Free

Download


iPhone X App Screen Mockup PSD
Free Apple iPhone X App Screen Mockup PSD

Download


iPhone X Free Mockup PSD
iPhone X Free Mockup PSD

Download


Vector iPhone X
 Vector iPhone X Sketch Freebie

Download


iPhone X UX Wireframes PSD Templates
iPhone X Wireframes Templates

Download


Vector iPhone X Free Sketch Mockup
Vector iPhone X Free sketch Mockup

Download

Official Guidelines

Human Interface Guidelines from Apple Developers – https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

Tips, Tricks & Opinions


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *