Apple presents new gadgets each year, and each of these devices deserves attention. But when iPhone X was presented to the public, the rules for app design changed. With the iPhone Xs announcement this year, UI / UX designers had to reconsider their conventional design design practices for iPhones in general. Screen without traditional home button that shows the content from one edge to another, made a big surprise for everyone.
The goal of UI / UX designers is therefore to create an app for iPhone Xs that will be attractive and easy to use. Of course, specialists need to work to create a truly amazing design, but there are some useful tips that designers should consider when building an app for the iPhone Xs. Let's see these tips right now!
iPhone Xs Screen Size: View The Pixels
As mentioned above, the first modification touches the new iPhone, in screen size. Edge-to-edge 5.8 inch display is different from most other iPhone models, therefore a new challenge for designers was born. Therefore, using a 375
So, let's now consider how to use the iPhone Xs resolution too well
# 1. Converting User Interface Items
At all, if we remove bars that are available as standard on the iPhone Xs screen, we get about 641pt height that gives you more useful space to place y our content. While iPhone 8, for example, can offer you only about 560 pt of free space.
Based on this, the conversion of the UI will help you build a great design for the iPhone Xs. If you do not follow this advice, some UI elements may be located near notch, and it will exacerbate the overall perception of design.
# 2. iPhone Xs Notch Should Be Visible
Let's study the problem with iPhone Xs notch deeper.
Chokes in the iPhone X and Xs also serve sensors, and not everyone adopted this innovation warmly. However, Apple explained why it integrated this thing – more space on the screen, everything is simple. In addition, the competitors do not offer anything better yet.
How to use this chopped wisely? According to Apple's hint, you should hide this chunk using color management, for example. You can better leave it and leave it as it is. The thing is that this notch makes it possible to expand the content area visually and give you extra space. Otherwise, if you hide this chopped, the app area will also look smaller.
Also background elements will not interfere with any app design since they are kept on the corners of the screen.
Apart from this, we recommend that you discuss with the iOS developers the issue of customizing the app for new iPhone Xs. All basic user interface elements like navigation bars will be automatically adjusted. If the app has custom layouts, remember to use Auto Layout and follow the correct guidelines for the site, we will talk about it further.
To see how the app looks, Xcode simulator can be used, but real devices would be a better option. Real devices will show you the app anytime.
# 3. Keep the status line in mind
In the iPhone Xs, the status bar changed its size and it is slightly higher. So now it is placed in rounded corners on the screen. In Human Interface Guidelines, Apple noted that the height of the status bar did not change when new tasks were launched as maps and so on.
Apple recommends designers to use a native status bar instead of building your customized solutions that can make bar invisible. Why? The point is that the users intuitively will look for this line that will be available in the usual place. But anyway, the system offers you three types of status bar, you can choose what you like more.
But if you've created your custom line, you can change the colors for each screen separately or leave it without changes. This tip can be used if you design apps for other iPhone models as well, not just iPhone Xs.
App's content is important
The size is also important for proper content viewing. So well thought out UI and UX design is the first thing you should pay attention to. In this section, we're reviewing ways to treat content when designing apps for iPhone Xs.
# 1. Colors may change everything
Colors can have a serious impact on the overall app design, so we recommend following Apple's instructions. They offer designers using P3 color instead of sRGB colors under the design of the iPhone Xs (or iPhone X).
This will help the app to embrace more space and give the users a broader color spectrum. Using P3 colors, it is possible to export assets with 16-bit PNG.
Remember, only Photoshop can help you implement this task, while Sketch is missing this option.
Also, considering that outdated screens will not let you make such colorful designs since they simply can not handle so many colors. Note this when planning to build app design for iPhone Xs. So your iMac should not be older than the 2015 edition.
# 2. iPhone Xs Relationship Should Be Considered
An aspect ratio of the iPhone Xs is different from other models, it's higher. Thus, it does not mean that any good look from iPhone 7, for example, will be so attractive on the iPhone Xs as well. Content can only be cut.
Another example – if you start the content of iPhone Xs on other models with a 4.7 "screen, the content may be pillarboxed. Therefore, it is necessary to test everything on different conditions to ensure that the design looks perfect.
# 3. New Screen Shape
Of course, new screen size and rounded corners can create many users, and innovation may seem somewhat useless and unclear. But in fact, it gives people a whole new experience. Therefore, you should show users that an innovative display design can bring the user experience to a new level.
Observe the iPhone Xs Design Guidelines
To avoid unwanted content issues when designing apps for iPhone Xs, you are strongly advised to become familiar with safe area policies found on Apple's official website. These guidelines will help you find all the necessary instructions that help you create high quality apps and place content properly. Let's study some of them!
# 1. Landscape Mode in iPhone Xs
Landscape Mode in iPhone Xs allows you to hide the status bar to provide more room for the app content. In addition, other bars become smaller.
Of course, not all apps may require use of this mode, but there are a large number of possible usage cases. Viewing images, videos and other types of content will be very good in landscape mode. Landscape mode can easily be switched to portrait mode when users need it.
Even if you think your app does not need it, landscape landscape customization may be beneficial to your app, keep it in mind.
# 2. Think of the website
It's quite possible that you can create a design, not just for the app, but also for websites, so you want both app and website version. Safe area guidelines will help you customize your site to iPhone Xs so that your web content is properly displayed on a smartphone screen.
Well, that's all we want to share with you in this tutorial. We hope that it will be convenient and useful to you. Given that app design for iPhone Xs requires many shades to be considered, you should be very aware of creating a truly amazing app. Using our guide, this task will be much easier. So be smart and follow the right path!
This is a guest post by Nataliia Kharchenko, Technical Writer at Cleveroad Company.