Max Rudberg
Apps
Themes
Icons
Wallpapers
Blog
    Sep22

    UI Design for iPhone X: Bottom Elements

    iPhone X and its curved screen is the most exciting iOS UI design challenge in many years. However, there’s not a lot of time for developers to adjust their apps to this new form.

    These are explorations on how certain design patterns can be adapted to the new screen. I’ll use findings in our own apps as an example.

    Edge-to-Edge Buttons

    This kind of button treatment was introduced around iOS 7 when Apple wanted to make the most out of small screens.

    pic

    The solution can be to pad them and give them a floating treatment. Gradients are optional, but boy are they nice.

    pic

    32-36 pt from the bottom edge is similar to the distance used in Apple’s tabbars. 44 pt is the corner radius of the screen. Harmonizing the radius of the element with screen radius makes it more pleasant. The spacing from the bottom of the screen helps avoid interfering with the home indicator.

    pic

    Banners

    pic

    Again, I’d suggest pad them and float them.

    pic

    pic

    Bottom Progress Bar

    With a running timer, we push the rest of the UI up to present a progress bar that’s visible throughout the UI. This now collides with the home indicator and screen corners.

    pic

    Pad and float.

    pic

    For views with a tab bar, the progress bar could instead float above them.

    pic

    pic

    Further Reading & Resources

    Read the second post in the series; UI Design for iPhone X: Top Elements and the Notch.

    Get my iOS 11 app icon template for Sketch, it’s free.


    1. algorizms reblogged this from maxrudberg
    2. ngzk-0222 reblogged this from maxrudberg
    3. otcombo reblogged this from maxrudberg
    4. sharksayshi reblogged this from maxrudberg
    5. donysukardi reblogged this from maxrudberg
    6. scrupboek reblogged this from maxrudberg
    7. halfoforange reblogged this from maxrudberg
    Copyright