Diving into Big Sur

Apple's UI embraces neumorphism

Remember when iPhone screens looked like this?

iOS 6

It’s been seven years since the glass bubbles, torn paper edges, and green felt were stripped away and replaced with the minimal graphic style of iOS 7.  macOS still retains some of the old skeuomorphic design in its icons but has largely been flattened to match the current iOS aesthetic.

iOS 7

If you missed Apple’s virtual WWDC conference this past Monday, there were several big announcements. One of these was the reveal of macOS Big Sur, which presented the largest visual redesign in OSX history. The first thing I noticed is that it looks a lot like iOS. This makes sense, as the platforms have been growing closer for years. The second thing was that everything had depth! WHOA! This marks another step forward in Apple’s interface design, which also means it’s officially a trend.

Skeuomorphic roots

The original aesthetic of iOS and macOS is called skeuomorphic design; that’s a complicated way of saying realistic. The visual style of the interface mimics real materials and objects; from the metallic cogs in the settings icon, to the reflective lens on the camera app. This mattered at the time because people weren’t as comfortable with digital interfaces. Presenting familiar-looking digital “objects” helped orient people and hinted at an application’s purpose. One of my favorite details in iOS 6 was the radially brushed metallic volume slider in music. The highlight on the software knob would move as you tilted your phone, using gyroscopic input to imitate the way light shifts across a metallic surface… just delightful!

iOS 6 music volume slider

Seven years down the line, people got used to the iPhone, apps, and what they do. Apple was able to modernize the style of iOS, simplifying apps down to simple colored squares, with minimal icons. It’s a triumph of graphic design and a testament to human adaptability. iOS 7 matched the clean modern principles of the phone that contained it.

Nerdy ID tangent

Apple uses continuous or G2 curvature on its physical products. This is a geometric modeling feature that accelerates the curvature of a corner radius. It creates a smooth transition between flat and curved surfaces, eliminating unwanted shadows/highlights created at the point of transition. Jony Ive, the designer behind almost every Apple hardware product since 2000 was notably involved in iOS 7’s redesign. He (I would guess) included this small detail that created even more consistency between the hardware and software experience. The resulting “squircle” shape has a subtle appearance that drips quality. If this can't convince you that good design is about details, I don’t know what will.

G1 radius vs. MacBook G2 radius
iOS 7+ app continuous curvature

The Big Sur dimension

iOS Maps icon vs. Big Sur Maps icon

Let’s take a look at how the new macOS icons compare to their iOS counterparts.  The layout, shapes, and colors are identical, but they have depth. This is primarily conveyed through the use of subtle highlights and shadows applied around different graphic elements. While this will be most people’s introduction to the look, it has been gaining popularity in UX/UI circles under the name “neumorphism.” What separates neu from skeuomorphic design is materiality. Neumorphic design has dimension, but its materiality remains abstract. It follows a recent trend in minimal geometric primitives used in product renderings.

Neumorphic UI design by alexplyuto

Some people view the trend as a cyclical change back towards skeuomorphism, but I see it as more of a logical progression. UI designers have reduced modern interfaces down to clean functional machines. They can still be beautiful, as Apple has proven, but there’s less room to play. Without careful attention to detail, the flat gets boring. Adding dimension gives designers a new tool to play with and add expressiveness to interfaces. I for one can’t get enough of that frosted glass effect.

Big Sur menu bar

Fashionably late to the Party

Apple is not the first to embrace neumorphism. Android introduced it’s Material UI design system several years ago now, which uses stacked layers of paper-like “material” that behaves with a profound logic.

Google Material Design

Similarly, Microsoft's latest Fluent Design system is even closer, using dimension, shading, and material to add physicality to its software.

Microsoft Fluent UI
macOS Big Sur UI

This is common for Apple. They are rarely the first to implement a new design or technology, but they are almost always the best. I look forward to seeing how this design change ripples across the industry.

Where Apple goes, others follow

As one of the biggest tech companies in the world, Apple's decisions affect everyone in their ecosystem. Developers have an incentive to design their apps to match the look and feel of Apple’s own. Because of this, I predict we’ll see lots of neumorphic refreshes in the near future.

Thanks for reading!

Wyatt

Back to blog