Dynamic Islands

This design is our first design uploaded after the September 2022 Apple event, and a companion to this week’s issue of UI Designer Weekly. Check out the latest issue on the DetailsPro blog!

This design is an exciting compilation of examples from the new Dynamic Island announced for the iPhone 14. What were previously notifications or smaller icons in the status bar have now lept out of their spots and taken on entirely new shapes, all of them sharing this beautiful black rounded background. These designs make great use of the front camera’s position by always emanating out from that center point. They feature interactive elements, familiar color themes and fonts, and beautiful new styling.

This file contains four examples: Charging, Silent, Phone Call, and Now Playing. Charging is built with a simple Horizontal Stack, with proper padding and background shape to create the overall layout. The battery on the right side demonstrates some more advanced masking to get the rounded shape around that battery while still maintaining the color. Silent is more approachable, using a single red Capsule with an Overlay to put the bell icon in the right spot. Phone Call gets a little more interesting, check out that top padding on the caller’s name to bring that Vertical Stack containing the text downwards. The classic phone icons take over the right side, with SF Symbols helping out quite a bit. Finally, Now Playing brings the age-old music playing UI into the Dynamic Island world.

Try changing these designs into something new, or experiment with the general layout principles of Dynamic Island to see what other looks you can find. And see you next week for the next issue of UI Designer Weekly!