BlogGuidesProduct
Jan 14, 2019 | By poq

The Safe Area: Not all screens are created equal

by Luis Abreu
Product Designer

In the age of edge to edge display, it’s time we all found a safe space. Last year’s launch of the iPhone X introduced edge to edge display, removing the button and any non-display area from the front of the device. The new model came with a larger screen size and with it, introduced a new aspect ratio, different than that of previous iPhones. This evolution has subsequently required the need for a ‘safe area’, a space where all images and important messaging get placed to avoid being cut off. This blog will demonstrate the importance of using the ‘safe area’ to protect your brand and provide a smooth user experience.
 

What is the ‘safe area’?

 
The ‘safe area’ is a specifically measured section of the iPhone screen where important imagery, logos or call to actions are placed to be properly displayed on both older and newer versions of the iPhone. For many retailers, brand is everything and ensuring their brand and its image associations are optimally visible is of the utmost importance. Thus, when you produce splash screens or app stories with the ‘safe area’ in mind, brand imagery will be perfectly displayed. Without the ‘safe area’ brand imagery (e.g. logos) will be compromised. Below is an example of attempting to take an iPhone 8 image and fit it on an iPhone X with aspect fit, aspect fill and aspect fill with the proper ‘safe area’ margins:


 

Using the ‘safe area’?

 

To the left is an example of how to create an image with the proper ‘safe area’ that will work on both older and new iPhone models. The ‘safe area’ is measured with sufficient bleed areas to protect your important messaging or imagery from seeping off the screen. Using the ‘safe area’ for your splash screen will ensure your brand remains whole and the user is provided with a great first impression.

 

Using the ‘safe area’ for app stories is also necessary for avoiding brand injuries due to important images or call to actions being caught in the bleed margins. Like its inspiration, Instagram, app stories have a persistent icon and tab bars at the top of the screen that keep users notified of the story they are within and how many cards are browsable. Should the image not follow ‘safe area’ measurements the image will not only be cut off but also obstructed by the built-in display design of the app stories.

It is important to have your app optimally designed to garner positive brand sentiment and a satisfying user experience. Using the ‘safe area’ will consistently ensure your brand is presented in the best light possible. With it, you will easily avoid damage by bleed areas. Think of the ‘safe area’ as the space untouchable by the storm circles of Fortnite or PUBG.

To learn more design tips, check out our post on skeleton views and how they can increase perceived speed.

More posts

The Year of App Commerce
Blog
Jan 18, 2021

The Year of App Commerce

Last year’s global disruption confirmed 2020 as the Year of Mobile. This ubiquity presents retailers with a unique opportunity to differentiate themselves through app commerce, says Helen Slaven, Poq Chief Revenue Officer...
Read more
Poq and Appsflyer partnership
NewsPartners
Jan 14, 2021

Poq Partners with AppsFlyer to Power More Effective Data-Driven App Commerce Decision Making

Marketing analytics and attribution specialist integrates with leading app commerce software platform to help retailers unlock the power of mobile campaign data.
Read more
Poq Appoints Jay Johnston as New Chief Executive Officer
BlogNews
Jan 08, 2021

Poq Appoints Jay Johnston as New Chief Executive Officer

We are pleased to announce the promotion of our Chief Technology Officer to Chief Executive Officer in order to drive the business forward in its next phase of growth.
Read more