What does the Safari 15 update mean for my designs?

Apple introduced iOS 15 with quite minor visual changes, but the biggest visual and conceptual change in the OS is probably Safari. It will get a brand new interface on iPhones, iPads and Macs. Let’s go through everything new and design changes you need to know about.

Redesign and new interactions

Safari got a big redesign on all Apple Platforms, but the iOS version might have gotten the biggest one. The Tab Bar (search bar) has been moved to the bottom of the screen for easier access. This means you will also have more room to display the content of your website.

You can easily swipe on the Tab Bar to switch between tabs or swipe up to view all of your open tabs. Speaking of tabs, they can now be grouped in Tab Groups and saved to refer to later and they will sync between all of your devices.

Your website or web app might need some rethinking (Example of Twitter on Safari 15) if you’ve placed a lot of fixed navigation on the bottom of the page. With safe area variables, you can automatically detect the available space, so it should be easy to make sure the Safari interface never interferes with your website navigation or content. This has been available in Safari since the iPhone X came out, so you will likely already have support for it.

Theming

By changing the location of the search bar, the status bar no longer has a background. To avoid having content overlapping with the time or other content in the status bar, Apple will now use theme-color to change the background color.

You can add theme-color in your meta data, with the option to define different…