Neumorphism \u2014 otherwise known as \u201cnew skeuomorphism\u201d or \u201csoft UI\u201d \u2014\u00a0 is a UI design trend that sits between skeuomorphism and flat design.\u00a0<\/b><\/p>\n
It uses subtle shadows, highlights, and gradients to create the illusion that certain elements are extruding from the background or sinking into it, all while maintaining an otherwise flat and minimalist aesthetic.\u00a0<\/span><\/p>\n Take this example of a food delivery app UI designed by \u00d6zt\u00fcrk Erda\u011f:<\/span><\/p>\n Neumorphic design for a food ordering app, created by <\/span><\/i>\u00d6zt\u00fcrk Erda\u011f<\/span><\/i><\/a>.\u00a0<\/span><\/i><\/p>\n The left arrow icons have a sunken or indented appearance, while the kebab menu icon (three vertical dots) appears to be popping out from the screen. That\u2019s the art of neumorphism in action!<\/span><\/p>\n Neumorphism stems from two major design trends: skeuomorphism and flat design. Let\u2019s take a quick trip down memory lane to consider the (rather recent) history of this popular design approach.<\/span><\/p>\n In the late 1990s and early 2000s, skeuomorphism was all the rage in digital design.<\/b> Technology companies (like Apple) wanted to create interfaces that felt as familiar as possible to consumers who were using certain products for the first time \u2014 like laptops and smartphones. With its focus on mimicking real-world objects in the digital realm, skeuomorphism was the preferred design choice.\u00a0<\/span><\/p>\n But, as consumers grew more comfortable with digital interfaces, skeuomorphism\u2019s overly detailed, hyperrealistic aesthetic started to feel a bit redundant \u2014 not to mention sub-optimal for smaller screens.\u00a0<\/span><\/p>\n In 2013, skeuomorphism gave way to a new design trend: flat design.<\/b> Flat design<\/span><\/a> is essentially the complete opposite of skeuomorphism. It uses flat, 2D elements, clean lines, and simple shapes \u2014 with a notable absence of shadows and gradients.\u00a0<\/span><\/p>\n Then, in 2019, neumorphism emerged as something of a middle ground.<\/b> Designers began to combine the simplicity of flat design with skeuomorphism\u2019s tactile, 3D effects \u2014 creating the soft, futuristic aesthetic that neumorphism is renowned for.<\/span><\/p>\n Neumorphism is all about creating soft, tactile designs that blend minimalist aesthetics with a sense of depth. There are five core principles of neumorphism that help to create this effect:\u00a0<\/span><\/p>\n While flat design is all about bright, high-contrast colours, neumorphism uses soft, muted colour palettes to create a cohesive visual style. UI elements are typically the same colour as the background, with slight variations in shade to create depth and structure.\u00a0<\/span><\/p>\n You might have a light grey button with darker grey shadows, for example, blending into a grey background.\u00a0<\/span><\/p>\n Shadows are the real star of the show in neumorphism, adding depth to give certain elements a 3D appearance. Dual shadows \u2014 one dark and one light \u2014 make components look like they\u2019re either raised (extruded) or sunken into the background.\u00a0<\/span><\/p>\n If you wanted to create a 3D-looking toggle switch that appears raised when \u201con\u201d, for example, you\u2019d add a light shadow at the top-left of the element and a dark shadow at the bottom-right.\u00a0<\/span><\/p>\n Similar to flat design, neumorphism uses simple geometric shapes such as rectangles, squares, and circles. This keeps the interface clean and modern \u2014 and makes it easy to add depth with shadows and highlights.\u00a0<\/span><\/p>\n A classic feature of neumorphism is background integration \u2014 that is, when UI components look like they\u2019re part of the background, either emerging from it or sinking into it.\u00a0<\/span><\/p>\n A common example would be a search bar that looks like it\u2019s been carved into the background, with its borders defined by soft shadows.\u00a0<\/span><\/p>\n Because the emphasis is on softness and subtlety, neumorphic designs are typically low-contrast. This can make it difficult to distinguish certain elements from the background \u2014 so, if it\u2019s not used carefully, neumorphism can impact usability and accessibility.\u00a0<\/span><\/p>\n Now we\u2019re familiar with what neumorphism is and its defining characteristics, let\u2019s consider some examples.<\/span><\/p>\n [GET CERTIFIED IN UI DESIGN]<\/p>\n Take our Professional Certificate in UI Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n As you explore the neumorphic design trend, you might notice that there aren\u2019t many real-world products or brands that fully embrace neumorphism. This is primarily due to concerns around usability and accessibility.\u00a0<\/span><\/p>\n Still, we can find some great examples in conceptual designs and experimental prototypes, often shared on platforms like Dribbble and Behance.\u00a0<\/span><\/p>\n With that, here are some examples of neumorphism applied to various concepts and product types.<\/span><\/p>\n Devanta Ebison via Dribbble<\/span><\/i><\/a><\/p>\n Igor Lutsenka via Behance<\/span><\/i><\/a><\/p>\n Gagandeep Singh via Behance<\/span><\/i><\/a><\/p>\n <\/p>\n For further examples and inspiration, search \u201cneumorphism\u201d on sites like Dribbble and Behance.<\/span><\/p>\n If you\u2019re thinking about embracing the neumorphism trend for your next UI design project, it\u2019s important to carefully weigh up whether or not this is the best approach.\u00a0<\/span><\/p>\n As we\u2019ve already mentioned, one of the biggest drawbacks of neumorphism is a lack of colour contrast, which can lead to usability and accessibility issues. As such, you must make sure that you\u2019re not compromising the <\/span>user experience<\/span><\/a> for aesthetic purposes.<\/span><\/p>\n Neumorphism makes most sense in contexts where style and aesthetics take priority. If you\u2019re designing, say, a website for a luxury cosmetics brand or the interface for a digital clock, there\u2019s less emphasis on functionality \u2014 in other words, there aren\u2019t so many interactions required between the user and the product. In that case, you\u2019d have more freedom to play around with neumorphism.<\/span><\/p>\n But, if you\u2019re designing products that require high functionality and a content-rich interface \u2014 like a healthcare or banking app \u2014 an entirely neumorphic design could significantly harm the user experience.\u00a0<\/span><\/p>\n When it comes to creating websites and apps that will be developed and eventually used by real people, the reality is that you\u2019ll always be prioritising functionality and accessibility over aesthetics. That\u2019s why we don\u2019t see many real-world products that fully embrace neumorphism.<\/span><\/p>\n But if you just want to come up with a fun concept for your <\/span>UI design portfolio<\/span><\/a> or simply flex your creative muscles and explore different styles and trends, you can have plenty of fun with neumorphism.<\/span><\/p>\n [GET CERTIFIED IN PRODUCT DESIGN (UX & UI)]<\/p>\n Enrol now in our Product Design Programme<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n Want to experiment with neumorphism in <\/span>UI design<\/span><\/a>? Here are some practical tips to help you get started.<\/span><\/p>\n When designing with neumorphism, you want to create a soft and subtle aesthetic where shadows and highlights can blend naturally into the background without harsh contrasts.\u00a0<\/span><\/p>\n To achieve this effect, you need a muted colour palette. Soft greys, pastel tones, and gentle whites are ideal \u2014 like this mobile data concept created by <\/span>Eddie Luong for Interactive Labs<\/span><\/a>.<\/span><\/p>\n Mobile data management concept by Eddie Luong for Interactive Labs, via Dribbble<\/span><\/i><\/a>.<\/span><\/i><\/p>\n Next, identify key elements within your interface that you want to apply the neumorphic style to. Focus on interactive components that the user is likely to engage with frequently \u2014 such as buttons, toggles, sliders, and cards.\u00a0<\/span><\/p>\n If you\u2019re designing a music player app, for example, you might apply neumorphic effects to the play\/pause button and the volume slider.\u00a0<\/span><\/p>\n Neumorphic music app concept created by Tasfia Rahman, via Behance<\/span><\/i><\/a>.<\/span><\/i><\/p>\n The trick to creating effective neumorphic designs is to simulate real-world lighting \u2014 in other words, to mimic how shadows would appear if your UI elements were real, physical objects.\u00a0<\/span><\/p>\n When applying shadows, maintain a consistent light source across the entire interface. You might imagine that your light source is coming from the top-left corner, for example, and then create all shadows and highlights with this light source in mind.<\/span><\/p>\n [GET CERTIFIED IN UI DESIGN]<\/p>\n Take our Professional Certificate in UI Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n Now it\u2019s time to apply shadows and highlights to your chosen UI components.\u00a0<\/span><\/p>\n This creates the characteristic depth that neumorphism is renowned for, and it typically involves applying two shadows to each element: one to simulate light hitting the element (this is the highlight) and another to create a shadow where the light doesn\u2019t reach.<\/span><\/p>\n If you want to create a raised effect, add a light shadow (highlight) to the top-left of the element, using a colour that\u2019s slightly lighter than the background colour. Then add a dark shadow to the bottom-right of the element, using a colour that\u2019s slightly darker than the background.<\/span><\/p>\n If you want to create an indented effect (where the element looks like it\u2019s pressed into the surface), place the light shadow on the bottom-right of the element, and the dark shadow on the top-left.\u00a0<\/span><\/p>\n To complete your neumorphic design, use rounded corners to create a soft, approachable aesthetic. Create rounded cards or buttons, for example, rather than sharp edges.\u00a0<\/span><\/p>\n Take inspiration from this neumorphic to-do list app concept, where soft, rounded edges ensure a smooth and tactile appearance throughout the interface:\u00a0<\/span><\/p>\n Neumorphism isn\u2019t suitable for every design project, and over-using it can present major issues for usability.\u00a0<\/span><\/p>\n To strike the right balance within your interface, err on the side of \u201cless is more.\u201d Apply neumorphic effects to just a few key components (such as buttons, toggles, or cards) while keeping the rest of the layout simple.\u00a0<\/span><\/p>\n You can also combine neumorphism with other design styles, like flat design, to enhance clarity and functionality while still maintaining a soft, tactile aesthetic overall.\u00a0<\/span><\/p>\n Of course, if you\u2019re designing purely for aesthetics and experimentation, go ahead and use neumorphism liberally. As with any design decision, it ultimately depends on the context, your target audience, and your main objective.\u00a0<\/span><\/p>\n Neumorphism truly shines in clean, minimalist layouts where subtly raised or sunken components can take centre stage. Avoid crowding your interface with too many elements or intricate detail. Instead, opt for simple, uncluttered layouts that use plenty of white space.\u00a0<\/span><\/p>\n This will not only help your neumorphic elements to stand out; it also keeps the interface intuitive and easy to navigate.\u00a0<\/span><\/p>\n There are very few cases where it\u2019s ok to sacrifice functionality and accessibility for aesthetics. If your designs are intended for real users, only incorporate neumorphism if you can do so without compromising usability and impacting the overall user experience.\u00a0<\/span><\/p>\n Ensure adequate contrast between elements, supplement neumorphic effects with accessible features (such as tooltips, text labels, and high-contrast outlines), and always test your designs with real people.<\/span><\/p>\n Neumorphism blends the clean minimalism of flat design with the depth of skeuomorphism to create a soft, tactile aesthetic. But, while this UI design trend is visually beautiful, it doesn\u2019t score well in terms of usability and accessibility \u2014 meaning you\u2019ll rarely find it in real-world products.<\/span><\/p>\n If you do want to leverage the neumorphism trend in your next UI design project, it\u2019s best to do so sparingly. Keep our practical tips and best practices in mind, and don\u2019t forget your ultimate goal: to create an intuitive, accessible, and functional experience for the end user.\u00a0<\/span><\/p>\n If you enjoyed this post and would like to learn more about UI design, continue with the following:<\/span><\/p>\n Looking for a more thorough UI design education? <\/b>The UX Design Institute\u2019s <\/span>Professional Certificate in UI Design<\/span><\/a> covers all the principles, tools, techniques, and skills you need to craft high-quality digital interfaces.\u00a0<\/span>In just 12 weeks, you\u2019ll learn how to create pixel-perfect products \u2014 and obtain a professional, industry-recognised qualification. Whether you\u2019re considering a career as a UI designer or simply want to level up your visual design know-how, you\u2019ll come away feeling confident in your skills and ready for your next project. Visit the <\/span>course page<\/span><\/a> to learn more.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":" Neumorphism combines elements of skeuomorphism and flat design for a soft, tactile aesthetic. Learn all about this popular UI design trend here.<\/p>\n","protected":false},"author":22,"featured_media":11572,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[279],"tags":[],"class_list":["post-11570","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-explained"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/11570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=11570"}],"version-history":[{"count":7,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/11570\/revisions"}],"predecessor-version":[{"id":11587,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/11570\/revisions\/11587"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/11572"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=11570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=11570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=11570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"screenshot](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-22-at-16.28.29.png\" "\\"\\"")
<\/p>\nWhere did neumorphism come from? A brief history<\/strong><\/h2>\n
The fundamental principles of neumorphism\u00a0<\/strong><\/h2>\n
1. Monochromatic or muted colour schemes<\/strong><\/h3>\n
2. Subtle shadows and highlights<\/strong><\/h3>\n
3. Simple geometric shapes\u00a0<\/strong><\/h3>\n
4. Background integration<\/strong><\/h3>\n
5. Low contrast\u00a0<\/strong><\/h3>\n
Examples of neumorphic design in action\u00a0<\/strong><\/h2>\n
Sleep cycle app by Devanta Ebison\u00a0<\/strong><\/h3>\n
![\"screenshot](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-22-at-16.34.56.png\" "\\"\\"")
<\/p>\nSmartHome app concept by Igor Lutsenko<\/strong><\/h3>\n
![\"screenshot](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-22-at-16.36.50.png\" "\\"\\"")
<\/p>\nDigital clock by Gagandeep Singh<\/strong> <\/span><\/h3>\n
![\"screenshot](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-22-at-16.38.34.png\" "\\"\\"")
<\/h3>\nWhen should you use neumorphism in your UI designs?<\/strong><\/h2>\n
How to use neumorphism in UI design: 5 practical tips<\/strong><\/h2>\n
1. Start with a muted or monochromatic colour palette<\/strong><\/h3>\n
![\"screenshot](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-22-at-17.05.59.png\" "\\"\\"")
<\/p>\n2. Decide which elements you want to emphasise with neumorphic styling\u00a0<\/strong><\/h3>\n
![\"screenshot](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-22-at-17.08.03.png\" "\\"\\"")
<\/p>\n3. Use consistent light sources<\/strong><\/h3>\n
4. Layer subtle shadows and highlights<\/strong><\/h3>\n
5. Focus on rounded corners<\/strong><\/h3>\n
![\"screenshot](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-22-at-17.09.53.png\" "\\"\\"")
<\/p>\nDesigning with neumorphism? 3 golden rules for success\u00a0<\/strong><\/h2>\n
1. Use neumorphism sparingly<\/strong><\/h3>\n
2. Keep it simple<\/strong><\/h3>\n
3. Prioritise functionality and accessibility<\/strong><\/h3>\n
Key takeaways and further reading\u00a0<\/strong><\/h2>\n
\n