Skip to main content

On iOS 11 design

Back in 2013, Apple used iOS 7 to begin a major redesign of not just all the company's human interfaces, but the complete philosophy behind those interfaces. The photo-illustrative, metaphorical interfaces of the past, rich in texture and affordance were set aside for more digitally authentic, physically playful look. The training wheels were off. The Retina-natives were in control.

Then, last year, iOS 10 brought a big, bold, beautiful evolution. Rumor has it a designer working on the services apps — Apple Music, Maps, Home — came up with it. The goal was to better orient people, especially in apps with a lot of content.

Back in the old days of iOS, you could step out of a bar near dawn and still realize you were in Messages contacts rather than Find My Friends contacts or Game Center contacts, for example, simply based on the texture. Sounds silly, but it could mean the difference between texting a friend for help and pinging them with a challenge.

But how do you solve that, and other problems, across the entire operating system? Enter iOS 11.

Way-finding

Airports are great at way-finding. Every day, the large, easy-to-read, optimally placed signs help first-time and seasoned travelers alike get to their gates. Some airports do it far better and more elegantly than others, of course, as do some metros/subways, highways, and other directional alert systems, but that's the job they were designed to solve.

So too the new, large titles in iOS 11, which have now spread to other apps like Mail and Photos. They let you know right up front where you are. Unlike the heavy textures of the past, however, they shrink down and get out of your way after you've discovered what you need.

They're not used — nor recommended — everywhere, especially not where they would compete with rather than contrast against the content. But where they are used, they work extremely well. Especially when augmented by the new typographical hierarchies.

Position, size, weight, and color

Where iOS 7 introduced extremely light fonts, iOS 11 is getting heavy. Sometimes maybe too heavy. (We're still in beta, however, so just as Apple made iOS 7 a little less light as time went on, the company can still make iOS 11's fonts a little less heavy.)

The core idea is terrific, though. Instead of just size or color to distinguish informational levels, Apple is now using and recommending a mix of position, size, weight, and color.

In general, headers are on top, bigger, bolder, and darker and supporting text is underneath, smaller, thinner, and lighter. It results in faster wayfinding and much higher legibility, with a better content balance.

App Store

Nowhere are the benefits and high craft of this new design spin more evident than in the new App Store. The Today view is crisp and clear and more importantly — fun. You instantly know where you are and where you can go next.

See more

Read that whole thread.

Remarkably, the App Store's Update tab currently highlights the biggest weakness of the new design: With a lack of content to contrast against and expanded content hints, it feels bitsy and more difficult to read and navigate.

Glyphs, filled.

Where iOS 7 took its need for digital authenticity and relish for Retina too far, iOS 11 shows how confident everyone has become with touch-first interfaces. There are still gaussian blurs aplenty, but by no longer racing away from the affordances of the past, the best of old and new are now coming together for everyone's benefit.

Buttons, once stripped of everything but raw text, now have some shape and substance back. Glyphs, once the thinnest of outlines, are now heavier, thicker, and filled in.

It makes the entire interface not just more legible but more comfortable.

More to come

iOS 11 is in developer and public beta right now and will be released as a free update for everyone later this fall.

Rene Ritchie
Rene Ritchie

Rene Ritchie is one of the most respected Apple analysts in the business, reaching a combined audience of over 40 million readers a month. His YouTube channel, Vector, has over 90 thousand subscribers and 14 million views and his podcasts, including Debug, have been downloaded over 20 million times. He also regularly co-hosts MacBreak Weekly for the TWiT network and co-hosted CES Live! and Talk Mobile. Based in Montreal, Rene is a former director of product marketing, web developer, and graphic designer. He's authored several books and appeared on numerous television and radio segments to discuss Apple and the technology industry. When not working, he likes to cook, grapple, and spend time with his friends and family.

