Using Neumorphism in User Interface Design of a business site | F5 Studio’s a real case

By Roman Berezhnoi December 3, 2020 1.97K views

Using Neumorphism in User Interface Design of a business site | F5 Studio’s a real case

“Neumorphism” (soft UI) is the hottest digital design trend in 2020. Designers create shots to publish on their Dribbble and Behance profiles, write articles, argue on Internet forums. What about real projects? What does Neumorphism look like in UI design? What impact does this style have over the feel and usability of the interface? 

F5 Studio’s team of digital designers decided to use Neumorphism for the ecommerce site Laptopnuts. I think we got it, but first things first. 

Origins of Neumorphism

As is so often the case in modern digital design origins of Neumorphism was attributed to Dribbble of Ukraine-based UI/UX designer Alexander Plyuto He created and uploaded a shot on Dribbble in late 2019. This image immediately gained momentum, accumulating thousands of likes in just a few months. The Dribbble shot inspired many designers to make their version of it.

This is a typical example of using Neumorphism in UI design of elements
This is a typical example of Neumorphism style

What is Neumorphism, exactly, and is it the future of user interfaces? To answer that, we first need to understand the history behind it.

The etymology of the word is a portmanteau of “New” and “Skeuomorphism.” 

Skeuomorphism

Digital design began with Skeuomorphism. During the 1990s and early 2000s, significant advances were made in desktop UI design. These changes were driven by the increasing importance of computers and other interactive technologies, both at work and in the home. Skeuomorphism relied on real-world parallels to convey digital ideas to first-time computer users. Designers created three-dimensional, realistic-looking UI elements. As buttons behave in reality, skeuomorphic buttons would appear raised, and pressing them would sink them down. It was a necessity at the time to get people familiar with modern technologies.

Few years later, Skeuomorphism was a style that has become synonymous with early iOS interfaces; it’s an aesthetic that mimics the 3D world by relying on effects like bevels, shadows, and highlights. 

This is a shot of Iphone 4 screen with skeumorphic elements of UI design
This is the one of typical examples of Skeuomorphism

But rich design and Skeuomorphism led to cluttered screens without clear spatial relations between objects and without clear directions. Website UIs were often unclear by the majority of web users. Webpage performance also suffered – pages took longer to load graphics.

While all this was going on, Microsoft used Flat Design and changed the way we look at digital products when it gained mainstream popularity in 2013. The scope was that bringing things back down to the 2D would increase usability, as well as reduce design time. Also, Flat Design reduced the load time of apps and websites. Users were already familiar with the basics of how computers, websites and mobile phones worked.

That is examples of UI elements which was created within Flat design style
Flat design style

User experience has become essential to web design. This drove the conclusion that rich design and skeuomorphism were headed to the trash can, but not for long.

Material design

Mobile devices required the creation of a coherent, practical and accessible visual language. The aim was to design web and mobile experiences that are based on and take full advantage of tactile screens. It was the next step, known as Material Design.

Material Design is the birth child of Google that was announced on June 25, 2014, at the Google I/O conference.

This is a shot of Google My business page as a typical example of Material design style
Material Design

Google initially bestowed it the name of Quantum Paper, because the design principles attempt to translate the physical properties of paper to the screen using the z-axis. Unlike Flat Design, materials such as paper cast shadows, creating a sense of depth to UI elements. They can also change shape, so an user can manipulate it in many ways. This style uses bold colors and 2D iconography like Flat Design. In fact, Material Design aims to encapsulate the best of both worlds from Flat Design and Skeuomorphic design. Seems, Material Design stands at the end of almost 40 years of user interface development. But in May 2018, Google released a revised version to remedy a major problem – the original guidelines were restrictive, emphasizing function over style. It was a redesign of Material Design. 

Unfortunately, the new version of Material Design didn’t remedy problems of this style. Designs only valid for Android devices and heavily associated with Google with less room for branding. That is why Microsoft created Fluent Design.

This is a typical example of Fluent design style with icons which were created by Microsoft
Fluent design

But web designers wanted a style that would be more aesthetics without reference to any brand.

Well, Neumorphism was created.

Neumorphism

When everyone was moving away from the idea of Skeuomorphism, Alexander Plyuto designed an interface that showed how modern applications would look like if Skeuomorphism was still alive. 

To achieve its clean look, Neumorphism also tends to use light, pastel colors for the background and elements. The background and overlaying elements which usually have very similar, but slightly offset colors.

Shots of calculators help to compare Meumorphism with other design styles
Skeumorphism, Flat Design, Neumorphism

Let’s have a look at some of the characteristics of this Neumorphism.

What is Neumorphism? 

Neumorphism is a response to Flat design and Material 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.

Of course, 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. But you can see some differences.

