Let's begin by stating the obvious: When you create a design, it needs to look good in the environment it's created for, not just the environment it's created in.

When you're painting a wall mural, you need to measure the wall and plan around obstructions like doors, windows, or pipes. When you're designing an iOS app, you need to design the appropriate screen size (Learn how to do this responsively in Play) and plan around obstructions like the top notch and the bottom indicator bar. Apple calls this unobstructed area on the device screen the "Safe Area."

Apple's Safe Area Guidelines

Apple makes it easy for developers to define a safe area by creating specific guidelines for each iOS device size. Generally, they recommend a top safe area as 44-47PT and a bottom safe area as 34PT, but this will vary based on the device (i.e. whether it has a notch, a dynamic island, or, in older models, nothing).

Apple publishes these guidelines for designers to use, but in most design tools, you have to manually type these numbers every time you create a new screen and make sure they're accurate across different device sizes. This can be tedious, prone to errors, and can throw off your design if you initially get the numbers wrong.

Safe Area in Play

Users designing in Play don't have to worry about the safe area because Play does all the work for you (Learn how with this video). You can toggle the top and bottom safe areas on and off independently, and their values change based on the device size you have selected. Play stays up to date with Apple's updates and new device sizes, so when anything safe area related changes for Apple, it changes in Play too.

Designing with the safe area in mind is critical to creating a both beautiful and functional product. Understanding and staying consistent with Apple's safe area guidelines will make sure that you're following best practices, so when you want to push boundaries, it's done in a thoughtful way.