Some key-point about Apple's Human guideline on macOS Big Sur

Despite the extra bit of effort designers need to get fluent with macOS Big Sur, it is undoubtedly a revolution in motion. It is where UI design trend is heading. Here’s our 2 cents on macOS Big Sur, written by designers for designers.

macOS Big Sur - released on November 12th, 2020 - has caused quite a buzz with its breakthrough UI trends. Big Sur introduces many profound changes, compared to the old version of macOS. The most outstanding ones are undoubtedly the icons, backgrounds, components, and widgets that immediately intrigue Apple’s advocates. That means designers like us, especially those who specialize in designing or macOS, will have a bit of work to do to adapt to this emerging trend.

Are We Finally Moving Away From Flat Design?

Minimalism, by definition.

“Minimalism for me is about keeping a space simple, uncluttered and accentuating the attractive architectural features of a space. The palette is mostly monochromatic and color is used as an accent.” - Sharon Blaustein, principal designer at B Interior LLC

Minimalism doesn’t equal flat. Minimalism can go as far as 3D blocks if we may. Regardless of what elements or styles are there, as long as they form and maintain the neatness of the design, that’s minimalism. With the new UI of macOS Big Sur, Apple maintains its minimalist concept by using subtle effects (transparent background, drop shadow/ inner shadow) to create a 3D cube experience in their products, all the while reducing visual complexity.

According to Alan Dye, the VP Human Interface at Apple: “Depth, Shading and Translucency are used to create the hierarchy. New materials are rich and vibrant….”

✋🏻 Design Tips: Imagine how minimalism may gain space in your design. Observe how simple effects (shadows, translucency) build visual hierarchy.

The next thing we can easily recognize is App Icons.

App Icons

Messages App Icon

Throw it back to 2017, Skeuomorphism is one of the most popular (also most hated) trends that had emerged thanks to the interactivity with any button on the app, using drop-shadow & inner-shadow. Since the release of macOS Big Sur in 2020, Apple's App Icons is no longer flat but it follows the Skeuomorphism style. At a closer look; the new icons include in-depth and details that convey a realistic weight and texture.

How App Icon changed in new macOS Big Sur

✋🏻 Design tips: New app icons share a common set of visual attributes, including the rounded-rectangle shape, front-facing perspective, level position, and uniformed drop shadow. To get more information about specifying the correct shapes and drop shadows, check out Apple Design Resources.

Background

The next thing Big Sur impressed its users is the background. It is easily noticed that macOS Big Sur uses translucency and blurring effect to evoke a sense of depth by enabling views and controls to hint at content residing in the background - Progressive blur, which can be easily recognized in the header of the browser, sidebar, notification, control center, .. etc. Lucky or us designers, there is a simple formular we can all follow to achieve this stunning effect.

✋🏻 Tips: Background Translucency (Light Mode)

Fill: F5F5F5 (Opacity: 80%)

Inner shadow (X:0; Y:1; Blur 3; Spread: 0, FFFFF: 50%)

Background Blur (81,55)

Applying the formula above, you will have a background like this:

Sidebar Progressive blur background

✋🏻 Design notes: When we have a view with a translucent background such as a sidebar or a menu, full-color images may not have sufficient contrast against the background and may seem out of place.

All the combination above creates the high-level UI of macOS Big Sur which stays true to the rules of minimalism.

Typography

Since macOS 11, the system provides the San Francisco fonts in a variable format. This format combines different font styles in one file and supports interpolation between styles to create intermediate ones. With interpolation, typefaces can adapt to all sizes while appearing specifically designed for each size.

macOS Big Sur uses the font-weight under 26px for Headings and Sub Titles, while Body text is around 11px-13px, which is relatively small compared to other fonts with the same font size.

Source: Apple

Apple also deployed Symbol Icon to its San Francisco collection. SF Symbols is created to integrate seamlessly with the San Francisco system font, the symbols automatically ensure optical vertical alignment with text in all weights and sizes.

Now it takes very little time to get the right symbol when designing an app or website. We just need to copy and paste, ten the icons are ready for use.

Source: Apple

✋🏻 Design tips: you should practice using macOS Big Sur sample components to get the mindset about typography hierarchy first. Follow the typography and spacing rule of Apple's Human Interface Guidelines for a clean design in minimalist style

Sound effect

macOS Big Sur is not only a visual redesign but also about the sound effects. Moreover, one thing worth noticing when starting to run MacBook, do the empty trash…, is the new sound experience compared to the old version. Those combinations between sound and motion effects have created a more immersive user experience.

The sound differences between macOS Catalina and Big Sur

Wrapping Up

In this age of multiple devices, many companies choose native apps because they can easily be combined with the whole ecosystem. The typical example is all Apple Systems including iOS, iPadOS, macOS, even watchOS, which all work as one big ecosystem. Like cells in one body. They all share the typography, iconography, and almost identical visual styles that bring an incredible user experience, best performance as well as user interaction.

Apple products in its ecosystem

Such apps are completely customized to take complete benefits of the platform and offer users an amazing experience. I hope this short recap can bring you a closer understanding at the native app - macOS Big Sur to enhance your design.

Share this post

Subscribe for “The Next Bytes” where Han & the crew draft up our observation in the industry.

We’d love to work with you.

Drop us a message if you need any helps from the Dwarves

Let’s build with us