8 Designing Tips for iPhone X

robby

It’s about a month after the iPhone X read iPhone 10 was launched in spectacular fashion. And now everyone is scrambling to figure out how to design apps for it. Because the latest iPhone has a bigger screen, while being smaller than its predecessor, the challenge is unique. Also, not having a designated/physical home/exit button is further vexing. In this article/blog we would be discussing the nuances of designing app interface for the new iPhone X.

Designing for iPhone X-1

Although the iPhone X will start shipping after November 3rd, it rocks an edge-to-edge super retina display that has a resolution of 1125x2436px. Additionally, it has a futuristic face unlock feature that is expected to be the game changer for the entire industry.

Designing for iPhone X-2

Designing for the iPhone X would have some new challenges, but mostly new design opportunities. In portrait mode, the width of the iPhone X is similar to the iPhone 7, and 8, but it is 145pt taller. This 15% increase in screen space gives developers and designers an opportunity to enhance the user experience.

Tip #1: Don’t Obscure.

As the iPhone X has a retina display with round edges, make sure your UI is not obscured by these features. Also, as the home button has been completely removed, the new “home button” is actually a horizontal line that sits at the bottom of the screen. Users will have to swipe up to exit an app or multitask. If your current app uses iOS native component, then it should be fine as it is already adapted to the new iPhone. What this means is that your app will be automatically positioned to the new iPhone.

Designing for iPhone X-3

Tip #2: Use the Retina Display to Your Advantage.

The new iPhone X’s screen is taller, and it has a higher resolution for its size. The resolution on the iPhone is 2436×1125, and this is packed into 5.8 inches of space! The ppi for this screen is 458, meaning that assets can be imported at 3x instead of 2x.

Designing for iPhone X-4

Tip #3: Be Weary of The Shape of The Display.

The iPhone X’s display is not just taller but also has rounded corners. The screen does not sit flush with the edge, at least at the top. It has a rectangular space to accommodate an ambient light sensor, proximity sensor, flood illuminator, infrared camera, speaker, microphone, a front facing camera, and a dot projector. Is there anything more that can be housed in this small space (pun intended)! This rectangular space allows for two scalloped screen edges, which the designers at Apple have used to house the status bar, which includes battery status, signal bars, and Wi-Fi strength on the right, and a digital time keeper on the left. This is a blessing in disguise – because it gives app developers more space to use while designing apps for the iPhone X. Apple has asked developers to reconsider any past decisions of hiding the status bar in previous app versions.

Designing for iPhone X-5

Designing for iPhone X-6

Designing for iPhone X-7

Designing for iPhone X-8

Apple has explicitly asked app developers and designers to make sure their apps are full screen. The tech giant does not want developers to black out the scalloped edges, which in their (Apple’s) view would be similar to their previous models like the iPhone 7, 8, and 8 plus.

Tip #4: Stay Away from Gestures – For Now.

As the new iPhone X does not have a physical home button, the company has advised app developers and designers to not remove the home indicator that is placed at the bottom of the screen. Another aspect to stay away from is the placement of any button close to the home indicator, which might hinder with users when they are trying to exit the app. Also, we recommend to not have any interactive gestures just yet – as users will take time getting accustomed to the iPhone X.

Apple suggests not interfering with the systemwide screen edge gestures. People rely on these gestures to work in every app. In rare cases, immersive apps like games might require custom screen-edge gestures that take priority over the system’s gestures—the first swipe invokes the app-specific gesture and a second-swipe invokes the system gesture. This behavior (known as edge protect) should be implemented sparingly, as it makes it harder for people to access the system-level actions. Source – Apple

Designing for iPhone X-9

Designing for iPhone X-10

Tip #5: Respect the Aspect Ratio.

The new display on the iPhone X is taller, which has an improved aspect ratio. With this, the artwork in landscape mode will have to change to fit the new display. Commonly, if there is mismatch in aspect ratio, content usually ends up being letterboxed or cropped.

Designing for iPhone X-11

Tip #6: Stay in The Middle – Stay Safe.

As the iPhone X has an edge-to-edge display, it is safe to stay in the middle – literally! What we mean by this is that app developers and designers should make sure that the content is aligned in the center. We suggest this because the chances of the content getting clipped is high if it is not in center – the device’s sensors and corners do this BTW. The best way to handle this is by using the Auto Layout function. This allows for your content to be automatically placed within the safe area so that your design is not hidden behind corners or sensors or even the home indicator.

Designing for iPhone X-12

Tip #7: Get the Authentication Right!

Apple has one of the best authentication technologies in the form of Touch ID in the iPhone 7, and 8. While, I personally prefer the fingerprint sensor on OnePlus devices, I feel that apple’s Touch ID is just as great if not better. For the iPhone X, apple has ditched the Touch ID and has opted for something called as the Face ID. Previously the sensor was hidden under the home button, which is not present in the iPhone X. Authentication can be replaced by using the Face ID. If an app that uses Touch ID unlock the phone or authenticate purchases, the same app can now use the Face ID to authenticate.

Apple claims that Face ID is better than Touch ID – the chance that a random person can unlock an iPhone X with their face is one in a million – sic. How is this done? The iPhone X projects over 25000 invisible dots onto an individual’s face to create a precise depth map of the face. What does this mean to app developers? Make sure to omit Touch ID going forward while designing apps for the iPhone X and replace it with Face ID.

Tip #8: Use the Wide Color to Enhance Visual Experience.

The new iPhone X’s display supports P3 color space. This helps it produce richer and more saturated colors than a standard sRGB display. App developers and designers can use this to enhance user visual experience. Videos and photos will look more lifelike, and status indicators and visual data will appear more impactful.

TL; DR

-The iPhone X is taller by 145pt. Design should be for 375x812pt.

-Use the entire screen. Focus on creating full screen experiences.

-Don’t hide the home indicator.

-Use aspect ratio wisely.

-Don’t add new gestures, just yet.

-Use auto layout to stay in the middle.

-Replace Touch ID with Face ID.

-Use the richer retina display to your advantage.

 

Did we miss something? What do you think about this article? Was it helpful? Share your thoughts and suggestions by commenting below.

Mobile Strategy

about the author

robby