The iPhone X is finally here. I think most of you have been aware of “the odd notch” of the . But what really bothers to the developer is that 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 a black top status bar to hide the device sensor housing. iPhone X UI design Apple design 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 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 in the safe area. Here, the page’s content will not be obscured by the device sensor housing or rounded corners. web design 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: The final effect in landscape: 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 after the iPhone X is officially on sale in November. You May Like: _iOS 11 was announced and the first beta version released to developers at the Worldwide Developers Conference on June…_hackernoon.com iOS 11 vs iOS 10: Comparison Review in UI and Interaction _Before diving deeper, let’s see what is exactly the user interface design? It’s just like I wish to feel welcomed when…_hackernoon.com 6 Bad UI Design Examples & Common Errors of UI Designers