Neumorphism focuses on getting rid of all flashy aspects of the interface, creating a soft visual that stays consistent throughout the entire product. It doesn’t focus on recreating reality in the digital world, like Skeuomorphism. 

Neumorphic UI elements look like they’re connected to the background, as if the elements are extruded from the background or inset into the background. They’ve been described by some as “soft UI” because of the way soft shadows are used to create the effect.

This is a button that was created in Neumorphism style
This is a typical example of UI element that was created in Neumorphism style

To achieve this effect a digital designer uses two shadows, one at negative values while the other at positive. A background needs at least a tiny bit of tint so both dark and “light” shadows will be visible. You can use any hue for the background but white and dark shadows have to be visible on it, if slightly. Neumorphism will very rarely use hard lines as borders for elements. In addition, Neumorphism will almost exclusively use rounded corners to keep a soft look, refraining from any harsh angles.

Let’s look at the difference between Material Design and Neumorphism:

  • In Material Design elements have a single or multiple dark shadows around them. In neumorphism a designer uses two shadows: one light and one dark.
  • In Material Design an element’s background color can be different than the background color of the parent element. In ‘soft UI’ design background colors must be very similar to the background color of the parent element.
  • In contrast to Material Design you must use UI elements with rounded edges.
  • In Material Design a designer uses borders to prevent elements that look like they are floating off the screen. Also, there are no hard rules on borders. But in neumorphism you can use borders to improve contrast and make the edges a bit sharper.

As you can see Neumorphism tries to create something completely new. But this trend was criticised by many UI and UX designers.

Cons and Pros of Neumorphism

Many designers point out main problems: coding, usability, and accessibility. 

Coding

In fact, coding isn’t a problem. There are a few ways to re-create the effect in CSS. Creating a neumorphic interface with CSS seems to apply a regular box-shadow property on any element.

Here’s the syntax:

This is an example of CSS code for Neumorphism element

Horizontal offset: A positive value offsets shadow to the right, while a negative value offsets it to the left.

Vertical offset: A positive value offsets shadow upwards, while a negative value offsets it downwards.

Blur Radius: The length of the shadow. The longer the length, the bigger and lighter the shadow becomes. There are no negative values.

Spread Radius: This is another length value, where larger values result in bigger, longer shadows.

Color: This defines the shadow’s color, just as we’d do for the CSS color property.

Inset: The default value (initial) results in a drop shadow. Using the inset value moves the shadow inside the frame of the element, resulting in an inner shadow.

It is possible to apply multiple shadows using comma-separated box-shadow values. Up to four values can be concatenated, one for each side of the box.

Individual offset, blur and opacity values can be adjusted to be higher or lower, depending on the size of an element and the intensity of the effect that you’re trying to achieve. For Neumorphism, it’s required to keep the shadows soft and low contrast. Seems easy? It might be less complicated if you use this https://neumorphism.io/ to create a Neumorphic UI with CSS. 

You can change elements of the special web app to create a neumorphic UI with CSS
This service will help you to code Neumorphic elements without headache

Usability

Many designers think that for all the great visuals it brings to the table, Neumorphism has a huge weak spot: usability.

Neumorphism is all about subtle changes in contrast and discreet UI components. The problem is that there is a very small margin of colors and contrast in which Neumorphism works. And nowhere is this issue felt more strongly, than in Neumorphic buttons.

The main purpose of many buttons, especially a primary call-to-action, is to stand out as much as possible, usually with a prominent background color in order to separate it from other UI elements on a web page. But the background color constraint in Neumorphism takes away this characteristic. 

One button was created in Neumorphism another in Material design style to compare usability
What do you think is best?

Buttons are a key UI component in any interface. They need to be very noticeable, and need to change button states as users interact with them. However, this simple characteristic of buttons in Neumorphism becomes problematic.

The one of ways to avoid this problem is to add color to other elements of the button: text, borders, and icons. In order to maintain the three-dimensional awareness of Neumorphism, we also need to demonstrate a depressed button; use the color system we just established to make these states clear.

Although the results look somewhat better, the regular button still provides a better UX, has much fewer constraints, is more flexible, is simpler to implement, and does a better job overall. So, there is another way you can keep classic buttons.

Accessibility

The problem with Neumorphism goes beyond the fact it doesn’t follow WCAG (Web Content Accessibility Guidelines).

How would neumorphism appear to visually impaired users? Crucial elements of the user interface disappear into the background, these elements becoming unusable. Unfortunately, users that need big contrasts to see the interface clearly aren’t the only ones who might suffer. Users with low-quality screens or with mobile devices will miss these small details that make the design. Even developers made mistakes because it was hard to see which elements are clickable!

What’s the solution?

Neumorphism shouldn’t be a dominant style on a page. Some UX designers think it could be paired with Material Design. My personal take is that Neumorphism is best used as an enhancement to another style to draw distinctions between various component styles. In fact it is difficult to create a balance between design styles, so it can be a challenging task for UI designers. 

