iPhone X design updates developers need to know about

The iPhone X is finally arriving on this week! Just from the outlook, you can tell there are many (breaking) changes with previous iPhones, which brings new challenges for design and development. Below we will summarize the key features to factor in to your latest iPhone UI / UX designs.

Let’s talk about the most obvious changes to the iPhone X and how you can prepare for them.

Making better use of the bigger and higher resolution screen

The iPhone X is 145 pt taller, so your app should design for the iPhone X is 375×812 pt instead of 375×667 pt. There is approximately 20% more space for display. iPhone X actually uses the same screen layout of 4.7” (iPhone 8) instead of 5.5” (iPhone 8 Plus) devices.

iphone X screen size
The iPhone X is 375×812 pt.

iPhone X uses 3x assets, so to ensure apps look good on the iPhone X we need to update all design and assets, or else the icons will look blurry on the ultra high-resolution display.

icon design assets iphone x

Mind the changes in the status bar height

Not only have the screen become taller, but the status bar has grown to 44 pt (from 20 pt). You will need to update your interface since the status bar may change dynamically in different phones.

iphone x status bar height
The iPhone X status bar has grown to 44 pt.

If you are currently hiding the status bar in your app, you may reconsider this behaviour for the iPhone X. The screen is taller to display more content. The new status bar is split and presents essential information to users, so it might be nice to unhide it in iPhone X.

Dealing with the sensor housing area

When you build full-screen apps, you may want to place your content edge-to-edge. Besides being careful with the rounded corners (more on that below), you should beware of your content falling into the notch in the sensor area.
apple human interface design guidelines iphone x
When updating your app for the iPhone X, previous edge to edge designs will probably break because it runs into the notch (such as the Apple Reminders app below).

iphone x design breaks

One intuitive easy “fix” is to hide it by trimming the screen with a black area, but Apple does not recommend this in its Human Interface Guidelines (because it doesn’t take full advantage of the new screen design).
edge to edge design iphone

Mind the rounded edges – on all 4 corners

This is the first iPhone with rounded-corners. Review your app UI to see if any elements falls onto the corner boundary so it might be cropped off accidentally.

edge to edge iPhone UI

The new iPhone has a different set of safe areas. Mind them when designing your UI. You shouldn’t put important content out of the Safe Area. (GIF)

iphone ui design

Be careful of using gestures on the edges

Since the physical Home button is gone, users need to swipe up to go back home. The Home Indicator will appear at the bottom area of the screen when a user holds it, meaning that you should not place important content or control items there.

iphone gestures home indicator iphone x

Since swipping up from the bottom is considered as a “Go back Home” gesture, other buttons or gestures near the bottom may lead to confusion.

iphone edge protection

If you are writing games and flicking interactions near the edge, you can turn on the “Edge Protection”. When Edge Protection is turned on, when a user swipes up, the gesture will be reserved for your app. Note that when the user swipes for the second time, iOS will interpret as a Go Back home gesture.

Update UI for Face ID in place of Touch ID

Since Touch ID is *not *supported on the iPhone X, but remains the security identification feature for previous iPhones, this means that developers need to do two things:

  1. update the app to detect an iPhone X (so that it can use Face ID for iPhone X)
  2. update copywriting for the authentication prompt (to mention Touch ID / Face ID for the right phone in custom keyboards or navigation bars etc.)

The iPhone X should only show the Face ID hint. The iPhone 8 and iPhone 8 Plus should only show a Touch ID hint.
Apple Face ID

Previewing my apps in iPhone X

Developers can use a simulator with Xcode 9 to preview an app. Of course, developers should always try on the device!

skygear iphone x

By the way, if you wish to make mockups to preview your apps in iPhone X, we’ve built a free tiny tool for previewing screenshots on the iPhone X. Check out what it does here.

If you found this piece helpful, follow Oursky’s Medium Publication for more startup/entrepreneurship/project management/app dev/design hacks!

Leave a Reply

%d bloggers like this: