iOS 11 vs iOS 10: A Look at the UI Design Changes in iOS 11

BY Khamosh Pathak

Published 7 Jun 2017

iOS 11 wide featured

While it’s not quite as stark as the iOS 7 update, Apple is clearly marching towards a new design language in iOS 11. While iOS 7 was all about minimalistic and thinness, iOS 11 seems to be the opposite – big and bold. Across the app and feature redesigns, we see a decreased information density, big navigation bar headers and bolder typography everywhere.

There are more subtle design changes as well. Read on for our comparison of UI design and feature changes for iOS 11, as they compare to iOS 10. In the images below, the screenshot on the left is from iOS 10 and the one on the right is from iOS 11.

iOS 10 vs iOS 11: UI Design Changes

1. Merged Lock screen and Notification Center

iOS 10 vs iOS 11 lock screen notifications

The first stark difference between iOS 10 and 11 greets you right at the front door. Apple made a big splash when they redesigned the Lock Screen in iOS 10. In iOS 11, they’ve done something different, and what right now, seems confusing.

iOS 11 Notification Center

They’ve merged the Lock Screen and Notification Center to be one thing. So when you’re on the Lock Screen, you’ll see notifications you got when your phone was locked. But then you can swipe up in the middle of the screen to view notifications that came before.

There’s too much swiping going around right now and I’m not sold on the idea of merging the Lock Screen and Notification Center. But we’ll see more refinements here in the next 3 months before the final release.

2. Now Playing Card on Lock Screen

iOS 10 vs iOS 11 Now Playing Lock Screen

Now when you’re playing some music, it shows up as a card on the Lock screen (and thereby, the Notification Center), instead of taking up the entire screen.

What this means is that you’ll be able to scroll through notifications even when there’s media playing, and look up past notifications by swiping up.

3. Unlock Animation

iOS 11 Unlock Gesture

In the first iOS 11, the unlock animation is new. When you press the Home button, the Lock Screen, slides up to reveal the Home Screen. As it’s now merged with Notification Center, this animation makes sense.

4. Home Screen

iOS 10 vs iOS 11 home screen

There are small changes on the Home screen. There’s the new wallpaper of course, along with new icons for status bar. The starkest difference is that the apps and folders on the dock no longer have their names. And thanks to this, the dock itself has shrunk by a few pixels.

5. Control Center Redesign

iOS 10 vs iOS 11 Control Center

Control Center is back to being a one page only affair (thankfully). The buttons now have a dark background. Control Center can now take up an entire screen and comes with tiles that you can 3D Touch to expand. The expanded view gives you more information or options.

6. iMessage App Drawer

iOS 10 vs iOS 11 iMessage apps

Apple has redesigned the iMessage app drawer to make it easier to find and use iMessage apps. They’ll now show up as a little ticker at the bottom of a conversation. Tap and hold to expand them. Swipe horizontally to scroll through. Tap an app icon to open it.

7. App Store Redesign

iOS 10 vs iOS 11 App Store

App Store has been completely redesigned and it looks more like the Apple Music app now. With a lower information density, bigger type and visuals.

iOS 10 vs iOS 11 App store app detailed view

There’s also a new Today tab, Games tab and Apps tab.

8. Siri UI Update

iOS 10 vs iOS 11 Siri

Siri’s UI has been changed. The text and updates are now left-aligned. The text is bigger and Siri now shows multiple answers instead of just one. There’s now a clearer button to edit your question to Siri as well.

9. Phone App Redesign

iOS 10 vs iOS 11 Phone Favorites

Similarly, the Phone app has also been redesigned to include the big bold headers, and titles in bold. Everything is more spaced out and clearer to read.

10. Calculator App Redesign

iOS 10 vs iOS 11 Calculator

Both the icon and the entire app have been redesigned.

iOS 10 vs iOS 11 Calculator icon

The icon has a more retro feel while the app looks more like the circular keypad in the Phone app.

11. Video Player UI

iOS 10 vs iOS 11 video player youtube

The built-in video player on iOS 11 sees a visual update.

iOS 10 vs iOS 11 Video player

Instead of the frosted glass sections on the top and bottom, iOS 11 player now has dark floating sections. On the iPad, there’s now a clear way to engage Picture-in-Picture and AirPlay.

12. Settings App Redesign

iOS 10 vs iOS 11 Settings

Settings app is also replacing the top navigation bar with huge titles. This is common in the Settings list page and some top level pages like Control Center as well.

iOS 10 vs iOS 11 Settings Control Center

This is common in the Settings list page and some top level pages like Control Center as well.

13. Status Bar Redesign

iOS 10 vs iOS 11 status bar

Status bar now has signal bars instead of dots. The location services icon is also different now – an outline instead of a solid icon.

14. Notes Design Refinement

iOS 10 vs iOS 11 Notes

Notes app gets bolder headings and titles across the app.

15. Safari Design Refinement

iOS 10 vs iOS 11 Safari

Safari’s UI is a lot more spaced out, with the URL bar expanding a couple of pixels. The URL text itself gets a bit of padding.

16. Calendar Design Refinement

iOS 10 vs iOS 11 Calendar

In the calendar app, the Year view now looks different. The headers are again, bolder and they’re no longer all caps.

17. Storage Management Section

iOS 10 vs iOS 11 iPhone storage

iCloud & Storage section has been renamed to iPhone Storage. It now has a Mac-style chart on top that breaks your storage usage by Apps, Photos, Videos and more. You’ll also see the last used date for apps in the list below.

18. iPad Dock

iOS 11 iPad Dock

iPad’s new Dock looks a lot like the one on the Mac, it’s now floating and can be brought up by swiping up from the bottom of the screen. You can put more than 6 apps here. And recent apps show up in the right edge.

19. iPad Slide Over

iOS 11 iPad Split View

Slide Over doesn’t show up from the right edge of the screen anymore. You have to tap and hold on an app from the Dock and bring it up to the screen to open it in a narrow, floating view above the full sized app.

20. iPad App Switcher

iOS 11 new App Switcher

iPad App Switcher has been completely redesigned. It now includes the Dock, Control Center, apps, and Spaces.

Caught Any Subtle Changes?

Have you been using iOS 11? Did you catch any new design change that we missed out on? Share with us in the comments below.