Although there are yet to be more difficulties the Neumorphism brings that “new feel” to the user interface and makes it stand out. Designers have been coming up with new design ideas that expand on the concept of Neumorphism every day. That is why F5 Studio’s web designer decided to use the Neumorphism for the real web project. So, let me share our experience.

How F5 Studio’s web designer used Neumorphism for the real project

Let us present your web design for Laptopnuts site, where people can sell used gadgets.

I recommend you open the full presentation of the project to see Neumorphic elements.

A laptop screen with home page of an ecommerce site that sells used tech
See the full presentation of the project

The main goal of the project was helping people to identify the ecommerce site as the best place to sell or to buy used tech. That is why our lead designer decided to use a provocativedesign style that is known as NEUMORPHISM.

Honestly, Neumorphism looks pretty. Unusual elements of design have always been a part of good design. The key is knowing when and where to use it. 

Forms

Website design is an aesthetic movement, not only a UX movement. For that reason, we decided to use Neumorphism for forms on the Hero Section. 

Using Neumorphism in hero section of ecommerce site
Using Neumorphism for Hero section of an ecommerce site

It looks ‘fresh’ and attractive instead of boring fields of forms. Also our UI designer followed several rules to create forms. I recommend you to take into account these rules:

  • Make the purpose of web form clear. Include straightforward headers.
  • Provide clear instructions
  • Consider the appearance of your form
This is an example of using Neumorphism for forms
Using Neumorphism for forms

Our designer used Neumorphism consistently to design the shipping form. Consistency is important in web design. 

Using Neumorphism for contact form
Contact form

So, web forms on a site is a good element to use Neumorphism. In this way you can add aesthetic movements which will break the ice from the first seconds. You have to admit, people are tired of sites which look the same.

Also I recommend you to use neumorphic elements on the first screen or on the Hero Section. These elements would bring to the attention of visitors from the first second, to intrigue them and to promise something unusual.

Box elements

Here’s an example where neumorphic qualities are used on box elements.

It is a good example of card elements which was created with Neumorphism
Box elements

This information is important for visitors because it explains how the service does work. But, what could be more boring than some text content? I think it could be usual Material design cards.

As you can see, Neumorphism makes box elements more attractive. So, it improves the chances of text content to be read by visitors.

It’s important to notice that Neumorphic elements also take more space (inside padding and outside margin) due to the shadow and rounded corners. So, you need to use these elements on a big-sized section.

Buttons

The background color of the button matches the background color of what it’s on top of, so a UI designer loses the ability to make it stand out visually with a unique color. For that reason, its use ought to be restricted to the aesthetic aspects of an interface—elements that are “extra”—not crucial to understanding, meaning, or function.

On the other hand Neumorphism allows a UI designer to use aesthetic movements to highlight some additional content.

The example of using Neumorphisn for buttons
Buttons

Also our UI designer used it for management buttons. True, it looks great.

Another example of using Neumorphism for
Another example of using Neumorphism for buttons

You should pay attention that our UI designer used a color to increase the visual weight of buttons to make them stand out in both cases.

What about CTA (call-to-action) buttons?

Our UI designer used the common style for these buttons.

The combination of using Neumorphism and common CTA buttons
Using common design for CTA buttons

The answer is simple, the regular button still provides a better UX, has much fewer constraints, is more flexible, is simpler to implement, and does a better job overall. Also I do not recommend you use Neomorphism to elements that can have various states, like inputs, select elements, progress bars, and others. 

Well, it is possible to create the balance between pretty aesthetics and accessible user experiences. We tried to use Neumorphism for an ecommerce site and finally we got it out.

Do you want to get a try at these things? Now web designers can find Neumorphism UI kits for Figma and Adobe Xd. 

Conclusions

The origin of Neomorphism can be explained by the desire of digital designers to move away from Material Design and create a new design paradigm. Neomorphism is clearly an intermediate step and its use is limited due to accessibility.

Will our digital agency use Neomorphism for our next web project? 

There are some valid criticisms about the accessibility of a neumorphic design. On the other hand Neumorphism can be pretty nice when used as an accent instead of an entire framework. It makes website design unusual, creating a “wow effect”. Also it seems a good idea is using Neumorphism to create a custom landing page. The main problem is combining Neumorphism with another design style.

Anyway, Neumorphism is the aesthetically-pleasing style and it has already found its place in web design. It is a popular trend that many designers use. So, it will become “usual” and lose “a freshness”. I think it is possible to use Neumorphism again, it depends on some factors. Possibly, we will try a new style for the next project.

Comments ( 0 )

Leave a Reply

Your email address will not be published.

Contact us:

Thank you for your message. It has been sent.

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.