What is Neumorphism?

Neumorphism is a portmanteau that combines the words new and skeuomorphism. The term was coined by Michal Malewicz late last year.

Neumorphism happens to be the most recent trend in the space of UI — it is a visual style that uses a combination of background colors, gradients, and shadow techniques to achieve a soft, almost 3D look. To understand this a little more, we need to dig into Skeuomorphism first.

Skeuomorphism

According to the Interaction Design Foundation (IDF):

Skeuomorphism is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them. A well-known example is the recycle bin icon used for discarding files. Skeuomorphism makes interface objects familiar to users by using concepts they recognize.

There are other great examples of skeuomorphic designs like JetAudio and Winamp (you’ll instantly recognize if you were alive in the 90s). Compared to other applications at the time, said audio players completely rocked skeuomorphism.

UI design eventually followed its natural course and perched on minimalism and flat design as we know them today. Everyone moved to the new design trend including the long-time Skeuomorpher – Apple. Over the years, Apple has transitioned from skeuomorphic to flat design, although, not completely. There’s still a certain degree of realism in their interfaces.

Windows on the other hand did a very good job of completely simplifying their UI. A good example would be Windows 10.

It’s safe to say the Google has been the king of modern design having heavyweights like Material under their belt.

How to Neumorph your UI

Creating a neumorphic element is actually quite easy.

Let’s say we have a blue background with an angled, tinted gradient and two buttons sitting on top of each other. Here’s a visual:

In our example, we’ll be using HTML and SASS so let’s start by creating two buttons.

HTML

<div class="neu-box">One</div>
<div class="neu-box">Two</div>

SCSS

// Mixin to center content
@mixin justifier($direction) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: ($direction);
}

body {
  @include justifier(column);
  background: linear-gradient(315deg, #5bc6ff, #4da7db);
  height: 100vh;
  font-size: 2.5rem;
  letter-spacing: 3px;
}

.neu-box {
  @include justifier(row);
  border-radius: 20px;
  background: linear-gradient(315deg, #5bc6ff, #4da7db);
  box-shadow: -30px -30px 60px #489dcf, 30px 30px 60px #62d5ff,
    -6px -6px 16px #489dcf, 6px 6px 16px #62d5ff;

  color: #37aceb;
  text-transform: uppercase;
  text-shadow: -1px -1px 2px #3598d1, 1px 1px 2px #5bc6ff;
  height: 150px;
  width: 300px;
  margin-bottom: 5rem;
}

Styling

First, we’ve given the background and buttons an angled linear-gradient. Then we’ve used the box-shadow property to give a shadow (of top left) and a glow (of bottom right).

That’s it!

The important thing to note here is the light source. There is only one light source that’s at the bottom right of the UI. You can set the light source to be at any corner of your display but don’t use more than one.

See this in action here.

So how do we approach Neumorphism?

Although there are claims that Neumorphism may be the next big UI change in 2020, we should approach with caution.

Imagine that your favorite application gets a UI overhaul overnight. All the while, your brain was trained to operate this application in a certain way — for example, you knew what all the buttons looked like, the cards, icons and what have you. With the overhaul, you’ll need to undergo some degree of retraining to learn the new UI regardless of how intuitive it now is.

Obviously, this is not a good thing. Therefore, the transition needs to be moderate, perhaps even slow.

However, there are certain UIs that could easily embrace the change, like the watch faces for smart watches. Your eyes are already conditioned and expect to see the realism in the UI.

The shift in trend is a process that involves a lot of research, transformation and adaptation. This will obviously require time.