UI Design< 5 minute read

The New Trend in UI Design: An Overview of Neumorphism

Neumorphic design is a visual trend that has gained traction with UI/UX designers and become a popular aesthetic choice for contemporary software, websites, and mobile apps.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Neumorphic design is a visual trend that has gained traction with UI/UX designers and become a popular aesthetic choice for contemporary software, websites, and mobile apps.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Kayode Osinusi
Verified Expert in Design
10 Years of Experience

Kayode is a designer with extensive experience leading creative teams and helping startups build and launch successful digital products in industries such as e-commerce, finance, and entertainment.

Read More

Expertise

Previous Role

Lead Designer

PREVIOUSLY AT

InVision
Share

Neumorphic design is a visual trend that has gained traction with UI designers and become a popular aesthetic choice for contemporary software, websites, and mobile apps. Drawing on aspects of photorealism and 3D design, neumorphism brings simulated physical attributes—such as shadows and textures—to digital interfaces. To fully understand the impact of neumorphic design, let’s take a look at its origins.

The Origins of Neumorphic Design

When Apple released the Macintosh in 1984, it was the first personal computer with a graphical user interface. At the time, Apple co-founder Steve Jobs believed that familiar icons and symbols, such as a trash can or a folder, would help first-time computer users better understand how to navigate the Macintosh interface. Jobs left Apple in 1985, but upon his return in 1997, he steered the company’s UI aesthetic toward skeuomorphism, a style in which interface components mirror their real-world counterparts down to the last detail. By the time Mac OS X was launched in 2001, Apple had developed a full-fledged skeuomorphic system called Aqua—a water-themed design language with glistening icons, buttons, and drop-down menus.

With the introduction of the iPhone in 2007, Apple’s brand of skeuomorphism grew even more lifelike. By the early 2010s, skeuomorphic design was the de facto choice for digital interfaces. But as the world became more reliant on mobile devices, the limits of skeuomorphism became clear: Creating skeuomorphic design components is time intensive and requires a high degree of technical ability. And while skeuomorphic components look great on desktops and home screens, their finer details tend to disappear when scaled to small sizes.

Standing in stark contrast to skeuomorphism’s realistic gradients and textures, the mid-2010s saw widespread adoption of flat design, a digital-era reboot of 1960s minimalism. Flat design stripped interface components of everything but their most essential elements—line, shape, and color—making it a fast and highly flexible style that was well suited for large companies looking to systematize their design languages.

For a few years, skeuomorphism was anathema to designers, but from its ashes, a new trend rose to prominence. In late 2019, neumorphism (short for “new skeuomorphism”) arrived and appeared to offer the best of its predecessors. Striking a balance between hyperrealism and minimalism, neumorphism uses colors, textures, and shadows in a way that feels true to life without being overly detailed.

Neumorphism 101

Neumorphic design has three common characteristics: monochromatic color schemes, low contrast, and subtle shadows. UI designers are able to apply these traits to a wide range of design components that exhibit neumorphism’s soft aesthetic. Let’s look at a calculator app to see how neumorphic design works:

(Justinmind)

In skeuomorphic design, the calculator is rendered with gradients and highlights, and its color palette helps separate foreground from background. It’s meant to look and function like a calculator you might find lying around your office. A flat design version of the same calculator abandons skeumorphism’s representational rendering techniques and relies on shapes and blocks of color to distinguish its various sections.

Neumorphic design draws from both skeumorphism and flat design by pairing a monochromatic color palette with subtle shadows that make the calculator’s buttons appear tactile. The lowered contrast between foreground and background gives the calculator a soft finish, and the overall effect is a simplified realism.

Examples of Neumorphic Design

Now that you’re aware of its unique attributes, you’ll notice neumorphism everywhere. Indeed, UI designers in diverse industries such as automotive, entertainment, healthcare, and finance have been reimagining interface components with neumorphism’s signature look:

(Gavrisov Dmitri, Tesla Concept)

(Alexander Plyuto, Radio Player Concept)

(Vadim Demenko, Kettle App Concept)

(Filip Legierski, Bank App Concept)

The Pros and Cons of Neumorphic Design

All design trends have benefits and drawbacks. When used thoughtfully, trends have the ability to breathe new life into predictable design patterns, but difficulties arise when trends are forced into applications where they don’t serve users. Let’s explore the pros and cons of neumorphic design to better understand its utility.

Pros

Because neumorphism’s design is visually simple, it’s an ideal fit for digital products, which often consist of dozens, if not hundreds, of screens and design components. In digital product design, simplicity has several advantages: It makes it easier for designers to create aesthetically cohesive experiences—regardless of how many screens a product has. It accelerates the process of conceptualizing, building, testing, and iterating new screens. And it helps designers keep products visually consistent as they evolve.

In addition to its simplicity, neumorphism’s UI components appear more tactile and may help signify interactivity to users.

Cons

While neumorphism is a popular and widely used trend, it does come with accessibility concerns. If designers choose to use neumorphic elements that are strictly monochromatic, they could create problems for people with visual impairments such as color blindness. Additionally, neumorphism’s reliance on low contrast to achieve its soft look can hinder readability and make it difficult for users to identify buttons, icons, forms, and other important interface features.

Neumorphic Design Is Timeless

When implemented with users’ needs (and accessibility) in mind, neumorphism is a visually compelling UI design option for apps and websites. Its understated shadows and soft textures give UI components a warmth that invites interaction. In the design world, styles come and go, but neumorphism’s simplicity and tactile qualities make it well suited to stand the test of time.

Hire a Toptal expert on this topic.
Hire Now
Kayode Osinusi

Kayode Osinusi

Verified Expert in Design
10 Years of Experience

Lagos, Nigeria

Member since December 24, 2019

About the author

Kayode is a designer with extensive experience leading creative teams and helping startups build and launch successful digital products in industries such as e-commerce, finance, and entertainment.

Read More
authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Expertise

Previous Role

Lead Designer

PREVIOUSLY AT

InVision

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Join the Toptal® community.