What Is Neumorphism: Its History, Present, and Future

Let’s take a look at neumorphism: what it is, how it developed, how you can use it, and what it means for the future of design.

The design world is full of trends that never go anywhere. Ideas bubble up, flood Dribbble, and before you know it, everybody’s imitating the original with mockups and riffs of their own. This then spawns further trends until, eventually, inertia wears out and the whole thing collapses on itself. Every so often though, a trend captures so much imagination that it explodes into a full-blown style of its own, with the potential to shape the whole of design for the next decade.

Designers live for these moments. They open up entirely new possibilities that reinvigorate us and excite us all over again.

Neumorphic PrototypeThe first ever neumorphic prototype. The rest is history. Image by alexplyuto.

One such trend-cum-style is the hotly talked about neumorphism. Started with just a single screenshot posted by a designer looking for something new to try out, it’s now finding its way into Apple’s design aesthetic for its latest operating system, macOS Big Sur. And, we all know that once Apple gets its teeth into a style, undoubtedly everyone else will follow. Today, we look at what neumorphism is, how it developed, how designers can use it, and what it means for the future of design. Plus, some tips on how to recreate the style yourself. Yummy.

Where Did It Come from?

If the word neumorphism is rustling up memories from the past, I wouldn’t be surprised. A contraction of new and skeuomorphism, neumorphism is the latest kid on the block that has taken something old and turned it into something fresh. Yes, ladies and gentlemen, skeuomorphism is back. Well, kind of.

SkeuomorphismApple bent heavily towards skeuomorphism for the best part of two decades. Here, you can see the calendar app featuring “rich Corinthian leather” instead of the usual chrome you’d find at the top of an app.

If you think back to the Steve Jobs days of Apple, you’ll remember that your phone screens looked a lot different to how they do today. Back then, the words “Corinthian leather” and “rich baize” described the textures of materials that designers used to create apps. Of course, the designers didn’t really use those materials—it’s all just pixels on a screen—but the purpose of skeuomorphism was to recreate physical objects in the digital world. So, a music player app might look like a tape deck with buttons that the user could press in and out of its casing. Game apps mimicked the surface of pool tables. The buttons in calculator apps were raised and looked to be made from plastic or other real-world materials.

The style came to a pretty abrupt end when it was rejected by the design community as being too literal, over the top, and a bit, well, tacky—we designers are fickle beasts. Out of its ashes, flat design was born, which was immediately polarizing due to its extreme reversal of everything that skeuomorphism stood for. Designers rejected realism, and instead favored flattening and simplifying every UI element to the most basic of shapes.

Flat DesignsFlat design came after skeuomorphism. Here, you can see that there’s no attempt to meticulously recreate real world objects, rather flat basic shapes are used to define the style. Image via PureSolution.

That’s not to say that skeuomorphism ever entirely went away. For example, the “Trashcan” on your desktop has always looked like a trashcan, even through the flat design days. However, as the new super-flat, super-2D style took over, once again designers started to question if, in fact, we may have gone too far the other way. If skeuomorphism was the loud, drunk person singing karaoke at the party, then flat design was the entirely inoffensive, introverted person that sat around the corner nursing their one and only drink of the night.

Although neumorphism is considered the successor of skeuomorphism, in actuality, it’s a child of both skeuomorphism and flat design, with a true mix of genes from both of its parents. Sitting comfortably between the two styles, neumorphism has become the design world’s next big thing.

What Does Neumorphism Look Like?

Neumorphism ExamplesHere are a number of neumorphism examples. As you can see, the emphasis is less on recreating physical items, and more about creating UI that feels like it could work if it were indeed a physical interface. Images via VitaminCo, alexdndz, and alexdndz.

Neumorphism embraces the idea of realism. Buttons should look like buttons, and UI elements should operate within the realms of physics. It believes that nothing is really flat, or floats above a surface, as flat design tends to suggest. However, it also believes that UI shouldn’t be draped in leather or baize. Instead, it should look and feel like a user interface made from materials that actual physical interfaces might be made from.

What you end up with is a style that looks sharp, feels fresh, and represents a modern take on how we might envision the future.