14 Comments
  • Well gee, Rene, thanks for explaining. And there was me thinking it was just a rather ugly, space-hogging piece of juvenilia which (like the Music app) looked much better before Apple started messing around with it. On a small screen there ought to be a premium attached to compressing content to make the best possible use of the available space. iOS11, like iOS10 before it, does the reverse. Compare the stock Music app with Cesium and I know which one I prefer the look of; the one which uses the screen space better to make it easier to navigate to find what I want.
  • Respectfully, I have to disagree. It's called typographical hierarchy. Graphic design 101 stuff. And iOS has been in desperate need of revisiting this since iOS 7. One of the reasons iOS 6 still looks beautiful (if a bit dated due to the textures), is that Apple put visual hierarchy before fitting more content on a screen. You've got an infinite ability to scroll to see more content. But when you skimp on visual hierarchy (appropriate whitespace, scale, typographical hierarchy, etc.) your eyes don't know where to go. It's not just visually unappealing, it's taxing for your brain. Apple has made a lot of progress with the new design during the iOS 11 betas already. Go into the Music app if you have the beta. Starting at the Library page, tap on Artists. Watch the transition as the bold Library heading shrinks into the back button and the Artists heading slides in to take its place. You know exactly where you are and where you've been. You can almost visualize a spatial map of the software in your mind. The latest beta is the first time I can use Apple News too. They've buttoned down the design and it feels so easy to skim content and headlines now. It's very nearly replaced Flipboard on my home screen. If I'm a bit glowy about Apple's new design, it's not because I'm some kind of zealot. In fact, for the most part I prefer Material Design. But this is a good direction for iOS and I'm more than willing to scroll a little extra in exchange for an emphasis on good design.
  • Haha...are you a Dork?
  • Are you a prepubescent child?
  • Thank you for discussing the design from an actual design perspective. It's frustrating how so many commenters criticize Apple for prioritizing form over function then crap all over Apple when they actually try to do anything functional because they think it looks ugly. The iOS 7 redesign was based mostly on form at great expense of usability and I'm glad we're finally seeing a recovery from iOS 10 and on.
  • Agreed. Apparently EVERYONE is a designer. Any of us in the design community have to just roll our eyes when everyone in the kitchen thinks they're the head chef.
  • I think the second paragraph should say iOS 10, not 11.
  • And this site will break the iOS UI by forcing its sharing interface on top of it.
  • iOS 11 [lack of] design...
  • The music app is terrible...still. Not only is it still as cumbersome as it ever to used to be if you're doing anything else, like running, etc. If you mess with it while driving, you'll run off the road. Ask Siri "Shuffle all songs..." Nope, have to say "shuffle all MY songs" Last thing you listened to was a podcast? When you get in the car, the first thing you'll hear is 4 seconds of your last podcast and then switches to whatever the first song in your library is. And Apple, NOBODY listens to their songs in alphabetical order, ever! iTunes...nuff said!
  • Uhm...why is the notification center a lock screen now?
  • Maybe I'm Old, but bigger titles are really a waste of space, if not unnecessary at all. CONTENT is king and more readable lists don't seem to be getting any love here. These "designers" seem to have lost the plot, and by that I mean RR's oft quoted Jobs mantra - design is about how it works, not how it looks. I wonder if Apple has stats for how many people go first to Accessibility to make their new designs workable? Unlocking to see notifications would be functional, though. I'd like some indication that I need to attend to a notification I've chosen to surface without displaying the content or even sender of that notification to anyone who picks up my phone.
  • In fact they probably do have that information and from what I see around is that people make the text bigger and bolder.
  • Fromm what I gather those of you complaining basically want iOS to function like a website from 2001. Full of text and visually more confusing. Theres a reason that most design on the web, apps, etc have emphasized larger text and images for a more immersive experience. iMore, Verge, ReCode and many other follow this design language. We live in a world full of content and info and making it easy to navigate is the chief goal. Not cramming as much onto the screen as possible. If you want that, go back to DOS (25 years ago) . We all see how everyone trying to be a designer worked out on MySpace 10 years ago (blue text on purple backgrounds)......HINT: It didn't work.