A Neumorphic Music Player

I used this week’s design challenge to create a music player to teach myself about the neumorphism design trend.

A real-world analog to neumorphic design

We’ve all seen a cheap plastic remote like this. The face is a continuous sheet of plastic with raised bumps to indicate buttons. They’re satisfying to press and never get dirty. Perfect for durability and frequent use.

A recent design trend called neumorphism seeks to recreate this experience on a digital interface. While the satisfying tactile feel of the real thing is lost in translation, the visual appeal is captured pretty perfectly.

Disclaimer: a lot of people criticize neumorphism for lacking accessibility and I don’t have any argument against them. Neumorphism lacks contrast and since the tactile feel is lost, visual clues are all users have to rely on to know where the buttons are and whether or not they’re pressed. So while I think neumorphism won’t become very popular in real applications, it’s a great tool to better understand all sorts of applications of drop shadows.

Creating a Neumorphic Effect

Creating a neumorphic effect requires utilizing a combination of shadows to create a raised or depressed look.

Basic drop and inner shadows

Standard drop shadow (left), standard inner shadow (right)

Inner and drop shadows can have direction. Here is a drop shadow with a positive direction (left) and a negative direction (right).

The examples above use a simple black shadow, but you can use any color you like, and if you use a white or near-white, you can achieve a highlight or glowing effect.

Same as a standard drop shadow above, but with a white shadow instead of black.

Neumorphism uses a combination of white/black and inner/drop shadows to achieve the effect we’re looking for.

All the contrast comes from the shadows (this is why there’s an accessibility issue). The button and the button background are the same color — the shadows do all the heavy lifting.

A raised un-pushed button

Raised buttons utilize two drop shadows to achieve this effect. A white drop shadow with negative direction provides the highlight on the top left of the button, while a dark (actual black is usually too dark) drop shadow with positive direction provides the shadow on the bottom right of the button.

A depressed pushed button

Depressed buttons utilize two inner shadows to achieve this effect. A white inner shadow with negative direction provides the highlight on the bottom right of the button, while a dark drop shadow with positive direction provides the shadow on the top left of the button.

And that’s essentially it.

Using these two processes to create raised or depressed objects, we can create round buttons, rectangular buttons, progress bars, and whatever else we like with a neumorphic effect.

A Neumorphic music player.

I used these principles to create a neumorphic music player.

A clean and simple interface that’s fun and satisfying to use.

I was able to create these designs using the shadows I discussed above. I also added a slight stroke (.5 px) to my shapes to help make them pop a little more on the page, however, these strokes are certainly not enough to assuage accessibility concerns.