We live in a dynamic time when trends come and go quickly to address the needs of the consumerist society. It is often the projects we undertake that push us to the limits of the styles we know, so we need to go beyond the “frames” and implement completely new designs, while taking latest trends into account. For that, we consider ourselves innovators who get to test and express opinion, recommendations or know-how. Now, at the beginning of 2020, we are excited to share that we have already experimented a newly-discovered style in the UI design – Soft UI, or the so-called Neumorphism.

In this article, we share the experiment we did implementing Neumorphism into two of our client projects, as well as its advantages and disadvantages, as compared to the other styles we use daily.

What is Neumorphism for UI?

The trend appeared in the beginning of this year when the talented designer Jason Kelley named one of his projects on Dribble – Neumorphism. Its design was so well-received and highly appraised that the project name quickly become one of the 2020 hot trends.

When talking about Neumorphism, though, we cannot skip mentioning another star from the Golden age of UI design, called Skeuomorphism. Founded by Apple, the style represents an imitation of real objects, shadows, shapes, shades, and details from the physical world. It was successfully and actively used for the design of the first iOS versions. It can still be seen in some software products but ultimately, we can consider that Skeuomorphism is a thing of the past.

The newly born style Neumorphism blends techniques from Skeuomorphism and flat design. Just like Skeoumorphism, it is a realism style which imitates real objects and creates a 3D representation of them in the digital environment. However, it utilizes a different technique, and we look at its application, advantages and disadvantages further down in this article.

Where can we apply Neumorphism?

As designers, we can sometimes be quite eccentric when experimenting with new styles and trends. This is extremely valid in the cases when we are creating design for consumer interfaces, whether it’s a mobile, desktop or web application. In such projects, we can quickly run out of options when using a certain style. This, however, can be also considered an opportunity for us to test new ones and see what we can achieve.

For example, two weeks ago, me and one of my colleagues took on a project that required for us all to learn as much as possible about the new trend and evaluate how we can make use of it. Frankly said the results are quite interesting and worth mentioning in detail. Keep on reading for the experiment we did, applying Neumorphism and the overall conclusions we came to.

The Neumorphism experiment

The task in front of us was pretty simple. We took two completely different but real projects which we have been working on for some time and have reached the limitations with the other styles, analogical to the cases I noted earlier. Those projects also allowed for some experimentation due to the specificity of the requirement we had from the clients. We applied the style and analyzed the challenges we encountered.

The projects were an air conditions control mobile app and an admin panel for the control of a small catalogue with products. For the purpose of this exercise, we have removed the branding and have left only the generic names of the products. We wanted to focus on the design transformation itself.

Project 1: Mobile App

We created two screens – a static and a changing one with the latter showing the change of temperature in a particular room. The first screen is a Dashboard that displays all rooms with installed air conditioner, and also the temperature which they are preset to maintain. On the second screen are the controls which can change the air conditioner’s settings in the chosen room.

The second display is quite simplified and displays just the most essential controls – temperature regulator, vent power, the direction of the air flow and a quick switch button for the tree main regimes – warm, cold and room temperature. The main controls are organized in such a way that they can be operated by the end-user with one hand, e.g. everything is concentrated in the lower part of the interface.

Even from a first glance we can already see how Neumorphism affects the design. It adds 3D feel for real buttons, which you can reach out and press. All of that is achieved by a visual representation with icons.

This is also the biggest advantage of Neumorphism – it is extremely suitable for interfaces with small buttons that mimic real-life objects. Why? Because it suggests that you use the empty (white) space between the separate elements as a basis for the design. As we saw in the example above, in order to make the element pop out or look like it is indented, we need to work with both shadow and light. And for it to look realistic, we need the buttons to cast a long shadow. In this way they will look like they have a certain “weight” and will look more real. Analogically this requires more space and consequently we cannot position a few elements close to each other.

Project 2: Admin panel

For the admin panel we once again focused mainly on the Dashboard of the system. It is the first and most important page of the whole system on which the user “lands” after he or she logs into the system. Thus, a big chunk of information had to be presented fast and in a user-friendly way. An identifying feature of the dashboards is that they usually use a graphic representation of the information.

Analogically to the mobile app, we also used Neumorphism to build the system interface. The first approach we tried was to apply it to the menu, buttons and some fields, such as the “search-box”.The easiest ones, as expected, were the pie charts and the graphics because they require more visual space in general.

The next step was to create navigation elements, buttons and call-to-actions. However, the most important for such systems appeared to be the content which was also the hardest for design implementation. This is also where we observed the biggest disadvantage of Neumorphism. The design, as mentioned above, required much empty space between the graphic elements. However, in such interfaces it is impossible to use it for such purposes due to their specificity. The main purpose of all CMS and ERP systems is the management of huge databases of information and quite literally every empty space can be used to expand the content. Usually, the controls, buttons and filters are structured in a way to allow maximum space for more content.

We do not have such luxury in here, though. As seen in the UI design, there are certain obstacles which we encountered:

• The navigation is too constricted in terms of space and does not allow for the addition of more elements. With such design, the optimal version will be for the navigation to only contain icons, but this will obstruct the recognition of the elements. This is especially valid for the cases where we might have specific elements.
• Buttons, such as “See more” and other call-to-actions look like they do not belong to the minimal space we have designated for them. At the same time, all those shadows, surrounding the small elements create a feeling for “weight” and overload the design.
• The content boxes do not meet the quality of aesthetics compared to everything else. In their essence they are too big and when changed with Neumorphism they look even more out of space as it additionally adds shadows to make them pop-up.

However, the biggest challenge itself.As a first observation – there is limited space where content can be structured and organized. It is worth noting that for the exercise purpose, we have removed a big part of the content. Thus, it can be concluded that if we needed to adapt more of it, we would have faced a serious challenge. And as a second observation – the content looks like it does not fit with the graphic elements and is not a part of the overall design concept.  

To sum up

Neumorphism is a style that’s worth exploring. It is sleek, detailed and it is truly interesting to create a design with. It is definitely a breath of fresh air from the flat design and all other styles and trends which we are using in our everyday job as designers. Unfortunately, it comes with some big challenges that should not be neglected:

• It takes more time for design as each single element needs to be created manually. Some elements, depending on the physical objects they mimic, need even more work.
• It requires more work for implementation from the front-end teams. Additionally, the chance it might not work on all platforms is big.
• It is not suitable for all types of apps and software. Apps with less controls can be adapted according to the style, but every other system which needs to process a big database cannot really be developed with the help of Neumorphism.
• It is not entirely suitable for branding and is difficult to be tailored to clients’ branding due to the specificity of the design. Thus, it is definitely not suitable for every client.

In the end, despite the big constraints, Neumorphism definitely has а potential. What I recommend is that, unless it is a personal project for which you would like to use a fresh and unique UI, you better strain away from Neumorphism. At least for the moment. Ultimately, the best way is to find for yourself – research the different styles, analyze your aims for the project you have started and then decide on a style which works well with your brand.

In case you want to know how to create designs using this style, we recommend checking out the  article by Yassine Janina for Medium.

Need advice on creating innovative UI for your project? Get in touch today.