emerging technology

Designing For The iPhone X

November 8th, 2017

After months of hushed rumors, a polarizing unveiling, and a much-maligned pre-order, we’re finally just a few days away from the (nevertheless) highly anticipated release of the iPhone X.

And unlike the underwhelming iPhone 8, Apple’s most advanced addition to the iPhone family is a notable departure from its predecessors. That might be exciting news for Apple fanatics, but it also means an entirely new set of considerations for UX design agencies like Codal.

Designing For The iPhone X

From a software perspective, smartphone updates aren’t anything new to android & iOS app development companies—upgraded and retooled versions of apps are released regularly, and even the launch of a fresh iOS may only require a few tweaks—but the iPhone X’s challenges lie in the physical realm, not the digital one.

As UX designers, we have to account for an iPhone with an entirely different form factor, the elimination of the familiar home button, and a slew of ultramodern features. Codal looks into all of this and more, as we dive into the best UX practices for the iPhone X.

Screen Size & Resolution

Though the screen width remains unchanged from the likes of iPhones 6-8, the X boasts an additional 145 pts of vertical real estate (we thank you for your service, home button).

This isn’t exactly a challenge for UX designers—just an adjustment to an artboard size of 375 x 812 in Sketch or Photoshop—but rather an opportunity to have some more breathing room in mobile designs.

No, the real hassle in the X’s form factor is its rounded corners, marginless display, and that jarring notch centered at the top of the screen. In Apple’s Human Interface Guidelines, they recommend avoiding the jutting obstruction entirely, decreeing designers must “ensure that layouts fill the screen and aren’t obscured by the device’s rounded corners or sensor housing”.

Because of the upper notch, and the edge-to-edge screen display, designers must account for the device’s “margins”, taking care that none of their content is obstructed or clipped by the X’s visual boundaries. Take a look at the diagrams Apple has provided:

Designing For The iPhone X


In addition to the adjustments warranted by new screen dimensions, it’s also important to account for the iPhone X’s enhanced resolution. Indulgently dubbed the ‘Super Retina Display’, Apple’s highest quality screen yet has a stunning 458 ppi, meaning a new scale factor of @3x.

Designing For The iPhone X



With the home button officially abandoned, Apple has supplanted its function with a thin, interactive control feature at the bottom edge of the device, easily accessed with a simple swipe gesture.

The change frees up space for more real estate, but will cause problems for any application that relies on interactive gestures at the screen’s bottom as well. In this case, it’s likely Apple’s system-wide gesture will override the app’s custom one, potentially walling off access to some of your app’s features.

Designing For The iPhone X


Apple does suggest there’s some leeway in this situation, claiming that some custom, in-app gestures will take the place of Apple’s standard ones—the first swipe would activate the in-app gesture, and the second invokes the system one. But overall, Apple cautions the usage of edge swipes or taps entirely.

This is a major change for UX designers, who may now have to figure out where to place features that were previously accessible with a simple swipe. To make matters more complicated, Apple also suggests avoiding the corners of the device, acknowledging that “the far corners of the screen can be difficult areas for people to reach comfortably”.

The UX of X

We’ve touched on the two major adjustments your UX designers will have to make to ready an app for the X. If you want to quickly re-tool your app for running on the newest iPhone, screen size, resolution, and gesture modification are going to be your first priority.

But if we’re talking optimization, we’ve really only scratched the surface. The iPhone X offers a slew of new features, from AR kits to FaceID, that could impact your app’s user flows. If you offer a fintech application for instance, you probably utilize Touch ID—something the iPhone X has done away with.

We won’t see a mass adoption of iPhone X’s quite yet. It’s Apple’s most expensive mobile offering to date, with some even labeling it the tech behemoth’s first ever “luxury device”. But innovative digital agencies need to prepare now for the device’s eventual ubiquity, or fall behind from the cutting-edge.

Clare Bittourna


Clare Bittourna is on Codal's digital marketing team. Responsible for designing marketing materials and proposals, Clare also tackles various aspects of marketing campaigns at Codal. When she's not at work you can find her playing with her pup, finding new restaurants to enjoy in Chicago, or traveling.


business & marketing

5 Tips To Help Boost Your B2B Conversion Rate

user experience & design

Best UX Practices For Product Builders