Skeuomorphism / Neumorphism UI Trend is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them. A well-known example is the recycle bin icon used for discarding files. Skeuomorphism makes interface objects familiar to users by using concepts they recognize.
In the beginning, it seemed like a new aesthetic proposal. Original, but only in the design sense. But as the term became viral in specialized sites and communities, it also became a discussion about the neumorphism as a replacement of the flat design trend.
Some of the discussions involve terms like usability, accessibility, adaptability, even biomorphism.
And of course, skeuomorphism.
Let’s start with definitions: neumorphism is a form, new, but form. Skeuomorphism is not just a form, but a container, a vehicle.
The term skeuomorph is compounded from skeuos (σκεῦος), meaning “container or tool”, and morphḗ (μορφή), meaning “shape”—Wikipedia
On silent film, intertitles and interpreters
In the beginnings of cinema (silent film era), every projection was accompanied by music played live, and by an interpreter who explained the film to the public.
Yes, a person explained the silent film during the projection.
The theatrical part—the drama—was perfectly understood by the audience. But not the montage, the sequence of shots that build the plot.
The use of intertitle cards and interpreters were necessary to understand the plot for most of the audience.
Intertitle cards and interpreters were the interfaces between the movie and the audience.
An intertitle from Jonas Mekas’s Walden (from Wikipedia)
Of course, once the audience learned the language of cinema, the intertitles and interpreters were no longer necessary. The interface became implicit for the people.
In other words, once the audience understood the form, the container or the vehicle was no longer necessary.
Well, not for everyone. My daughters (from three to fourteen years old) understand very complicated movies of TV series that are difficult for my parents (from seventy to eighty years old).
When my eldest daughter explains to my mother an element of the plot hidden in a complex montage of a movie—obvious for the young, inconspicuous for the old one—, my daughter becomes an interface.
What is an interface, anyway?
Design is no longer a print to look at or a furnishing to use. Design is now about interactions and experiences.
That doesn’t mean that we can forget the communication factor of every design. Therefore, language.
Let’s remember a little of Semiotics.
The designer is the sender, the interface is the message, the user is the receiver. The message is coded, composed of ruled signs, a language.
Every interface is some kind of interpreter between a machine and a human, a software program (now called an app) and a user.
In the current apps, we call a button a button because of previous knowledge of what a button is in the physical world, no matter if it looks like a physical button or not.
You can say a digital button is a metaphor for the physical button. Or you can say it’s a metonymy. Anyway, there is a referent and there is a reference.
From an unidentified webcomic, according to The Verge
The interface is a message
When Marshall McLuhan introduced its famous phrase “the medium is the message”, it was considered just a way to call for attention. It was difficult to understand that the cinema itself was a message and not just the content of the movies.
Today, it should be clear that an interface is a medium, therefore, an interface is a message.
For me, the save icon on a button in an app is a metaphor or metonymy of a floppy disk. For my daughter, the icon means directly “save”. And a floppy disk is a physical representation of the “save” icon.
When a designer mimics an object to design another—called a derivative—retaining ornamental attributes in the new one that are no longer functional, the designer is using skeuomorphism: light bulbs were derivatives from candles, automobiles from horse carts, radio receivers from phonographs.
The skeuomorphism can be a resource that works as an interpreter, container or vehicle in the use of transitional objects or forms—although it can be a simple design style, of course.
You can experience and learn to use an app using your previous experience and knowledge using physical objects: volume dial, keyboard, switch button…
But once we learn to use the digital object, the skeuomorphism is no longer necessary. Once we get used to the form, we no longer need the container.
The first apps for the iPhone were very skeuomorphic. Then came the material design, with its minimalism and functionalism.
But the material design style was only possible because we, the users, learned to use digital interfaces without the need of physical references.
Well, not for everyone. Do you remember the language of films?
My daughters (especially the youngest) interact seamlessly with their apps and games on the smartphone or the tablet. Simpler apps are difficult if not impossible for my parents.
For my three-year-old daughter a flat design button is a button. For my father it is a colored rectangle with some text on it.
With a limited verbal vocabulary, my little daughter becomes an interface when she says “touch here, granddad!” pointing to a colored square ot a picture thumb.
(By the way, my dad’s response is “how does she know that?”.)
Conclusions
If you are making a movie for my parents, be gentle with the montage and camera movements, please. If you are designing an app for my parents, you have to use skeuomorphism. It’s not an aesthetic decision.
But if you are making a movie or designing an app for my daughters, you have more aesthetic freedom. Make complex montages, move the camera, use material design.
The use of skeuomorphism can be minimalistic or prodigal. There is no need to go baroque with skeuomorphism. In fact, I think that the real problem with skeuomorphism was not the mimic aspect of it, but the non-minimalistic and non-functional approach of its use in digital design.
The skeuomorphism in UI design will die someday in the future, like the need for intertitle cards and interpreters in the movies.
But not yet. There are personas in the design of user experiences and interfaces that still need a container, a vehicle, an interpreter, to understand the form.
Ok I admit it — it was fun to co-create a name for this “exciting new trend” but I never imagined it will go that far.
Many blogs and twitter posts are calling it the “next great thing for 2020” already. Let me pop that little bubble before it outgrows us all.
Shots with #neumorphism started showing up but most of the “light” ones look almost exactly the same…
Neumorphism is not versatile enough to be a popular design style. Especially in real, coded products.
Sure you can do it in Dark Mode and you can choose from a variety of a couple different off-white background colors. That gives us six possible styles but the differences between them are too small.
Currently the style is being overused to create anything from cards to buttons, often breaking the rules I tried to outline here. I know it looks nice as a pressed state but for many people it’s not visible enough as the change is too subtle.
And by many people I don’t only mean the ones having vision impairments but also people with lower quality screens / lower screen contrasts etc.
Buttons are probably the worst scenario to use those double shadows. Especially the pressed state. For many people there will absolutely be no difference between those states — like on the right side here.
Comparing the neumorphic buttons to either Skeuomorphic or flat ones that have any contrast is also a good example. Those shapes simply don’t work well as actual buttons and are TERRIBLE as Call To Action.
Cards and sliders are probably the best use-cases of this trend. But this is all given the structure of the card is done right. The hierarchies between images, icons and fonts need to be clear and the spacings well defined. The best way to test if a card works is by removing that neumorphic background.
If it works on it’s own (especially next to other cards) it’s good!
For it to work well you need to make sure that even blockframes of your objects with the background removed can be all identified as part of the same group. ⬜️ ⬜️ ⬜️
So in short — those cards will work if the interface can be just as good without them. Now that’s an awesome recommendation, is it? Especially when we take that Dieter Rams point about removing the “unnecessary” ?
If you want a pre-made Sketch / Figma files with those shapes to play around go to www.Neumorphism.com
Remember Pantone Color of the year 2019? Let me refresh your memory on that amazing “new design trend of 2019” as it was proclaimed in January.
While of course there were initial examples of that “living coral” most of them were not relevant anymore by early February 2019.
I think by the same time we will exhaust all possible neumorphic combinations and come back to what worked well before.
That doesn’t mean Neumorphism is dead in the water though.
It just means that on it’s own it won’t be able to carry an entire product to success. Sure — a couple initial products done this way can be successful, but this will get more tiresome than even material design.
However mixing parts of this style with parts of other styles will definitely be a trend in 2020 and beyond.
Making a product that is both beautiful and functional means not going over the top in any direction. Even the currently popular soft-colorful shadow only works well if it’s done on buttons and/or icons. Imagine applying it to the entire product — exactly!
Dark mode is going to be a thing whether we like it or not. But not necessarily the desaturated grey-blue dark mode we’re seeing everywhere.
Since the introduction of OLED screens it’s obvious that pure-black doesn’t use much energy (if at all). So if the goal of a dark mode is to save battery we should start seeing more minimal, functional interfaces that are primarily black. Not dark-grey.
Eye-strain can be another reason for dark modes and if that’s the case those soft dark-modes definitely look better.
Many apps will make a light and dark versions of their interfaces.
We definitely need a more diverse illustration landscape. Currently the most popular style with those slightly unproportional bodyparts and loose-lines is showing up everywhere. This gets boring quickly.
These all look good but way too similar.
However illustration is one of the best ways to stand out — but we need to experiment with it more not to fall into the trap of sameness.
3d on the other hand is a bit easier to make in a way that’s different. It’s also significantly harder to make, requiring more effort. That means that if that time was spent making a 3d render it’s likely to be better quality and on-brand.
Great example of an on-brand style is Pitch.com
Transitions and scene-builds will raise even more this year. One of the accellerants of it is the new, exciting JS libraries that allow for complex 2d and 3d transitions with relative ease.
??? Yes you can now code “cool stuff” much easier. Don’t overdo it!
We’re going to put that flat-design on surfaces and turn them around. Kind of like in that FEZ game 😉
In 2019 while building our cryptocurrency analytics platform I took the time to analyse the design of over 2000 crypto related websites (a long article on it is coming in the new year). That literally means I went to 2000 websites and gave each one a score based on quality, originality and consistency.
This is beautiful (if you’re the author reach out and I’ll tag you here). But at the same time seeing similar images EVERYWHERE can get very boring.
One thing that struck me the most is that almost 1/4 of them had some sort of isometric images on them. All done in different yet so familiar style that after a while I wasn’t sure they weren’t all from the same free library.
This trend can be done well, but if you plan to just replicate the popular ones in your designs — just don’t. Please. It’s been one of the most overused design things this year (right after colorful shadows).
This trend is just starting so it may not go outside a small niche. I jumped into digital-detox and using more minimal products this year and so did many people I know.
I ordered both. Using the Light Phone 2 now — quite refreshing.
Devices like the Mudita Pure or the Light Phone 2 deliver simple, black&white, super-minimal interfaces. If we consider the apps we use as tools that must serve a specific function, a minimal interface makes some sense. Of course not apps will work in that style (imagine a text-only Instagram ?)
On one of the conferences I attended (and lectured at) this year I’ve heard this quote:
Don’t learn UI. We will be using mostly voice recognition in the near future — talking to our devices.
While this seems futuristic and makes sense in some scenarios (while driving or exercising) there are two main problems that I think won’t push voice UI’s into a dominant position (yet).
There are huge concerns about privacy and “creepy” AI. Not long ago Alexa advised its user to kill themselves as it’s the best way to stop global warming and save the planet. While this may logically be true it’s definitely a clickbait-y headline that will make many people scratch their heads and say — yeah I don’t like those smart speakers listening to our every word and secretly building the next skynet.
In many cases it’s really weird to talk to your phone (especially in public). A few quick taps are more private and faster. So until we get those brain-computer interfaces talking to your phone to write a text message on a bus won’t be a thing.
The only right answer here can be — I don’t know. I may be wrong and we’ll be living in the extruded soft plastic future, or we may get extruding glass on phones and make it even more real.
Add all those trends on top of one another and see what happens 😉
But what’s likely to happen is that no one trend will dominate this year.
The best designs — as it has always been — will come from the right mix of all the trends with good typography. Because you can cast a different type of shadow on your card, but if the text on it looks all misplaced and weird, no amount of extruded plastic will make that design good.
