The Design of macOS Big Sur

July 02 2020

Disclosure: All of this is based on macOS Big Sur Beta 1 and everything can change in future versions.

At WWDC20, Apple announced macOS Big Sur and a complete redesign of the Mac operating system. But why did they spend the time changing an interface that has worked fine for the last twenty years? And does the new design make any sense?

Concept

In the introduction video, Apple's chief human interface designer Alan Dye described the goal of macOS Big Sur: bring more clarity to the Mac. To achieve this goal, Apple redesigned the entire user interface to look more like iOS. A lot has changed but does Big Sur deliver on that goal?

Iconography

For macOS Big Sur, every icon in the Mac operating system has been redrawn. Until now, application icons on the Mac have looked quite different from those on iOS. While icons on Apple's mobile platform are usually flat and always masked to a squircle, traditional Mac icons have featured depth and could take on different shapes depending on the kind of app. In macOS Big Sur, all new Mac app icons should fit into a squircle but can have elements that float above the basic shape layer. The Xcode icon's hammer floats above the blueprint, for example.

Good examples of the new icon style

The new application icons also feature a lot of depth. The shadows are stronger than they would be in the real world, but in a fun way. Instead of trying to look like a physical object, these icons are their own thing. I like it. Most of the default icons in Big Sur adopt this style very well, but some others don't. Good examples of this new style are Xcode, Sticky Notes, System Preferences, and Messages. While these icons would not look great on iOS, they feel right at home on the Mac. Other apps, like Podcasts, Reminders, TV, and Calendar, only partially adopt the new style. While Podcasts still has a drop shadow, the TV app is just a greener version of the icon used on iOS. In my opinion, these icons don't work well on macOS and you should stay away from this iOS-like style.

Some of the iOS icons used on Big Sur

Additionally, all icons in the user interface have been replaced by SFSymbols. The new icons are way more rounded than classic Mac user interface icons and all gradients have been removed from the symbols. SFSymbols were designed in combination with the San Francisco font so the icons will look great next to text in your user interface.

I appreciate the consistency of the new symbols which have already been adopted by all of Apple's apps. Now there's just one style for icons across all of the platforms. Some of the new application icons look very nice but for every good example, there's at least one app that just uses the iOS icon. We'll have to see how the icons of third party applications look when the new OS ships in the fall.

Windows

Windows are one of the most important elements of the Mac. They aren't just rectangles in which the app draws its content either. Most apps have toolbars, sidebars, or popovers. For macOS Big Sur, Apple redesigned all of these elements.

When Apple introduced dark mode with macOS Mojave, they didn't just translate all whites to neutral dark grays. Instead, the dark grays get tinted with the tone of the desktop background picture. This is supposed to make the entire OS feel more coherent but since webpages usually use a natural gray, it often results in a lot of different gray tones that don't look good together. This year, the effect is way more pronounced which might make all your windows look a bit weird depending on your desktop background. If you don't like the effect, you can switch to the graphite accent color in System Preferences.

Very tinted window backgrounds in Big Sur

Most modern macOS applications use toolbars to make common actions easily accessible. With macOS Big Sur, toolbars have been completely rethought. Now, a toolbar can be combined with the title bar, and while still having the window title and subtitle be visible. This wasn't previously possible.

Toolbars are now higher by default, and buttons in the toolbar no longer have borders around them. Search bars can now also be hidden behind a button, which means more toolbar items can be visible when the window size is smaller.

Switches aren’t connected if the mouse is not hovering above the toolbar item

The look of sidebars has also been refined. Until now, toolbars always spawned across the entire width of the window. In Big Sur, if an app uses a sidebar, the blurred background of that sidebar will fill the entire right side of the window. While this certainly looks nice and defines a clear place to drag the window around the screen, it's mostly wasted space that could otherwise be filled with toolbar items.

Safari’s new toolbar: Wasted space?

By default, table views inside the sidebar now use a new inset style. While this looks like the grouped inset style introduced in iOS 13, in this style each row is rounded. Overall, this spaces the rows out and can make them more readable, but it's not a change that will make any difference in how we use the Mac.

Finder now features the full-height sidebar

Since Mac OS X 10.0, modal dialogs were displayed at the top of a window. A button in a dialog would typically be placed at the bottom and aligned to the right or left depending on what it does. On iOS, alerts have always been displayed at the center of the screen while the rest of the app would be dimmed. With macOS Big Sur, those centered dialogs have come to the Mac. Just like on iOS, the window gets dimmed when the dialog is presented and then dialog‘s description is always centered. The centered description text often makes the dialog hard to read quickly. In general though, the new dialogs work about as good as the old ones.

iOS dialogs on the Mac!

Just like other dialogs, open and save panels are now centered.

Save and open panels in Big Sur

Other Changes

Most of the interface controls in Big Sur have received design tweaks. These changes make the UI feel more modern, sometimes at the expense of usability. While I don't like all of these changes, you'll probably get used to them.

Every menu in the menubar now has rounded corners. Additionally, items in those menus have been spaced out, which is a great change because even for mouse usage, the larger hit areas are awesome!

Round menus

Finally, the new Control Center looks ... weird. All of the UI used in this panel is custom to Control Center and the length of the sliders makes it hard to adjust the values. Another interesting choice is the omission of a back button when a specific section is open. Clicking on the title of the section to go back is not intuitive!

So how do I get back?

Conclusion

While the design of macOS Big Sur might initially seem like a big change, after having used it for a while I can safely say that this is still the Mac. Some options have moved, some icons are rounder, but overall the actual behavior of the OS hasn't changed. The Mac looks a lot more like iOS now and in most areas, that's better. So yes, Apple has brought more clarity and consistency to the Mac.