Neumorphic web design (also known as ‘neumorphic design’) has aesthetes like us drooling over our iPhone [insert whatever version were on here].

Let’s go with iPhone 30 for content shelf-life.

Neumorphism in UX Design
Neumorphism in UX
David Ofiare on Medium

DISCLAIMER

Feast your tired eyes on these visual treats with glee.

But remember, UX and UI design are about seamless functionality informed by the toil and graft of hard-earned UX research.

Adding complexity for designers and developers is expensive. The soft shades of neumorphic web design break fundamental UX laws around contrast and accessibility.

In the same way you don’t see Lamborghini Murcielagos lining ASDA car parks, we doubt you’ll see neumorphism become a mainstream staple of UI design.

Origins of Neumorphic Web Design

The origin story of neumorphic web design is something of a wild goose chase.

Some say UI design chap Michal Malewicz wrote this 2019 Medium article crediting the founding of neumorphic web design to another UI design chap by the name of Jason Kelley.

Medium

Others will tell you this is a crock of filthy lies, firmly attributing neumorphism to Dribble user Alex Plyuto.

Maybe hire your own private investigator and let us know?

Steve Jobs & the Death of Neu-Skeumorphism

Long before neumorphism slid so gracefully into today’s UI design scene, Steve Jobs had popularised skeumorphicdesign that predates apple to the Victorian era.

Skeumorphic UI design:

A style of design in which digital elements resembled real world objects that anyone could recognise.

Jobs had been convinced computer UI design should be so intuitively simple, even a complete novice could use one instinctively.

How dated do these icons look today?

Skreumorphic app icons

In the context of Apple’s popularisation of Skeuomorphism, it can loosely be thought of as ‘Apple old-style’.

Interestingly, the word can also be linked to the UI design buzzword ‘affordance’—affordances help people understand what actions an object ‘affords’.

For example, a chair affords the ability to be sat on, and it communicates this in its design. Unless you're sitting on something overtly abstract and exotic from, say, Ikea.

Anyway, I digress

You’re here for the 5 eye-popping examples of neumorphic web design.

1. Dark Theme Tesla App Sample UI (Gavrisov Dmitri)

Neumorphic Web Design Tesla Smart App
Source: Dribble

Exhibit A.

Whether you think the Cybertruck is a tech-bro’s wet dream or not, we challenge you not to salivate slightly at this themed sample UI of the Tesla Smart App by designer Gavrisov Dmitri.

He even managed to stay clear of the long arm of the Laws of UX too. Good for him.

2. Neumorphic Landing Page (Fredrik Aurdal)

Neumorphic Web Design Landing Page

As we mentioned, it’s fair to say neumorphic web design is for the most past talent-flexing and brand fanfare. Kind of like a beauty pageant of UI design.

If you ever work with us expect us to finger-wag and tut at invisible CTA button that blend in are a bit of a ‘no no’ in our book 🤦🏾

Fredrik Aurdal just about pulls them off here with border shading that lifts them off the page.

3. Stripe Landing Page (Alexander Plyuto)

As with the above example, this Stripe landing page design triggers us slightly with the dark ‘Start Now’ CTA. But we do dig the bright neumorphic design used to emphasise the actual Stripe product UI. Pretty slick overall.

4. Dark Neumorphic Web Design (Samson Vowles)

Dark Neumorphic Website Design by Samson Vowles

Ok, this is more like it.

Besides the car crash use of ‘synergise’ (what does that even mean!?), this lovely piece of neumorphic web design tickles us in all the right places. Mainly because we’re naturally drawn to the CTA button like a moth to a flame 🔥

That’s how it should be, isn’t it? Samson Vowles, we applaud you.

5. Traffic Police Ticketing App (Eka Prayoga)

It’s nice to know even traffic authorities are discovering the gentile joys of neumorphic web design.

Next time you’re issued a ticket for somehow breaking the non-existent speed limits on a German autobahn, take solace that it may have been issued with the Apple-like simplicity of this Traffic Police ticketing app UI. 🚔

Well, That’s All. Back to the Real World of Hard-Earned UX Insights 👋

That was fun, wasn’t it?

You’ll be forgiven for feeling somewhat let down by whatever comparatively dull view awaits you outside of any windows that happen to be in your vicinity.

If you’ve enjoyed this little detour through the sweet shop that is neumorphic web design, then share it far and wide—if only to bump up our Google Analytics vanity stats.

If this show reel of UX and UI design gems has whetted your appetite to elevate your own website user experience, then remember, it’s not about eye-popping niceties.

It all starts with the kind of grueling UX research that will steer your UX toward offering meaningful customer experiences that tick the boxes of your own specific prospects.

Here’s a guide to to Building High Converting Website User Experiences (that Actually Matter) to get you started.

Leave a Reply