Sign Up to Subscribe

To get the latest and most quality design resources!

Sign Up to Subscribe

Thank you for your support!

WHAT IS MOCKPLUS?

Mockplus is a faster and easier prototyping tool to help you make prototypes by making interactions with simple drag-and-drop and working on a team project easily and effortlessly. Microsoft, Oracle, Simens, IBM, UBI, Huawei and 300+ global colleges are using it, YOU SHOULD TOO!

Start your free trial

The iphone X UI design, Go Big or Go Home?

Mockplus Team 21768 Views

The iPhone X is finally here, and it will be on November 3rd. I think most of you have been aware of “the odd notch” of the iPhone X UI design.

The iPhone X is finally here, and it will be on November 3rd. I think most of you have been aware of “the odd notch” of the iPhone X UI design. But what really bothers to the developer is that Apple made the announcements regarding the UI adaptation, it stressed that the developer can not hide the rounded corners of the device screen and also does not allow to design a black top status bar to hide the device sensor housing.

So this policy has brought big trouble to the developers. Luckily, the team of Safari web browser engine – WebKit will explain to us the details about how to optimize the UI design for iPhone X.

Odd UI design

WebKit team takes the Safari as an example. In a nutshell, the page contents have been moved to the middle of the device screen to avoid the device sensor housing area, but the rounded corners can't be blank and the page’s content can’t be obscured by the device sensor housing area, like the pictures shown below.

the odd notch of the iPhone X

The page’s content is obscured by the device sensor housing

Using the viewport to adopt the safe area, and then you can use the iPhone X for web design in the safe area. Here, the page’s content will not be obscured by the device sensor housing or rounded corners.

The page’s content is obscured by the device sensor housing

Safe area

It’s required to fill in the matching color on both sides of the blank area after finishing the design in the safe area, will just be like the pictures shown below:

Safe area

The final effect in landscape:

The final effect in landscape

The final effect in portrait:

The final effect in portrait

The final effect looks great after all, but this is the design instances of webpage. There are more APPs need to redesign, but we believe that many apps will be adapted when the iPhone X is officially on sale in November.

STILL HUNGRY FOR THE DESIGN?

_____

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial

Need help?

Join Mockplus on Slack Click here

support@jongde.com