Neumorphism- The hottest design trend in 2020.
One of the hottest design trends of 2020 is “Neumorphism” (soft UI). We can see a lot of designers with their version of Neumorphic User Interface(UI) on dribbble.
In this article, I will be discussing what Neumorphism is and how to get started on creating a basic Neumorphic element, and the limitations of this design trend.
To have a clear idea about what Neumorphism is, we first need to learn about Skeuomorphism and flat designs.
Skeuomorphism:
Skeuomorphism is a term used to define an interface that mimics real-world items. The most common examples are the recycle bin icon on the desktop screen and the dial icon on mobile phones. They both represent a real-life object, dustbin, and a landline phone that the users are already familiar with.
Skeuomorphism had a huge impact on the early days of computing. The use of Skeuomorphism made interfaces more familiar and intuitive to use.
It served as a bridge between the physical and the digital world. The buttons were purposefully made to look glossy and raised to mimic a real-life button. However, with the popularity of smartphones, people became very accustomed to the graphical user interface. Skeuomorphism served a little role as time progressed. The 3-dimensions looking elements started looking unnecessary and made the UI look cluttered. This led to the rise in Flat Design.
Flat Design:
Flat designs moved away from 3d elements of Skeuomorphism. The idea of Flat Design was inspired by Minimalism. The flat design avoids gradients, shadows, and textures and rather focuses on User Experience (UX) with the use of simple flat elements and flat solid colors.
Apart from its aesthetics, the main benefit of Flat Design is in its implementation. It is far easier to scale flat design elements and make it responsive over different screen sizes.
However, flat design is limiting at times and may make designs too minimal and less intuitive. Therefore, a new improved and evolved form of Flat Design, Material Design, was then introduced. It makes the use of animations, gravity, and has a sense of physics. The material design utilizes Skeuomorphism subtly. It utilizes shadows and z-index to give a sense of elements being on top of each other.
Learn more about Material Design
What is Neumorphism all about?
Neumorphism started with a vision of Alexander Plyuto. When everyone was moving away from the idea of Skeuomorphism, he designed an interface that showed how modern applications would look like if Skeuomorphism was still alive.
The dribbble shot by alexplyuto went viral and inspired many designers to make their version of it. The name came to life in the comment section of an article by UI designer Michal Malewicz.
Neumorphism marries the two concepts, skeuomorphism, and material design. It implements a minimalist approach while giving a sense of 3-dimensions in the form of buttons and other elements.
The following spectrum shows all the design concepts discussed so far in the basic form.
Let us dive into the basics of what makes Neumorphism different from Material Design.
Both the Material and the Neumorphic design make use of the concept of elements being on top of each other. However, there is a difference in how the two design approaches implement that idea. The image below demonstrates how the elements sit on top of each other in Neumorphic and Material Design.
Material elements float on the background surface which is achieved with the help of one shadow that gives an effect of floatation. The element and the background surface are seemingly separated.
As for neumorphic elements, they sit right on top of the background surface. They are usually a raised shape made from the very similar material as the background. The color of the element is either same or subtly different from the background surface.
Let’s now observe how I was able to create the effect.
I used two shadows, a negative and a positive drop-shadow on a slightly off-black background. This effect does not work on a completely black or white background since it uses dark as well as light shadows.
I used the same color for the background as well as the element. The only thing that defines its shape is its shadows. I used two drop shadows, one of the top left and one on the bottom right each of different color values. For my example, the light is coming from the top left corner. Hence, I used a light shade of gray for the shadow on the top left and a darker shade of gray for the shadow on the bottom right of the element.
Here’s a CSS code for using multiple box-shadow.
{box-shadow: 4px 4px 5px #191B1E, -4px -4px 5px #5F6772;}I utilized the same concept to multiple elements to create a layout for a Neumorphic calculator.
Here is the link to the file on Figma.
Limitation:
While neumorphic design looks aesthetically pleasing, it certainly has a lot of limitations. The subtle differences in the color value make it look minimal and aesthetically pleasing. However, having a low contrast ratio presents an accessibility issue. While it is possible to achieve different states of buttons such as active, pressed, and hovered with the use of different types of shadows, it might only be considering the users with clear eyesight. Moreover, it is complex to achieve a visual hierarchy by visually differentiating elements based on their levels of importance without compromising accessibility. Neumorphism might compromise UX for aesthetically pleasing UI if not done correctly.
With that being said, designers have been coming up with new design ideas that expand on the concept of Neumorphism every day. I am excited to see how this trend is going to evolve.
