Apple, Big Sur, and the Rise of Neumorphism

If you watched Apple’s annual WWDC event this week, or have been even casually observing some of the announcements the company made, you may have noticed something new — something a bit jarring.

Yesterday saw the introduction of a whole new version of macOS, moving beyond the X designation into a new version number: 11. macOS 11 (known as Big Sur) boasts loads of new features that bring it closer to parity with its iOS counterparts on iPhones and iPads, but one area where there seems to be a divergent path is… its icon and user interface design. You can blame that on a little something called Neumorphism, and like or hate it, it’s the next wave in UI design.

Neumorphism has been making the rounds on Design Twitter for a little while now, and most of the response to it has been negative. There are plenty of valid criticisms out there, primarily that early design experiments were focused on design differentiation and not actual usability. But if you look beyond specific implementations we’ve seen thus far — usually created by designers whose focus is formalism as opposed to usability — to the base concepts, there is something that's actually quite exciting and sustainable; something that has yet to be fully realized.

When you boil it down, neumorphism is a focus on how light moves in three-dimensional space. Its predecessor, skeumorphism, created realism in digital interfaces by simulating textures on surfaces like felt on a poker table or the brushed metal of a tape recorder. An ancillary — though under-developed — aspect of this design style was lighting that interacted realistically with the materials that were being represented; this is why shadows and darkness were so prevalent in those early interfaces.

When you boil it down, neumorphism is a focus on how light moves in three-dimensional space.

But the lighting and texture simulations being done for those designs were still relatively simple: which objects are shiny and which are rough? Which objects are transparent and which opaque? These were ultimately utilitarian and somewhat arbitrary choices. What sets neumorphism apart from its progenitor is that the focus is on the light itself and how it interacts with a variety of objects in a purely digital space. The light simulations in neumorphism are more complex, and are focused on how light from one object could affect another, or the function of the object itself.

Remember this little dude?Apple

The earliest examples that drew so much criticism often show white UI elements on white backdrops, with the differentiation created solely by the interaction of the elements with light, the reflection of the light from the top and shadows cast from the bottom, suggesting they were raised from the surface. There are usability improvements that would need to happen before this style could be widely applied, but it demonstrated something that skeumorphism had not — a concept of a global lighting schema that transcends one individual object and dictates how multiple objects interact in one world.

Going flat

Abandoning skeumorphism in favor of flat design in the early 2010s allowed for a much wider and more expressive toolkit of colors and design elements. Untethered from a basis in physical objects, objects could become any color and space could be better used. By removing unnecessary embellishments that only existed to indicate an element was intended to represent a three-dimensional object, designers were free to explore.

During the near-decade reign of flat design a lot of important developments were made in the realms of usability and user experience. But as time wore on and physically-based, two-dimensional design became less common, the reintroduction of physicality was always going to be appealing to return to and investigate further. This is doubly true when you consider the possibility of bringing the learnings from flat design back into a more tangible context. And so the pendulum began to swing back.

Criticisms aside, there is one undeniable feature to neumorphism that makes it so appealing. It looks new. Flat design’s core “digitally native†look, and its implementation of ideas like stacks, pages, and layers have become familiar to the point of ubiquity over the last 8+ years. Neumorphism is far enough away from what users have become accustomed to that it genuinely does feel like a new language. That differentiation is valuable, especially to a company like Apple trying to move its operating system to a new numbered version for the first time in 19 years.

The iPhone was released in 2007, and the flat-design of iOS 7 was introduced in 2013. Its basic look and feel has existed for longer than the original skeumorphic iPhone UI and has undergone only minor alterations. Neumorphism provides a way to keep things moving without committing to a serious overhaul of the design language (let’s be honest, “implementing neumorphism†at its most basic is just adding drop shadows, outer glows, and the occasional 3D object; pretty easy). But where neumorphism really gets interesting is when the system goes beyond simple visuals, when it explores and exploits those digital spaces to make user interfaces more understandable, approachable, and beautiful.

Baby steps

So why does Apple’s take on it look... kinda bad? As mentioned earlier, the conceptual framework of neumorphism is relatively new, and there has been a resistance to it in much of the design world. UI design has been plagued for the longest time by designers who love to create hypothetical designs untethered to actual usability or user experience needs as a purely formal exercise, and this has led to infighting. On one hand, conceptual design explorations are just that — explorations. On the other, UI/UX design is unique from some design disciplines in that there are very concrete definitions of success and failure (some would argue that all design disciplines require a rigid interpretation and that this is simply the nature of Design™ but those people are nerds and are wrong).

A designer could “explore†whether a button that a user needs to tap should be invisible, but since the user is thus not able to progress, in this application the design is considered a failure. Experimentation with form will always be difficult to balance with usability in the field of interface design, but it doesn’t mean it should be dismissed outright. Hardcore UX/UI designers disparage almost all forms of formal experimentation as unnecessary and speculative; hardly something that could exist in the real world.

Some of the dismissals of neumorphism stem from this divide, the early in-depth explorations centered around applying the most identifiable aspects of the new style to the most identifiable aspects of user Interfaces, resulting in it being utilized in places where doing so would break the necessary tenets of UX design. In order to develop neumorphism to what it should be, we need to separate them a little and develop them independently. In a way, Apple’s new design system for OS 11 seems to be the first high-profile instance of this decoupling actually happening. There are signs of neumorphic style, particularly a focus on the complex interactions of light being used on non-UI elements all throughout these icons.

As always, third-parties will move the ball forward faster and with more daring than Apple can muster

In some places it’s executed more successfully than others. In places where the translation from two-dimensional icons to three-dimensional-inspired neumorphic style was obvious, the icons are more successful. Looking at the Messages icon, for example, the concept of a speech bubble is well-defined, and so the way that this object would behave in these lighting conditions is known. There are other, more abstract instances, however, where the translation to a three-dimensional, light-interacting object is less clear. This is where the style starts to break down.

The Photos icon is a great example. In an effort to keep it recognizable, the design was barely altered, but to allow it to sit comfortably in this neumorphic world, some drop shadows and outer glows were applied to an otherwise flat icon. This adds complexity without resolving the actual object into something that exists in shared space alongside other icons in the suite. The App Store icon fared a little better than the Photos icon did, but the same principle applies, translating a line-art icon designed for two-dimensions into what is effectively 3D digital noodles. To have something like this truly belong in the suite of objects designers are moving towards, it would need to undergo a more significant rethink, which then opens the door for user confusion.

Obviously, these designs will be gradually modified over time until they begin to form a more cohesive whole. When you look back at the very first cut of flat design in iOS 7, there were many places that were rough around the edges. The Helvetica Neue was too light, the overall appearance of the colors too saccharine. Little by little, it evolved and became more refined. The same will be undoubtedly true of Apple’s foray into neumorphism. In fact, its move towards this school of design confers an air of legitimacy to the concept that will now be well exploited by any designer hoping to fit within the company’s new philosophy.

Now that the design world at large will be forced to reckon with neumorphism, there will be an explosion of development around the possibilities of the system, and far more headway made on how the philosophy of this new digital space is legitimately applicable to user interface design and functionality. As always, third-parties will move the ball forward faster and with more daring than Apple can muster — and this is when we will truly begin to unlock the power of neumorphism.

Also, Apple will probably release an update with some better icons.

Jack Koloskus is the lead designer for Input and The Outline. He likes plants, mushrooms (which are not plants), 3D software, and designing websites. You can say hello to him here.

from Hacker News https://ift.tt/3ezgryl