Designing for iPhone X: 9 Ways to Make Your App Look Neat and Clean on Non-Standard Screen
Apple reveals new iPhones every year but usually they don't influence user experience as much as the iPhone X did. For designers, its edge-to-edge screen with no home button means they have to build a convenient and easy-to-use iPhone X app design despite the fact users have never been faced with anything similar before.
No doubt, the only sure way to create the well-tailored app designs for iPhone X lays through the path of trial and errors. Still, there are several tips facilitating this way which we would like to share with you in this article.
iPhone X screen size: Take pixels under control
Obviously that the main changes that affect the process of design start with phone's edge-to-edge 5.8-inch display. The iPhone X screen became 20% taller if compared to iPhone 8/8 Plus that is equal to 145pt of additional space. So, be ready to use artboards sized 375 x 812 in your favorite UI design software.
iPhone X screen dimensions compared to the iPhone 8
Let's skip to our piece of advice on how to better deal with iPhone X screen resolution while designing.
1. Realign the interface elements
If exclude all these standard bars on iOS that take some extra place on the iPhone X screen, we get an impressive 641pt of 'pure' height where you can place the content of your app. Why is it a big deal? Because the iPhone 8 has about 570pt of useful space for comparison.
iPhone X resolution if compared to the iPhone 8
In terms of adapting app design for iPhone X, such resolution changes mean that you should rearrange the layout of interface elements if you want to preserve a pixel-perfect design of your app on the iPhone X. In other case, the elements may be placed too close to the notch that'll make the design look inappropriate.
2. Don't hide the iPhone X notch
Let's continue our advice-giving marathon by talking about the iPhone notch in screen since we already mentioned it. The notch or sensor housing, is probably the most controversial solution that intended to place all these brainy sensors. However, Apple had good reasoning for taking this step -- additional useful space on the screen. Besides, competitors didn't come up with something more elegant too.
Are you tired of time-consuming prototyping process? Check out these best prototyping tools to use in 2017
What to do with this notch? Apple insists you to preserve the way it looks in your app design for iPhone X. In other words, you shouldn't mask it by coloring the Navigation Bar into black or trying to hide it in any other ways. The company says that the space at the sides of sensor housing gives some additional valuable space for content and status bar, so by hiding it you will make your app feel smaller.
Don't worry about your background elements like maps, colors, and others. They'll be gently clipped by smartphone's rounded corners and the notch, so your iPhone X app design won't be spoiled by any of these elements.
iPhone X screen: Notch
By the way, tell your iOS developers don't worry much about iPhone X app adaptation. Apple assures it's going to be ok since apps that use standard UI elements (e.g. tables, nav bars and so on) will adjust to the new form factor automatically. Concerning apps using custom layouts, the adaptation promises to be relatively easy in case Auto Layout was applied and you followed iPhone X safe area along with margin guides (we're going to talk about them further).
To preview the app and see how it looks like, you can use the built-in Xcode simulator. However, Apple stresses that some features including wide colors are better to preview on real devices.
3. Remember about the iPhone X status bar
The status bar becomes taller if compared to other models. For the sake of preserving a good look of the system, Apple doubled the iPhone X status bar height from 22pt to 44pt. In fact, it moved to smartphone's rounded corners on the screen. In its Human Interface Guidelines, Apple notes that the status bar doesn't change its height regardless of the background tasks that are currently switched on (e.g. location tracking, voice recognition and so on).
Do you want to learn more about interface guidelines? Then, welcome to our detailed article on this topic
Between, the company recommends you to refrain from using a custom status bar in your iPhone X app design and reconsider design solutions aimed at hiding it. Their key argument is that users expect this bar to correspond to the system appearance. Instead, you may use one of three status bars types provided by a system.
iPhone X status bar: Standard bars
Even though it's not advisable to design a custom bar, you can easily change colors to standard ones. This way, you can set up a new color for each screen or leave it unchangeable for all screens. It's applicable not only when designing for iPhone X but for any other model as well.