iPhone X release (read as iPhone 10) was timed to the 10th anniversary of the Apple Smartphone. The event was a surprise to Apple fans, breaking the logical chain of releases (where is iPhone 9?), and made all the iPhone admirers wait for the release with even more impatience. While users are counting days until November,3 let’s find out the impact of the big screen and the new Super Retina on iOS mobile app design trends.
iPhone X, what’s new?
iPhone 10, in addition to wireless capabilities (headphone and charging), an improved camera and all-glass design, surprised fans with the opportunity to create Animoji. By using the TrueDepth camera, people can now create animated Emoji, which repeat the person’s mimics. To do this, Apple developers used a powerful intellectual A11 Bionic chip with Neural Engine, which greatly speeds up the process of video playback, and provides another impetus for the creation of applications that use augmented reality.
 |
In addition, Apple has a really big screen and an unusual display form without Home button.
Large curved screen
The new iPhone X will be approximately 20% (145 points) higher than its predecessors. Innovations that will affect the design of mobile applications for iPhone X: :
- Edge-to-edge 5.8-inch display and a resolution of 1125×2436px;
- The rounded corners of the display;
- No physical button on the bottom of the screen;
- The cutout for the camera and speaker at the top of the screen.
The dimensions of the iPhone X, in comparison with the previous model
Good-bye round button!
For the first time, there is no physical Home button in iPhone, however, Apple developers still left a touch option in case the user wants to move «home». Now it is enough to swipe up from the bottom to go home. This innovation confirms once again the orientation of the mobile design on intuitive gestures.
The button is not visible all the time — iOS developers have provided the ability to hide the touchline if the user doesn’t touch the screen for a few seconds. This option is useful for viewing photos and videos. The button’s color will adapt to the background of your application. Seems like Apple made indeed roomy screen, but designers should be careful with the bottom screen area — the functional elements can be positioned only at the edges of the display, considering that they should not overlap the Home button.
Defining the safe area
Sensor Home button (which hides after few seconds), rounded corners, and the unusual neckline at the top of the screen give more space for creativity, but also make application designers be careful.
iPhone X safe zones in portrait and landscape orientations
For example, to enable full-screen mode, the application’s background should be distributed on the edges of the display; a vertically-scrollable elements, such as the table should reach the bottom of the screen. This is especially true for applications with a fixed height of the content area. Do not forget about home button — don’t plan active elements at the bottom of the display. red zones are also «in danger» as this content will be clipped by rounded corners after scroll.
Custom design of elements
Status bar
It is important to note — the status bar in iPhone X is 22 points higher than in previous versions. Also, an element does not change height while recording a voice or geolocation. Apple doesn’t recommend to hide status bar in iPhone X apps, but if this option has been previously used in applications, this should be reconsidered.
Keyboard
There is no longer need in providing the Emoji and voice recording buttons when creating a keyboard for iPhone X — these items are automatically added at the bottom of the screen, next to the Home sensor button.
Super Retina Display, x3 images and Face ID
iPhone X will support user authentication using Face ID. For application, integrated with Apple Pay and other services that require authentication this innovation should be considered.
New iPhone X uses P3 color space. Such a color space is used in digital cinemas. The iPhone innovation will allow improving the picture through a wider range of colors than sRGB (although improved color rendering will hardly be perceived by the human eye).
The iPhone X creators, in spite of the innovative design of the smartphone, left x3 resolution images. So that designers can safely use ready-made assets for creating icons, buttons and other elements. Although the proportions of the display have changed a little, in general, adhering to the parameters of the safe zone designer can easily plan the placement of important content for both - new and previous versions of the smartphone.
In the article was used visual materials from the official Apple website, and iPhone X press release. Download the current UI templates for Photoshop and Sketch you may here.
Our specialists create custom design and have strong experience in developing native Android and iOS development. Email us on info@stfalcon.com, to share your ideas. We will help you to develop your dream project!
