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 web designers decided to use Neumorphism for an ecommerce site (see the presentation of the project and visit the website). 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.

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.

Flat Design

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.

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.

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.

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.

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.

To achieve this effect a UI 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 for professional web developers. 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:

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.

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.

Buttons are a key UI component in any interface design. 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 lead designer decided to use the Neumorphism for the real web project. We have never done it, and you can see our works on web studio site and on Behance. So, let me share our experience.

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

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.

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

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

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.

Cards elements

Here’s an example where neumorphic qualities are used on 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.

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

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 and combined it with Neumorphic card elements.

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 we use Neomorphism for our next 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”. 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.

This article originally appeared on https://f5-studio.com/articles/