Therein, of course, lies its power and its weakness. Right now it feels ultra-sleek. You only have to watch Blade Runner or early Star Trek, however, to see how past embodiments of the future soon start to look tired and outdated. Will neumorphism head the same way? The jury’s out.

The basic principle of neumorphism is that rather than with flat design, where UI elements float in space and cast shadows on the things below them, instead, the elements are part of the background itself and extrude from it, as if they were pressed from a mold. This immediately gives the style a feeling of depth and an awareness of 3D space. Subtle shadows and deliberate gradients create the effect. One thing to note is that pure white or pure black interfaces are a no-no. Given the subtlety of the shadowing, to use one or the other would create a design that’s devoid of depth, therefore dispelling the illusion.

Neumorphic vs. Flat DesignThe difference between neumorphic and flat design. The irony of flat design is that UI elements hover over the background, so not flat at all. With neumorphism, the background and UI elements are one and the same.

UI elements look as if the user can interact with them— they can press a button in and out, grab and move sliders from left to right, or twist and adjust dials. This all sounds reminiscent of skeuomorphism, and there’s definitely hallmarks throughout. However, this new subtlety, with a focus on tints of black and white, gives it an altogether more modern feel. It’s not about recreating the real world in digital space. Rather, it’s about designing digital UI that looks as if it would function in the real world.

Usability is one thing, but accessibility is another entirely. Contrasts are an important thing to consider in visual design, as they allow us as humans to discern the shape of things and tell where one thing ends and the next one begins. Given the complete lack of contrasts in neumorphism, conditions such as color blindness could make dealing with the style hard-going.

How Do I Create This Hot New Thing?

Think about the subtle use of shadows in order to create that extruded illusion. We’ve been surrounding our UI elements in drop shadows since the birth of Photoshop. However, with neumorphic design, you need to be more particular about how you create those shadows.

Neumorphism BasicsAlthough neumorphism looks technically difficult, the basics of it are incredibly easy to achieve with any major UI-based design software, such as Adobe XD, Figma, Sketch, or others.

Take a simple rounded rectangle, for example. In flat design, you’d use a drop shadow to give the feeling that it’s floating above the background. The shadow usually casts to the bottom and to the right of the rectangle. With neumorphism, you need to cast shadows on all sides, as the rectangle isn’t separate from the background, but an integral part of it. By casting opposite shadows—light on the left and top-side, and dark on the bottom and right-side—you get the feeling of extrusion and a sense that the rectangle is pushing out of a mold, up towards you. This then allows you to sink UI elements into the rectangle, which adds to the feeling of depth. To that end, you have a design that feels like it could actually work in real life.

What Comes Next?

Wow, you really are eager, aren’t you! The paint isn’t yet dry on neumorphism and we’re looking at color swatches.

Although neumorphism resets two polarizing viewpoints on how design should be, one thing it does miss out on entirely is any feeling of life. I don’t mean that the style is devoid of personality. Far from it!

Rather, there’s nothing organic about neumorphism. Beautifully rounded corners there may be, but where’s the fluidity? Since the rise of the smartphone, UI design has been incredibly utilitarian and almost industrial in its outlook. And, it makes sense! Basic shapes (such as squares) are easy to create and will always tessellate nicely—they’re just easier to deal with. However, after nearly two decades of seeing everything through rounded rectangles—from our phones to our laptops, even to the design of app icons themselves—it may well be time for something more fluid, more organic, and less obvious.

Inevitably, any new design style will borrow from the past. So, should this come to pass, there will be an interesting time when we try to meld the two worlds together—the industrial and the organic. But, it’s times like these where the magic happens, when designers feel excitement all over again, and the next big thing is born.

Learn even more about the history of design and take a peek at growing trends and movements:

2021 Color TrendsDesign for the Digital World: Picking Icons for Your Website or AppDesigning for Change: The Role of Protest Art in Social MovementsDiversity in Design: Building Connections Through InclusionDesign Trend: Abstract Geometry, a Historically Modern Style

Cover image via Andrei Savchuk.

The post What Is Neumorphism: Its History, Present, and Future appeared first on The Shutterstock Blog.

Read more: shutterstock.com

Leave a Reply

Your email address will not be published. Required fields are marked *