Today, we’re going to talk about how to practically and correctly use neumorphism in your UI designs, but let’s get some background info out of the way first.

Neumorphism, or “new skeuomorphism,” has been around for a minute in the design world but it’s easy to see why people still make use of it. This design trend, characterized by its soft, extruded plastic look, offers a fresh take on user interface or UI design. It’s a style that’s both familiar and new, combining the tactile and comforting elements of skeuomorphism with modern, minimalist aesthetics.

What is Neumorphism?

Neumorphism is a design trend that emerged around 2020 and quickly gained popularity in the UI design community. It’s a stylistic successor to skeuomorphism—a design approach that involves making items resemble their real-world counterparts. Remember the old iBooks UI with bookshelves? This?

That’s skeuomorphism.

Neumorphism takes this concept and gives it a modern twist. Instead of mimicking real-world materials like wood or glass, neumorphic designs appear as if they were made from the same material as the background, creating an effect of soft extrusion or indentation. 

Here’s a good example of neumorphism in action:

This effect is achieved by using precise shadows and highlights that give the illusion of 3D shapes emerging from the background. The result is a soft, padded look that seems both inset and extruded at the same time. As we said, it’s like the UI elements are made from the same material as the background, and they’re pushing out from (or into) the screen.

The Principles of Neumorphic Design

Creating a successful neumorphic design requires a careful balance of colors, shadows, and shapes. Here are some key principles to keep in mind:

1. Use of Shadows

Shadows are the backbone of neumorphism. They create the 3D effect that makes the elements look like they’re extruding from or sinking into the background. The trick is to use two shadows: one at the top and another at the bottom of the element.

The top shadow is usually a lighter version of the background color, while the bottom shadow is darker. This combination creates the illusion of depth and dimension.

2. Subtle Color Palette

Neumorphism favors a minimal and subtle color palette. The UI elements are usually the same color as the background, but with slightly different shades to create a soft contrast. The color palette is often muted and light, with lots of whites, off-whites, and light grays. However, you can also use darker colors for a different look and feel.

3. Simple and Geometric Shapes

Neumorphic design tends to favor simple and geometric shapes. Circles, rectangles, and squares are commonly used. These shapes work well with the soft shadows and highlights, contributing to the overall “soft” look of neumorphism UI.

4. Consistency

Consistency is key in neumorphic design. The light source should be consistent across all elements, and the same goes for the colors and shadows. This consistency helps to maintain the illusion that the elements are part of the same material as the background.

How to Create a Neumorphic Design

So, how do you achieve a neumorphic style design in your next project? Here’s a quick step-by-step guide to help you create your own neumorphic UI.

Step 1: Understand the Design

Get familiar with what neumorphism is (and what it’s not). Browse galleries of design examples to gain a better sense of what overall look you’d like to go for. 

For instance, you might go for something extremely subtle: 

Or you might opt for something more complex: 

Step 2: Choose the Right Color Palette

Next, you’ll need to select the right color palette. For the neumorphic effect, you’ll need three shades of the same color:

• A light color for the light shadow
• A mid-tone color for the main background and element color
• A dark color for the dark shadow

This color selection technique ensures consistency and alignment in your colors.

Step 3: Create Your Design Elements

Once you’ve chosen your color palette, it’s time to create your design elements. In neumorphic design, elements are often represented in different forms or by different techniques. The key is to create elements that give the impression of coming out of the background, rather than floating on the interface.

You can find numerous neumorphism UI elements to choose from Envato Elements. For instance, the Osvaro Neumorphism Design Mobile Template UI Kit is a good example of what’s available. You can easily see how the buttons have shadows and given the appearance of depth. 

The Purasa Responsive Mobile Template includes neumorphic elements as well: 

To achieve a similar look on your own, you’ll need to play with shadows and colors. Your background should not be completely white or completely black, as the shadows would not be clearly defined. Instead, choose a slightly tinted color.

Step 4: Implement Neumorphism in Your User Interface

Now that you have your design elements, it’s time to implement them in your user interface. This involves creating a neumorphic design for your interface elements, such as buttons, sliders, and cards.

Remember, the goal of neumorphism is to create a sense of depth and realism while still adhering to minimalism. So, keep your design clean and simple, and let the shadows and colors do the work.

Step 5: Consider Accessibility

While creating your neumorphic design, it’s important to consider accessibility. Because neumorphic design uses the same color for the button and the background, there’s no contrast ratio to consider. This can make it difficult for some users, particularly those with visual impairments, to distinguish between different elements.

To ensure your design is accessible, consider adding additional visual cues, such as icons or text, to your design elements. Also, consider using a higher contrast color for important elements, such as call-to-action buttons.

Neumorphism in Action: A Case Study to Learn From

Let’s take a look at a real-world application of neumorphism to better understand how this design trend can be effectively implemented.

Spotify

One of the most interesting case studies of neumorphism in action is the redesign of Spotify’s user interface. In this case study, the designer, Sangeeta Baishya, decided to experiment with neumorphism in dark mode. Spotify was chosen for this experiment due to its wide user base, its variety of widgets (cards, chips, lists, sliders, text fields), and its straightforward architecture.

The redesign maintained the original color palette, fonts, and structure of the app, but introduced neumorphic elements to the buttons and the Spotify logo. The logo was given a slightly lifted edge all around, creating a more defined edge while preserving the neumorphic charm. The buttons were designed in a way that they didn’t overwhelm the user but kept the neumorphic style intact.

Learn More About Top Design Trends

Hungry for more top design trend knowledge? We’ve got you covered. Check out some of these tutorials and roundups about various recent design trends to help you keep your finger on the pulse of the design world: 

Will You Use Neumorphism UI?

Neumorphism is a fascinating design trend that offers a fresh take on UI design. With its soft shadows, subtle colors, and minimalist aesthetic, it’s a style that can make your interface stand out.

However, like any design trend, it’s important to use it judiciously and always consider accessibility. With the right approach, neumorphism can be a powerful tool in your design toolkit. How will you make use of it?