The fall of flat design over the last few years has caused many new trends to appear in user interface design. These new design trends have broken away from flat design’s overly simple visuals and shifted to revive realism.
One of these new design trends is neumorphism. This trend mixes the effects of minimalism and realism to create interfaces that are easy to comprehend, but are not overwhelming to the eye. Neumorphic designs appear soft and feather-like due to the use of shadows and highlights that create depth on the interface.
Neumorphism brings a modernized flavor to flat design by maintaining simplicity, but eliminating the flatness. Let’s talk about neumorphism’s origins, how you can use it in your designs, and how it compares to other design trends.
To better understand neumorphism, we need to go back and review the evolution of interface design.
As personal and home computers became more affordable in the 1980s, the software running on these computers needed to feel familiar to user’s mental models. But did users have mental models for something they’ve never used before? Absolutely.
Humans use their past experiences to take on new ones. Since humans hadn’t encountered a digital experience before, the software’s interface design relied on physical experiences.
How did interfaces first integrate physical experiences? Through skeuomorphism. This design trend inserted familiar elements from the physical world into the digital. Features of skeuomorphic interface design include:
A real-world example of skeuomorphic design is the older version of the Notes app on Apple devices:
Skeuomorphism helped users become more comfortable with digital experiences. But the design trend had its share of cons including unappealing visuals that looked cluttered, and poor loading speeds from the interface’s detailed elements.
To address the cons of skeuomorphism, flat design emerged in the early 2010s. Flat design minimized the details found in skeuomorphism. No more shadows, textures, and gradients — and no more literal interfaces.
Flat design took a “form follows function” approach by focusing on the usability of the interface. In contrast to skeuomorphism, flat design includes:
Microsoft was among the first to adopt flat design, as you can see in this older version of their homepage:
Though flat design’s approach is directly influenced by skeumorphism’s limitations, it also had its share of cons. For example, it caused some usability issues since users couldn’t always tell what was interactive or not, and it was widely regarded as too simple.
So where is the balance between being too cluttered and literal versus being too simple and unclear?
Neumorphism (or new-skeuomorphism) was introduced around 2019 once flat design began losing traction. This design trend blends skeuomorphism and flat design. Like the transition from skeuomorphism to flat design, neumorphism is a response to flat design’s limitations.
Instead of moving toward a completely new design era, neumorphism brings back elements from the realism found in skeuomorphic design to balance with the minimalism found in flat design. Features of neumorphism include:
This design concept by Filip Legierski is a great example of neumorphism:
Think of this trend as a modernized skeuomorphic interface — that’s why it’s called new-skeuomorphism. The reintroduction of shadows, gradients, and textures makes these interfaces feel realistic without being overly cluttered.
Through the evolution of interface design, neumorphism takes the best features from skeuomorphism and flat design by merging them into one trend.
Now that we’ve discussed what neumorphism is and how it came about, let’s review a couple of examples in action. These examples demonstrate neumorphic design in a savings app and login page concept.
This first concept of a savings app shows an interface with subtle shadows and minimal use of color. The minimalism helps the interface look modern, and the shadows on each design element bring in a touch of realism:
Visual elements that make up the savings app’s neumorphic design include:
This concept’s neumorphic design is effective in drawing the eye to the bright, teal color. Strategic use of color helps the user quickly see the most important information on a screen, such as calls to action or data visualizations. Since the remaining interface is grayscale, it prevents the user feeling overwhelmed while looking at the screen.
This second concept gives us a glimpse of neumorphism in both light and dark modes. The login page shown in this concept uses both drop shadows and inner shadows, includes minimal color, and gives elements a glowing look:
Elements of neumorphism in this login page include:
This concept maintains the minimalism of neumorphism in both light and dark modes. The use of grayscale colors helps the lime green color stand out on the interface. Additionally, the drop and inner shadows give visual cues to the user regarding what is interactive and what isn’t.
These concepts are strong examples of neumorphism to reference. Each concept checks the boxes for the visual effects to include when designing for this trend. Simplicity, minimal color, and use of shadows all create an interface that blends minimalism and realism.
Choosing the look and feel of a product’s interface is not an easy decision. Your product’s user groups, competitors, and company-branding should all be factored into the decision-making process. Neumorphism may be a design trend to consider when adopting a visual language, but knowing the benefits and limitations can help the ultimate choice.
Benefits of neumorphism include:
Neumorphism provides a way to blend the “form follows function” principle while adding creativity that was lost during the flat design era. These interfaces still look modern, but include more visual styling than the bare bones required.
Additionally, the simplicity of neumorphic design is easily translated across different experiences in one application, as well as across products from the same family. This can help different teams designing for the same company remain consistent with both aesthetics and interactions.
Though creating simple, creative, and consistent user experiences are ideal benefits for any design trend, it comes with some limitations.
Limitations of neumorphism include:
Neumorphism brings up both accessibility and usability concerns due to the low-contrast and minimal color schemes that define the design trend. However, there are ways to address these concerns while still using elements of neumorphic design.
For example, users with visual impairments like color blindness or low vision may have trouble reading neumorphic interfaces. To meet Web Content Accessibility Guidelines (WCAG), non-decorative elements on an interface must have a three-to-one color contrast ratio against adjacent colors. This includes UI components like buttons or input fields.
Because neumorphism typically uses low-contrast designs, it normally fails this three-to-one color contrast ratio requirement. A simple way to update your design to meet this standard is by adding a gray border to the non-decorative element:
As for usability concerns that can impact any user, interactive elements on neumorphic interfaces may not be distinguishable from non-interactive elements. This can cause users to become stuck or confused on a given webpage. Even worse, it could cause a user to abandon your website or application.
A few ways to address usability issues in neumorphic design is using strategic visual cues, like using your chosen bold color or clear text labels for interactive elements, implementing visual indicators for hover and active states, and more.
Of course, creating accessible experiences is a must in 2024. Traditional neumorphic designs are not accessibility-focused, but that doesn’t mean they can’t be. Ensure text and non-text elements, like UI components, meet the specific WCAG color contrast requirements to create neumorphic designs that are inclusive.
The neumorphic design trend has its pros and cons. If you or your team decide it’s the right approach for your product, make sure to address the accessibility and usability concerns before officially adopting it as your interface’s visual language.
If you decide you want to incorporate neumorphism into your designs, it is easy to adopt. But if you’re unsure where to start, I will demo how to create a neumorphic segmented control in Figma.
Segmented controls are a UI component that allows a user to swap between views or content on a webpage. The segmented control I’ll demonstrate below will allow the user to swap between different views on the webpage for Week, Month, and Year.
The segmented control will include three controls to swap between our views. Follow these steps to create the text layers we need:
You should see something like this:
We need to visually indicate one control that is currently selected and two controls that are not selected:
Option
+ Command
+ G
Here’s the result:
Now, we need a base for our segmented control to contain the three Week, Month, and Year controls:
Note that since I added an inner shadow to the frame, I can’t add the “Selected” control frame into the base frame. If I did this, the inner shadow would cover the “Selected” control and I wouldn’t get the debossed effect for the base.
Here’s our design so far:
Our base contains space for the “Selected” control, but they haven’t been combined into our single segmented control yet. Here’s how to combine them:
Here’s the final design concept:
That’s it! Now you have a segmented control that follows the neumorphism trend. The use of drop shadows and inner shadows creates three-dimensionality by elevating the “Selected” control and debossing the base. These visual effects give the realistic effect of neumorphism.
As you can see, neumorphism is simply blending minimalism and realism into the same elements. Keep trying these visual effects on other UI components, like a button, to create a webpage or mobile design.
We’ve already discussed skeuomorphism and flat design. So, what other interface designs are trending? Turns out, there are many — and I’m sure there will be more in the future. Let’s talk about a few: glassmorphism, neubrutalism, and dark mode.
Similar to neumorphism, glassmorphism began trending around 2020. It also stems from flat design with its minimalist approach. Glassmorphism has been popularized through its use in Apple and Microsoft’s operating systems. Some features to identify glassmorphism include:
You can achieve the “frosted glass” appearance by adjusting the opacity and background blur of a design element in the foreground. The translucent appearance distinguishes the foreground element, but doesn’t completely cover the background.
In this way, glassmorphism helps users understand where they are in a product experience when popups or modals appear, since they can still see the primary background.
Apple’s macOS Big Sur release in 2020 introduced glassmorphism into their interface design. The operating system adopted bold, colorful gradients as its background, and the menu toolbar was replaced from a traditional white to the frosted glass effect:
Though glassmorphism is a popular trend today, it can pose accessibility issues. If the background blur or opacity doesn’t produce a high enough contrast with its background, the readability of text elements can become difficult for users with visual impairments.
If you use glassmorphism, your text and non-text elements need to meet their specific color-contrast requirements to make sure users can see the interface’s content.
Up next is neubrutalism, which was popularized in 2022. This design trend is also influenced by flat design, but rejects the idea of realistic interfaces found in skeumorphism. Instead of using subtle shadows and gradients to give elements a three-dimensional look, it uses bold colors and dark outlines.
Other features of neubrutalism include:
A well-known example of neubrutalism is Figma. They check all the boxes of the trend from their use of bright colors for background fills, bold outlines, and futuristic typography (they use a font called Whyte, if you’re curious):
Because neubrutalism uses unusual color schemes and bold colors for background fills, it can be hard to distinguish interactive elements on the webpage.
Color is typically used to draw the user’s eye to certain elements, like CTAs. So, using many colors on a given webpage can be overwhelming and confusing to users. If you use neubrutalism in your designs, make sure users are not confused by an overuse of color.
Dark mode, of course, isn’t a new concept — computers in the 1970s had a dark mode setting by default. However, dark mode didn’t start trending until more recently, around 2017. Once big tech companies like YouTube and Twitter released dark mode for mobile devices, the trend started to grow.
Dark mode can either be a display setting for users to select from or the only color scheme a product supports. In dark mode, the interface adopts a dark color scheme that creates a “nighttime” look. It’s less straining on the user’s eyes and is more sustainable due to the dark colors requiring less energy.
Features of dark mode include:
Many products support both light and dark modes, but some products only offer dark modes. Netflix only uses dark mode; same with other streaming services like Hulu and Max. Some speculate this is to give the feeling of being in a movie theater:
Most products should support both light and dark modes to allow the user to pick their preferred display setting. However, due to the energy-saving benefits of dark mode, designers might consider only supporting dark mode like Netflix or defaulting to dark mode.
The design trend you select for your product should be based on your users, what your competitors are doing (or not doing), and your company’s branding. For example, if your product needs something edgy and unconventional, choose neubrutalism. If your product emulates big tech companies like Apple, consider neumorphism or glassmorphism.
Whichever route you decide to go, you need to ensure the designs resonate with your users and are inclusive for users with disabilities.
Neumorphism is an exciting design trend you may consider adopting to help modernize and differentiate your product. It takes elements from both skeuomorphism and flat design by balancing realistic, three-dimensional effects with simplicity. Neumorphism’s visual effects allow for more creativity, but its minimalism reduces the risk of overwhelming users.
As with any design trend, neuomorphism has its pros and cons. It allows product designers to create more aesthetically-pleasing interfaces while driving consistency. But it also spurs issues around accessibility and usability. If you use neumorphism in your product design, ensure visual elements pass WCAG standards so your interfaces are high-contrast and inclusive.
When designing neumorphic screens or components, use a minimal color scheme with grayscale colors and one bold color. This not only creates the simplicity required for neumorphism, but draws the user’s eyes to the most important elements on an interface.
Additionally, use a mixture of drop shadows, inner shadows, and highlights to create elevation and debossing effects. This will generate the realism found in neumorphism.
Neumorphism isn’t the only design trending now. Big tech companies such as Apple and Netflix are using trends such as glassmorphism, neubrutalism, and dark mode.
When selecting a design trend to use for your product, compare and contrast the look and feel each trend gives to products and how it drives the brand. Most importantly, make sure the design trend resonates with your user groups.
Let’s continue to watch how neumorphism is applied to interface design, and what comes next as user experience design continues to evolve.
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
This design process checklist for icons will guide you step-by-step, making it easier to design icons that enhance any interface.
Talking to the wrong people? That’s research gone wrong. This blog will talk about how you can craft your screener surveys to keep your data clean and your findings on point.
UX design thrives on clarity. And Miller’s law helps do just that for your users. In this blog, I talk about how 7±2 works, and how the best UI/UX designs use it silently. Less is more, after all.
It’s lesser known, but brands simplify decision-making for users who settle for “good enough” instead of the perfect choice. In this blog, I do a thorough analysis of what brands use satisficing and how, and which ones don’t.