Neumorphism is a term coined by designer and educator Michal Malewicz, and it came about as a sidestep from the monopoly that flat design had held ever since the mid 2010s, when the world of design collectively dropped Skeuomorphism.
Like any trend that evolves in a community full of creatives, all of whom thrive on freehanding their work to suit their own style, there are bound to be some drawbacks, like cases of misuse and overuse of neumorphic design. Fortunately, there are plenty of resources that can show you how to use it correctly (including this article!).
Table of Contents:
- What Is Neumorphic Design?
- Neumorphism: The Origin Story
- Neumorphic UI Design: Pros vs Cons
- How to Create the Neumorphism Effect
- What’s Next? A Word From the Creator of Neumorphism
- Neumorphism Effect Examples
Have a look with us at the ins and outs of Neumorphism, see it in the context of SVG animation, learn how you can incorporate it into your projects, and get inspired by some of the most popular neumorphic UI design examples out there!
But first…
What Is Neumorphic Design?
Neumorphism as a term is a play on words that combines “new” and “Skeuomorphism.” So obviously, we can’t define neumorphic design without first touching on what skeuomorphic design is. The roles that flat design and material design have played in this trend’s onset are also important pieces of the puzzle.
Skeuomorphism in its infancy (1980s) had the aim to bridge the gap between users of new (at the time) tech and a system’s GUI. This style made the components of an interface look more like their real-life equivalents (e.g., the trash can icon and the floppy disc icon as a “Save” button), along with texture and shadowing to create dimension. As the need for the physical-to-digital resemblance toned down, and we were no longer novices to our devices, the design world turned its focus to a more minimalist alternative: flat design.
Flat design surged in popularity thanks to its compatibility with what would become the ultimate web standard: responsive design. Flat design elements, flat colors, and easy to scale UIs made it effortless for designers to shift the focus to user experience, and even cut costs in the process. Flat design was quicker and less labor-intensive to work with, and it posed fewer accessibility concerns than any other design style. But even in its finest hour, flat design felt restrictive in its confined minimalist ways.
Material design was perhaps the first attempt at a “meet halfway” reconciliation between flat design and skeuomorphism. In the end, it was only a “meet ¼ of the way” situation. Google created this design system in 2014, and it’s meant to provide the guidelines, components, and tools needed for the best practices of UI design. It encourages the use of animations, transitions, padding, and playing with shadows to create the illusion of depth. But it also comes with a set of strict visual guidelines that put intuitive use first.
Neumorphism is a style that hits the sweet spot between realistic design (Skeuomorphism) and the minimalist traits of flat design. It’s unbiased to color gradients, color transitions, textures, shadows, etc., but it successfully avoids reverting back to hyperrealism and its cluttered appearance. Neumorphic, or soft UI, design has an almost extruded plastic-like look, with a close to 3D cast.
Neumorphism: The Origin Story
What would soon be universally recognized as neumorphic design was first discussed in detail by Michal Malewicz in his “Neumorphism in user interfaces” article. Taking a look at the history of UI and how user interfaces have evolved in the past 30 years, the phrase “predictably unpredictable” comes to mind. As a trend, neumorphism is said to have been kicked off by one particular Dribbble shot that went viral. The designer behind it encouraged fellow designers to “Imagine that we live in a dimension where skeuomorph is still alive and has continued its evolution in mobile interfaces. What would applications look like then? Here is my vision.”
Michal would go on to explore Neumorphism further, and even come out with a book that analyzes and breaks down all the popular UI Design Styles and trends, sharing all the best practices for each one. He has repeatedly stated that neumorphic design is best used for its decorative appeal, and that designers should recognize the accessibility concerns surrounding this style.
Neumorphic UI Design: Pros vs Cons
What some consider just a Dribbble trend has actually changed the way designers approach emerging trends in the context of mobile UI design. It’s definitely not a new industry standard – even though a look at most designer portfolios in 2020 would have made you think otherwise. But it certainly stirred up the scene enough to make things interesting – for a while!
Let’s get the shortcomings out of the way first:
🚩 Accessibility
Why is neumorphic UI problematic? The shortest answer is that Neumorphism fails to meet some of the basic Web Content Accessibility Guidelines. The same properties that make the soft extruded plastic look possible are responsible for all of the trend’s accessibility issues – including, but not limited to: poor contrast, the troublesome “light colors on a white background” Neumorphism color palette, along with the lack of icon labeling and its failing to make clear which objects are clickable, etc.
All of this is not to say that making the Neumorphism effect accessibility-friendly is impossible! Quite the contrary – it serves to prove that when we step outside of the design world, and make room for a much needed conversation on inclusivity, we can lead the entire community in the right direction. Keep reading to see our tips on exploring neumorphic design with accessibility fail safes in place!
🚩 The Code Factor
Trying to achieve the soft extruded plastic effect with CSS is a bit more difficult than simply applying a regular box-shadow property on an object. The distinctive Neumorphism look requires experimenting with different “light source” scenarios, adjusting the gradient angle of the background to match the light source, and attending to other finicky details.
It’s true that you only need two shadows (a light one and a dark one), but nailing the variations required to achieve the “raised” effect or “pressed in'' appearance, and to keep neumorphic UI elements from completely blending into the background, is quite the adventure. Adrian Bece has some great tips in his “Neumorphism and CSS” article on the topic. Alternatively, you can always go the no-code route with a free SVG creator and vector animator like SVGator.
🚩 Overuse
The risk of going overboard when tackling neumorphic UI design is one of the most widespread drawbacks of this trend. When a design is chock-full of neumorphic UI elements, it starts looking less cohesive and simply stops making sense visually. The general consensus is that neumorphism works well for objects that are clear, legible, and arranged in a coherent structure – even if you were to completely eliminate the neumorphic aspect. Ultimately, the key lies in the self-restraint of the designer. All things in moderation, even pretty things!!
✅Paved the Way for New Trending Design Styles
User interfaces hold a key position in the system-user interaction, which means that they can pretty much make or break a project. It’s only natural for UI design styles to be inclined toward continuous change, unexpected merges, and perpetual trend direction shifts. Remaining static is not an option! And the post-Neumorphism craze evolution of UI design trends is a testament to just how quick the snowballing effect can be.
We’ve since seen several major UI design trends take off:
Glassmorphism
Key features:
- Transparency
- Multi-layered objects to create the illusion of floating elements
- Bright background colors to highlight the blurred top layer
- Subtle borders on translucent objects
Claymorphism
Key features:
- A combination of inner and outer shadows (similar to Neumorphism)
- Two inner shadows used to create the clay-like look
- Good contrast
- Friendly, organic shapes
- Used alongside minimal typography
- Strong accent colors
- Corners rounded more than 50%
- Sometimes referred to as “Fluffy 3D”
Key features:
- Blurred shapes
- A mixing together of blurred shapes to create an irregular gradient
- Radial gradient fills
- A decreasing opacity toward the outer edge of the fill
- Used together with the designer’s overlay style of choice (transparent/opaque, glassmophic, etc.)
It’s worth noting that these style trends have extended their reach far beyond the limits of designing user interfaces. They have instead secured their place among other graphic design trends!
Michal makes some great points in this video on why it’s important for us, the design community, to explore trends – even those that may not have the potential to be more than just a pause in the pattern.
✅ Brought Attention to Accessibility Concerns
The act of securing inclusivity in the digital world with accessibility-first design has only recently gotten the amount of attention it deserves. In the context of design styles and trending movements in the design space, Neumorphism deserves some props for simply opening up Pandora’s box, in a way. Neumorphic design was scrutinized in this regard even by its creator himself.
Hopefully, all the heat that Neumorphism received wasn’t just a simple case of virtue signaling, where one points a finger at the problem just for the sake of appeasing the general public. Finding ways to make this design style more accessible was a good ice-breaker for all the other difficult topics we should be addressing around the subject of inclusive design.
✅ Neumorphism Was (and Still Is) Fun to Explore
When done correctly, the neumorphic effect can without a doubt help you create user interfaces that stand out from the rest. Don’t let the possible slippery slopes of misuse/overuse turn you away from exploring this attention-grabbing design style. There are plenty of right ways to use Neumorphism – and lots to learn on accessible design in the process!
How to Create the Neumorphism Effect
We’ve put together a quick crash course on how to implement neumorphic design into your projects, taking into account Michal’s outline of Neumorphism as a design style. Essentially, neumorphic elements will look like they are extruded from their background, and a sideways glance would not make them look like they float on top, but rather that they are still connected to the backdrop. Here are the basics:
Defining Features of Neumorphism
- Two shadows are used, one light (positive value) and one dark (negative value)
- The background should not be completely black or fully white
- The color of the background should be similar (if not the same) as the parent element’s background color
- The elements have rounded edges
- A subtle border on clickable UI elements can be used to improve contrast and better define the edges
Here’s the original neumorphic design recipe:
Accessibility Adaptations
- Use Neumorphism for its aesthetic appeal only after you’ve established a well structured visual hierarchy in your project (via proximity, contrast, fonts, negative space, etc.)
- Verify your neumorphic design’s compliance with WCAG 2.1 criteria on contrasts – the 1.4.11: Non-text Contrast criterion in particular, which states that UI elements should have at least a 3:0:1 contrast ratio to meet the accessibility threshold
- Label icons
- Help users clearly identify which elements are clickable and which are not
- Make button states easily recognizable and this goes for any other static container element that the user can trigger via interaction (on hover, toggles, success/error validation states)
Ideal Uses
- To create eye-catching website cards
- To elevate the look of the user interface when used for other static container elements (the ones that don’t change states as a result of user interaction)
- As an alternative way to add depth to your design, when the same old drop shadows simply aren’t hitting the spot anymore
What to Avoid
- Overusing the Neumorphism effect will often lead to a boring design, so avoid heavily relying on just one style to carry the load of decoration, functionality, and accessibility
- Neumorphism is far from being a one-size-fits-all design style. Avoid implementing this effect if it’s simply not compatible with the rest of the company’s branding assets, unless there’s an entire rebranding operation planned
- Implementation, from the front-end team’s perspective, can be a chore in the case of neumorphic design. Testing should be done to verify compatibility with all platforms – so avoid approaching this effect solely from a design standpoint. Make the decision as a team!
For a more hands-on approach, you can watch Michal’s step-by-step Neumorphism style tutorial below, or use this handy Neumorphism CSS Generator that he created at Hype4 Academy!
What’s Next? A Word From the Creator of Neumorphism
The dust has settled, we’ve seen all that Neumorphism has to offer, and most of the design community has crossed paths with the “aftershock” trends that neumorphic design made headway for. Now what?
We decided that there’s no better person to ask this particular question than Michal Malewicz himself! He was kind enough to elaborate in a response and help us just like he’s helped 10,287 designers (so far!) with all the resources he shares through the Hype4 Academy, which he co-founded together with Diana Malewicz.
“I went through all of the trends, starting from Skeuomorphism, through Material Design and up until the Modern Design era with all of the other trends – just to notice that every 7 years we kind of get bored with the design style. [...] Another 7 years have already passed since 2014, so it’s time for another refresh – and this is actually happening.
The pendulum starts to swing back from the super minimal design towards a little bit Skeuomorphic, but not entirely. We’re not going back to wooden shelves in apps – don’t worry. We’re experimenting with some new things like organic blobby shapes, transparent backgrounds, extruded backgrounds, and some blurred backgrounds that make user interfaces look more organic and more natural.”
Michal Malewicz - Author, Designer, Speaker, Lecturer, and CEO & Co- founder of Hype4.com
Neumorphism Effect Examples
Ready for the fun part? Seeing how designers have made neumorphic design their own is the cherry on top! Not only did Neumorphism plant the seed of excitement around finding new user interface design styles – it also posed a challenge at first, and artists nailed it with these examples!
Neumorphism Website
A Neumorphic website dashboard with excellent visual hierarchy in place works splendidly with the soft UI style. The duotone color palette was a particularly nice touch!
Neumorphism UI Design
Neumorphic UI elements done right – easy to spot clickable buttons, and all of them clearly labeled. Designer did a great job of using the style to a perfectly reasonable extent for this user interface design.
Neumorphic Typography
The creators of the “Milkinside” typeface make a good point: “We moved past the myth that our world is flat – but we’re still designing in blocks and flat color.” No more! They’re elevating digital typography design (literally!).
Neumorphism Landing Page
A landing page design that converts has to first catch a visitor’s eye, and only then does it have the opportunity to persuade them into becoming customers. This neumorphic landing page is sure to stop anyone in their tracks!
Neumorphism Logo
Logos are not the most popular choice among designers exploring this style, but a neumorphic logo variation could be just as effective as having a logo animation. They can both give your entire branding strategy the “it” factor. Just extensions of an already well designed logomark/logotype!
Neumorphic UI Elements
A neat example of all the user interface elements you can deck out with this soft UI style – calendar cards, notifications, toolbars, lists, buttons, icons, counters, and more!
Neumorphic Icon Pack
These would make an awesome set of animated interactive Neumorphism icons! Add labels to clearly define their functionality, and this pack gets the greenlight from an accessible-design standpoint as well.
Neumorphic Animated SVG Charts
Browser support for SVG filters (or the lack thereof) is the antagonist of the love story between the SVG format and the neumorphic style. But don’t let that stop you from experimenting with all the ingenious ways that vector graphics can complement neumorphic design! An SVG chart animated with a self-drawing effect on a neumorphic backdrop is just one example of an ideal “meet me in the middle'' technique that goes around the support limitations.
Final Thoughts
As the pendulum swings between Skeuomorphism and flat design, it’s clear that the design community is always more than ready to take on new things just for the fun of having a totally (or relatively) new style to explore. Neumorphism had its fair share of time in the limelight, but more importantly, it has opened the way for a constructive discourse on making trends accessibility-friendly.
Want to tweak Michal’s Neumorphism recipe? Plan on creating an even more immersive experience with neumorphic design? Log in to SVGator and explore the style with SVG animation!
