Neumorphism: Is This Controversial UI Trend Making a Comeback?
Posted on March 10, 2024 | Updated on March 10, 2024
The design world constantly shifts from three-dimensional to flat design — and experiments with everything in between. Neumorphism is one of the latest creations to come out of that shift. While some designers praise its visually appealing look, others hate it and point out its accessibility issues.
Neumorphic design is surprisingly controversial. Apparently, it hasn’t caught on despite being around for years. Before trying it out, you should ask yourself why. The answer could be the difference between unhappy and happy website visitors.
What Is Neumorphism and Why Should You Care?
Neumorphism — a shortened term for new skeuomorphism — blends three-dimensional and flat visuals to achieve something in between. It uses light and shadow to add depth to design elements, making them look either floating or indented.
Neumorphic design is reminiscent of layered paper cutting — an art style that layers paper cutouts to achieve a 3D effect — because its design elements have visible depth. To achieve this look, you angle light and shadow to create blurry borders instead of using outlines.
Why does any of this matter? For a time, neumorphism looked like it would become the next big thing. Designers wanted a departure from skeuomorphism — a realism-centered style — and flat design. This new semi-3D style was a seemingly perfect blend of them both.
However, neomorphism has yet to catch on. In fact, it ended up being relatively controversial. While some people absolutely loved it, others thought it was one of the ugliest approaches to user interface (UI) they had ever seen.
How Does Neumorphism Differ from Other Styles?
Neumorphism came about as an alternative to the then-popular flat design. Designers wanted something strikingly different, so they turned from two-dimensional design to 3D. To understand why it exists, you need to know the two UI styles it’s most similar to.
Neumorphic design relies on lighting angles to make design elements stand out. In an e-book app, the option to bookmark a page might look like a floating button with a flag icon. It differs visually from similar UI styles because it combines minimalism and 3D.
Skeuomorphic design came before neumorphic. It takes inspiration from real-world objects, making icons and design elements familiar and unique. An e-book app’s bookmark “button” might appear as a dog-eared page. Unlike neumorphism, it often looks realistically 3D.
Flat design doesn’t use gradients, shadows, highlights or depth. Instead, it uses bold colors to create contrast and guide users. An e-book app’s bookmark option might appear as a 2D ribbon icon. This UI style visually differs significantly from neumorphism.
Examples of Neumorphic Design
Neumorphism began trending in 2020. Even though it’s been years since then, it hasn’t caught on. As a result, concepts and drafts are easier to find than real-world examples. Designers post samples of neumorphism on Dribbble if you need help visualizing it.
A music streaming app could make the progress bar and play button appear to float while the song title remains flat. Alternatively, a calculator app would make every button look realistic and pressable while making the calculator’s “screen” indented.
In neumorphic design, the background and design elements almost always share the same colors. While most designers recommend making them contrast, rules are meant to be broken. Even though the above image technically shows two different blue hues, it is still a good example. The subtle shadows on this toggle switch give it depth while keeping it minimalistic.
Sometimes, neumorphic design elements look raised because the shadows surround their borders. Other times, they look indented because the shadows appear on the inside. Designers frequently use this UI style to their advantage to entice people into interaction.
Should You Use Neumorphism?
The hype around neumorphism might’ve quickly dissipated when it first got popular, but that doesn’t mean you shouldn’t use it, right? We’ll go over its pros and cons to help you decide.
Pros of Neumorphic UI Design
Neumorphic design looks sleek and visually appealing. Since it uses shadows rather than harsh lines, it gives websites and apps a soft, approachable look. If you’re trying to go for a modern look on your website or app, this UI style is a great choice.
Neumorphism is much more accessible than flat design. It gives design elements depth, so users have an easier time telling if they’re interactive or decorative. It’s more tempting to press floating toggle switches, checkboxes and sliders because they feel like actual buttons.
Cons of Neumorphic UI Design
It can be difficult to distinguish interactive design elements from the background on a bad or low-light display. Frankly, it’s not very accessible. Considering accessibility is a basic aspect of UI design, it doesn’t bode well that this style can be unreadable at times.
Additionally, it can visually overcomplicate your website or app’s layout. The wrong blend of raised and indented design elements is confusing and will leave users wondering whether they can interact with anything.
Is This UI Style Making a Comeback?
By the looks of things, neumorphic design isn’t coming back anytime soon. While it has its strengths, it isn’t visually appealing enough to loosen the grasp flat design has on designers. If anything, it seems skeuomorphism will make a comeback sooner than neumorphism will.
Would Neumorphism Be Good for Your Brand?
Neumorphism could be good for your brand if you use it correctly. While its accessibility is somewhat controversial, it is still more intuitive than flat design. Its realistic-looking design elements are eye-catching and can draw users’ attention to certain areas immediately.
Outside of purely technical reasons, you may not want to use neumorphism if your brand isn’t in a digital, health, electronics or machinery-related field. This design style screams modernity, which may be offputting for your website visitors if you’re in the nature, wellness, hospitality, industrial or fashion industry.
Whether you use neomorphic design is ultimately up to you. While it might be a visually appealing change from your current UI style, users may not like how it looks. It was fairly controversial when it debuted years ago, so there’s really no telling how your audience would react to the change.
Tips for Using Neumorphism Effectively
Neumorphic design can look fantastic as long as you know what you’re doing. Here are a few tips to help you leverage it effectively.
- Be Strategic
If you’re going to use neumorphism, use it sparingly. Only use it to highlight key design elements — nothing else needs to appear 3D. For example, music streaming applications often give the progress bar and play button depth while keeping the song title and time remaining flat.
- Increase Intensity
Light and shadow are the most important aspects of neomorphic design. Their intensity must be high and their blurriness must be low so people know where to click. Otherwise, the edges of your design elements will look undefined — a frustrating experience for users.
- Use Bold Colors
Sometimes, distinguishing neumorphic design elements from the background can be tricky. Bold, bright colors make shadows and subtle gradients more noticeable, helping users interact with your website or applications.
- Stay Consistent
One of the most important tips for using neumorphism effectively involves consistency. In other words, you shouldn’t blend it with skeuomorphic or flat design. Familiarity is key when designing for the user experience — inconsistency will muddle your intent and confuse people.
- Use Movement
If you’re concerned about a lack of accessibility, make your design elements responsive. For example, you can make a check box that goes from raised to indented when users press it. The familiar feeling of pressing a button lets them know for certain they’ve interacted with something.
Neumorphic Design: To Use or Not to Use
Neumorphism has its place in the world of UI — it’s visually appealing, modern and unique. However, it isn’t particularly accessible and can look confusing if not implemented properly. If you decide to test out this UI style, make sure to experiment with multiple design iterations so you have an easier time selecting one that works.
About The Author
Eleanor Hecks is the Editor-in-Chief of Designerly Magazine, an online publication dedicated to providing in-depth content from the design and marketing industries. When she's not designing or writing code, you can find her exploring the outdoors with her husband and dog in their RV, burning calories at a local Zumba class, or curled up with a good book with her cats Gem and Cali.
You can find more of Eleanor's work at www.eleanorhecks.com.
