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.