With the announcement of Apple’s most cutting-edge piece of hardware, designers and developers are gearing up to make sure their apps are ready for the iPhone X. Not every new piece of Apple hardware requires preparing for, but this one does.
Let’s take a look at a few of the unique specs and features of the iPhone X and how to design for them.
1. Use the new iPhone X artboard size
With the removal of the home button and scalloped shape, Apple increased the display height of the iPhone X approximately 20% over the previous generation “small” iPhones. That 20% increase equals 145pt of design space (“pt” being pixels in non-retina units. More on that in a moment.) Therefore, designing for iPhone X means creating your artboards in Sketch or Photoshop at a resolution of 375 x 812.
Related: 27 hilarious Twitter reactions to the Apple event
2. Create assets for the new pixel density
Not only is the new display a bit taller, but it’s also much higher resolution for its size. The iPhone X’s new Super Retina Display has a startling 2436 x 1125 resolution packed into only 5.8 inches making for an eye popping 458ppi. What does this mean for us? Well, the new extra high pixel density means assets will need to be exported @3x like a plus-sized iPhone rather than @2x.
3. Be mindful of the display shape
The new display isn’t just taller—it also has rounded corners and a bite taken out of the top to give the front-facing camera, sensors, and receiver a home. That bite creates a scalloped top edge which splits the status bar in two. The vertical height allocated to the status bar has also doubled from 22pt to 44pt to give a comfortable margin from the rounded corners. The good news is that the status bar is now much more out of the way and occupies oddly shaped space that you’ll be less likely to attempt to reclaim. Because of this, Apple asks that you reconsider any past decision to hide the status bar.
Apple also asks that we design in a way that doesn’t mask or bring extra attention to these display irregularities. For example, don’t make the color of your title bar stop where the status bar begins. Also, don’t make the status bar black to disguise the screen as a “normal” shape. Apple asks that we make our experiences “full-screen,” allowing them bleed to the edges uninterrupted.
4. Mind the new aspect ratio
The new taller (or wider if you’re holding it landscape) aspect ratio of the iPhone X means that any fullscreen artwork previously designed to fit previous generation iPhones could get a little weird. As with most aspect ratio mismatches, content can either end up being cropped or letterboxed.
In the case of iPhone X content being displayed on a shorter 4.5-inch device, content can even wind up pillarboxed (vertically letterboxed). Moving forward, you may want to consider creating separate assets for the different aspect ratios.
5. Avoid gesture interference
There are some system-wide gestures that need a little room to breathe on the iPhone X to rectify the lack of hardware buttons. The lack of physical home buy will have your using both expecting and relying on the home indicator at the bottom of the screen. Apple implores us to do a few simple things. First, don’t hide the home indicator unless it’s absolutely necessary. Second, be careful adding interactive elements like buttons too close to the home indicator.
If your app happens to be a full-screen immersive experience like a game that requires custom gesture that take priority, then the first swipe will invoke your app’s behavior and a second swipe invokes the system gesture. Apple calls this “edge protect” and suggests using it sparingly. We don’t want to make extra work for our users.
6. Reference authentication methods properly
If you’ve designed an app in the past that makes any mention of Touch ID, you may want to change that to Face ID. The iPhone X omits the fingerprint scanner in favor of projecting and analyzing more than 30,000 invisible dots to create a precise depth map of your face. If your designs make mention of Apple Pay or other system unlock features, just be sure to reference Face ID.
Learn more from Apple’s Human Interface Guidelines.
7. Take advantage of more impactful color
Apple is encouraging designers and developers to create UI assets for iPhone X with the Display P3 Color Space (as opposed to sRGB) to take advantage of the wide color display on the phone. This means richer, more saturated assets could be exported at 16 bit/channel PNG in the Display P3 color profile, which is made possible by Photoshop but not Sketch.
Another thing to consider is that not every computer display is capable of displaying the extra wide gamut of Display P3 which would make it impossible to accurately design with it. The Late 2015 Retina iMac was the first Mac with a wide gamut display and the MacBook Pro with Touch Bar followed suit. Apple also recommends that for the best and most accurate colors on non-P3 displays, that we serve a separate set of sRGB assets.
Here’s a video from WWDC explaining more about P3 Color.
As long as we all remain cognizant of the subtle hardware changes, it’ll be smooth sailing in designing apps for iPhone X. Constraining to new display dimensions and making the most of new onscreen controls are the name of the game—and if you’re feeling spicy, maybe creating a set of Display P3 assets for out-of-this world color.
You’ll love these posts, too
Video Producer at InVision, former UI/UX designer of international in-flight entertainment, and avid automotive enthusiast.
