Neumorphism Audio Player

Design trends come and go..

..And some experience a rebirth at some point.

About 10 years ago we reached the climax of skeuomorph digital design. A design language that tried to simulate the look and feel of elements from the analogue world. Shadows and highlights tried to achieve a 3D-like experience while colours and structures tried to simulate raw materials. It was good. But very often those designs felt crowded and not clearly arranged.

Shortly after, flat- and material design became more and more popular. Both languages had a focus on very clear and minimalistic elements. And especially material design did a great job on using shadows only to define a natural feeling depth.

This simplicity unfortunately also led to a very boring looking web. Let's be honest. Each website looked very much the same and a lot of designers have wished back the creativity of skeuomorphism.

And here we are:

Neumorphism uses 3D-like elements from skeuomorphism in combination with the simplicity of flat- and material design

YTAudio

My first version of YTAudio used TailwindCSS because it was just super easy to create an ok-looking UI for my technical Proof of Concept.
After some time I wanted to try something more creative. First I replaced the native audio element with a custom audio player.

As a second step, I thought it would be great to try something crazy. I mean it's not a corporate-thing that needs to follow a strict guideline and it's totally fine if it stands out. Perfect use case for Neumorphism.

While I still think that TailwindCSS is a great framework, I've come to the conclusion that it does not exactly match my needs. So I dropped Tailwind and went back to my normal PostCSS stack with a strict BEM-convention (I think BEM works great with a component-based framework like React).

The tricky part was to generate the shadows so it gets this awesome 3D look. Therefore I created a set of PostCSS mixins that are using the defined custom properties to generate the different shapes (yes, thanks to custom properties it comes with a dark-mode).

:root {
  --c-nm-bkg: #dbdbdb;
  --c-nm-bkg-grad-start: #c5c5c5;
  --c-nm-bkg-grad-end: #eaeaea;
  --c-nm-shadow-light: #bababa;
  --c-nm-shadow-dark: #fcfcfc;

  @media (prefers-color-scheme: dark) {
    --c-nm-bkg: #2f2f2f;
    --c-nm-bkg-grad-start: #2a2a2a;
    --c-nm-bkg-grad-end: #323232;
    --c-nm-shadow-light: #282828;
    --c-nm-shadow-dark: #363636;
  }
}

@define-mixin shape-flat $size: 0.5em {
  border-radius: calc($size * 2);
  background: var(--c-nm-bkg);
  box-shadow: $size $size calc($size * 2) var(--c-nm-shadow-light),
    calc($size * -1) calc($size * -1) calc($size * 2) var(--c-nm-shadow-dark);
}

@define-mixin shape-concave $size: 0.5em {
  border-radius: calc($size * 2);
  background: linear-gradient(
    145deg,
    var(--c-nm-bkg-grad-start),
    var(--c-nm-bkg-grad-end)
  );
  box-shadow: $size $size calc($size * 2) var(--c-nm-shadow-light),
    calc($size * -1) calc($size * -1) calc($size * 2) var(--c-nm-shadow-dark);
}

@define-mixin shape-convex $size: 0.5em {
  border-radius: calc($size * 2);
  background: linear-gradient(
    145deg,
    var(--c-nm-bkg-grad-end),
    var(--c-nm-bkg-grad-start)
  );
  box-shadow: $size $size calc($size * 2) var(--c-nm-shadow-light),
    calc($size * -1) calc($size * -1) calc($size * 2) var(--c-nm-shadow-dark);
}

@define-mixin shape-pressed $size: 0.5em {
  border-radius: calc($size * 2);
  background: var(--c-nm-bkg);
  box-shadow: inset $size $size calc($size * 2) var(--c-nm-shadow-light),
    inset calc($size * -1) calc($size * -1) calc($size * 2)
      var(--c-nm-shadow-dark);
}

Repo: src/styles/mixins/shapes.css

This way I can just call the mixin whereever I need it:

.app {
  // {...}
  &__logo {
    // {...}
    @mixin shape-concave 0.2rem;
  }
}

Repo: src/App.css

Conclusion

Neumorphism brings a great new spin to the dusty UI landscape. But will it be the next design revolution? I don't think so.
Especially when it comes to colour contrast, considerable weaknesses become apparent. The shadow only works if lighter and darker gradients are added to the base colour. This limits the choice of the base colour to medium colour values.
Also while concepts like material design use shadows to highlight the relative distance between surfaces and thus improve the user experience, neumorphism feels more like a little UI-sugar. Not that it's a bad thing. But I wouldn't recommend it for things like business applications. But then again I'm only a developer. Not a designer. So what do I know ¯_(ツ)_/¯