Apple has always been at the forefront of using revolutionary technologies and solutions. At September 12, they again proved that can open doors for the future and do incredible things like no other. The presentation of the new iPhone X speaks for itself. If you have not seen this truly enchanting performance, be sure to take a look - you will not regret the time spent. And for those who have already seen what this futuristic gadget is capable of, it is interesting for sure what opportunities it opens up for developers of iOS applications and how to design apps for iPhone X. Well, this will be discussed in the next article.
iPhone X: What’s New?
Screen size and rounded form-factor. The first and foremost difference of this gadget from the rest models is a huge screen with incredible resolution. It is so large that the smartphone does not have buttons on the front panel at all: now all control will be conducted by gestures. Its diagonal is 5.8 inches, which undoubtedly make an impression on the user, while the gadget is still conveniently located in the hand. A revolutionary combination of a large screen and usability is also possible thanks to a reinterpreted user interface. In addition to the screen size, the new iPhone impresses with soft bends of the case and rounded corners of the display.
Dimensions. The developers of iOS applications will be pleased to learn that the width of the screen of the new iPhone 10 remained the same: 375 points. But its height has increased significantly: instead of the usual 667 points for the 4.7-inch screen, the screen of a new iPhone occupies 812 points plus 145 points in the area of the speaker/front camera. Its portrait dimensions of 1125 px × 2436 px (375 pt × 812 pt @3x) will drastically improve the artwork in your future app.
Color revolution. The display of a gadget supports a P3 color space, which gives richer, more saturated colors than ordinary sRGB. So, prepare for perfect splash of lifelike colors on your screens.
HDR utilization. Another distinguishing feature of the screen of this iPhone is the support of the extended dynamic range (HDR). Thus, the owners of such a device will have the opportunity to watch movies, TV shows and videos shot in such formats as Dolby Vision and HDR10.
Face ID and simple payments. A revolutionary neural network algorithm now allows unblocking the phone with a glance. It processes your face’s 3D model and can recognize your face among millions of other people, even if you suddenly change your style or makeup. The developers claim the technology to be very safe, so it can be used for quick payment processing too.
A11 Bionic processor. The increased performance power certainly makes difference for the developers of high-load apps and games.
iPhone X App Design Guidelines
iPhone X layout. The apps for iPhone X should meet the layout requirements. Notably, system-provided usual elements of the user interface will adapt to the new form-factor automatically. In turn, the background will extend to the corners too and all the UI elements will be positioned properly, especially if your app adheres to margin layout guidelines. However, the content of application pages should be centered and placed symmetrically. Thanks to this arrangement of elements, the overall design will remain attractive in both horizontal and vertical positions. It is also not possible to cut off design and management elements. Always consider the location of the sensors on the front panel. To get rid of unnecessary problems with adapting an application to a new platform, you simply need to use standard controls and follow the instructions set in Auto Layout.
iPhone X interface design. There is no doubt that such a large screen and other brand-new abilities of the device should be used at maximum to provide a comfortable human interface. The image should completely cover the available range of space on the screen. Make sure that the controls are easily accessible for pressing. For that, take a closer look at the next recommendations:
• The entire mobile screen of the device can be conditionally divided into a safe zone and a margin. It is the margin on the bottom and top of the screen that protects the status bar from being overlapped by the app content, so you should place the content strictly within the safe zone.
• For the same reasons, attention should be paid to the height of the bar status. Also, note that in the new iPhone 10 the status bar does not change its height when running such background processes as the voice recording or location determination. Given that the status bar of the new iPhone takes more space on the screen than on the previous models. That’s the reason why you should choose the dynamic positioning of the content for your application. Thus, you get rid of the possible status bar overlapping with app content.
• If your application hides the status bar during operation, you should remaster this solution. The screen of the new iPhone is large enough to utilize as much space on it as possible, so give the user more information and prevent the display from being empty.
• As you have already noticed, the home button is absent in this new flagship model. And this means that developers will need to adapt to a new way of interacting with the device. In fact, there is nothing radically new: Apple used traditional gestures to interact with applications. For example, to unlock the screen now you do not need to press the home button but simply drag your finger anywhere on the screen. Also, the new face recognition technology Face ID is used, which also makes it possible to unlock the device without pressing the buttons. However, make sure your app gestures are not the same as the system ones to omit in-app mistakes.
• iPhone X app design guidelines recommend avoiding the duplication of system keyboard features, such as the panel with Emoji below the custom keyboard. It could not be affected, so do not duplicate these buttons in your app. Also, make sure to reference Face ID, not Touch ID while implementing authentication features.
Color design for iPhone 10. The designers are especially lucky with this new iPhone. Its newest color management system has become even more sophisticated, which guarantees accurate color transfer on the screen. Thanks to this system, users will be able to see exactly the colors that the designer has chosen without any distortion.
Also, the new gadget has a six-channel light sensor for white and black balance fine-tuning. Such a sensor is able to measure the color temperature of the lighting and adapt the settings of the device so that the information on the display is perceived easier. The comfort of visual perception creates the impression that the images are printed on paper.
Run Dynamic App Preview. If you still don’t know how to design for iPhone X, Apple prepared a Simulator included with Xcode to preview your app. This solution can save you a lot of time and prevent tons of problems with the UI/UX of the application, as well as allow you to quickly enter the market. In the simulator, you can adjust the background of the app, correct possible imperfections in the design. However, everything regarding the color and white & black balance settings should be set up already on the device, since the simulator can not reproduce these functions without having the necessary equipment.
Read also: Best Tools for App Design
Summary: How to Design Apps for iPhone X
As you can see, the changes only seem significant. In fact, the app development for the new iOS device remains manageable enough. Perhaps this futuristic design of the device has led you astray, but most of the requirements for applications development remained the same as in other models of iPhone. The new smartphone from Apple opens up wide opportunities for the designer of applications, and also allows making the user experience even more natural and productive. Isn’t it enough to bring your ideas to life?
