5 ms·

The Rise and Fall of Neumorphism

43 points by makaimc 4y ago

mortenjorck 4y ago
"Neumorphism" came and went because it was a clumsily unnecessary neologism tacked onto a loosely-defined trend. Adding more shading and depth cues to user interfaces is a broader trend that has continued since the popular repudiation of those tools in the early-mid 2010s, but the attempt to package this up and shoehorn it into a neat label alongside "skeuomorphic" and "flat design" was never a particularly useful exercise. I wrote back in 2013 about how these prescriptive labels obscure the tools they represent: https://interuserface.net/2013/05/flat-is-not-the-opposite-of-skeuomorphic/ https://interuserface.net/2013/05/flat-is-not-the-opposite-o...
- sebastianconcpt 4y ago
  Oh god... you reminded me how much I miss skeuomorphism. Every time you open the app, you can enjoy that little piece of art. The artist rendering of the digital model of the object in question. Now all OS GUIs feels completely the same. As if there is a War on Aesthetics and art treated as an infection to get removed.
  - skohan 4y ago
    I understand why trends have moved away from skeuomorphism. It's inefficient to have image assets for every inch of the screen, and it adds more visual noise to parse for the user. Also it was easier to deliver these types of designs in high quality when there was exactly one screen size/aspect ratio to support. At the same time, I was making apps during the skeuomorphic period, and it was a lot of fun! We used to pour a lot of effort into the UI, creating simulated lighting effects, and I'm glad I got to be a part of that period of app design.
    - sprash 4y ago
      > It's inefficient to have image assets for every inch of the screen With modern GPUs pushing bitmaps is actually far more efficient than drawing shapes. > it adds more visual noise to parse for the user On the contrary. It gives better visual cues on where to find what you need. Also noise is actually good in some cases. I have a blue noise background for my terminals which tremendously helps with eyestrain.
      - skohan 4y ago
        > With modern GPUs pushing bitmaps is actually far more efficient than drawing shapes. No I mean it's inefficient from a product development standpoint. With a flat design, you can make a design system which will scale very easily to multiple screen sizes and aspect ratios. If you have to texture everything there is much more you have to account for. > I have a blue noise background for my terminals which tremendously helps with eyestrain. Yeah I mean blue noise is one thing, it's explicitly non-information, but I think in general trying to parse text on top of a pattern is harder than without.
        sebastianconcpt 4y ago
        The smart layouting of the frames is not a feature that has to be exclusive for flat. Is a layer of functionality to implement UIs, right? Flat kind of stops there but your GUI visual style is not forced to stop there. I might be cheaper to stop there. But not mandatory, rigth?
        skohan 4y ago
        Yeah sure it's always an option. I just think as mobile has gotten more complicated, the whole development pipeline gets wider. So in other words, having to support so many different targets means more work for designers, more work for developers and more work for QA. So to justify going above and beyond in an aspect which is going to increase the workload for all of those people, you had better have a really good reason.
    - sebastianconcpt 4y ago
      Art is not noise. It's the opposite. Art is a concrete rendering of a symbol with the opposite of noise: meaning. The compulsion to send a more artistic asset to the category of noise is the replication of the anti-aesthetics culture in GUIs current designs. As if it would not be alternatives, like appreciation of it in lighter forms, which, Neuomorphism feels like a reasonable attempt at that.
      - skohan 4y ago
        Most apps are just products which serve a function, not art. Like they used to put a lot of extra ornamentation on buildings during the baroque period, but eventually people mostly stopped doing it because the building functions just the same without it, and it's harder to add it.
        sebastianconcpt 4y ago
        Yes, we agree there is a cost motivator. All games are apps. All games are expressions of art. The price of removing all possibility of art in software, leads to an expression of some kind of software brutalism and UIs that only a niche of temperaments would be fine to work with (and feel from suckish to a torture for the rest). Have you noticed that we could be talkning about almost the same but factor out the subject of the discussion and make it music?
        skohan 4y ago
        Pretty far from you there. First of all, not all games are art. A lot of mobile games are effectively slot machines optimized to get you to keep pumping in quarters for a chance to feel rewarded. And music is quite different from most apps. The entire purpose of music is to convey a feeling, emotion, or energy level. The aesthetics are deeply intertwined with the intrinsic value music brings to the world. An app might only exist to give me directions to the nearest grocery store. The aesthetics are adjacent to function there.
    - mortenjorck 4y ago
      Somewhere there is a gag UI mockup I made at the peak of the Scott Forstall rich-Corinthian-leather period of what I imagined a future Safari UI might look like, in which the app's name was taken literally and given a Jeep-like makeover. That may have been a joke, but there is a certain playfulness that I think the industry is still trying to find again in the modernist period that came as a reaction to past excesses. Edit: Found the mockup: https://imgur.com/twSdV https://imgur.com/twSdV
      - jibbers 4y ago
        That is incredible! It just needs a rear view mirror with the last page you visited in it ;)
    - danhau 4y ago
      > and it adds more visual noise to parse for the user. I disagree. Skeumorphic UIs always were much easier to parse for me than flat design. Maybe I was just subjected to terrible implementations of it, but everything in flat design started to melt into itself after a while of staring at it. I had a hard time distinguishing between purely visual things and interactive widgets. I‘m speaking in past tense because things have improved. Current flat (inspired) design is easier for me than X years ago. Meanwhile with skeumorphism, I immediately groked what was what because things had correlations with items in real life. But I think the biggest helper was skeumorphic having naturally more visual depth, which helps me tremendously. But maybe that‘s just me. I also have a hard time watching Kurzgesagt videos (although they‘re also getting a bit easier for me). Their flat style is so hard on my eyes. Maybe I‘m just broken.
  - unsupp0rted 4y ago
    I don't want any art in my phone. My wallpaper and lock screen are both black for legiblility. I use my phone exclusively as a tool (a tool for communication, for social media, for learning, etc). It's aesthetically and functionally designed very well and that's all the art I need from it. I only want art when I want art.
- woojoo666 4y ago
  Fyi your article looks pretty bad on mobile. Starts zoomed in, body font is tiny, zero margins on the side, paragraph headings are too similar to body text, image captions are indistinguishable from body text. I usually don't comment about these things but in this case the article and website are specifically about UI/UX
1123581321 4y ago
Enjoyed reading the history. I would say that it wasn’t really a trend to begin with. A few designers made some popular conceptual pieces that led to more conceptual pieces. Apple didn’t meaningfully adopt it when they made a few sliders less flat, like in the new control center on macOS. Personally, I found the designs repulsive. That sounds like a hot take, but I actually found myself averting from the unnatural shadow diffusions and artificial heights in neumorphic concepts, the way some are repulsed by depictions of holes in solid surfaces or slightly distorted faces. I wouldn’t want to have had to interact with many of those elements daily.
- hnbad 4y ago
  I think the problem is that it's a style that looks great when you deal with a single screen with a few design elements but that becomes very difficult to maintain when dealing with an entire app or more complex interfaces. It's like trying to typeset a book in a font face intended for catchy slogans on a leaflet.
202206241203 4y ago
In 2000s "Neumorphism" would have been a name of one WinAmp skin. In 2020 I guess a single style warranted a whole trend.
- antiverse 4y ago
  This is a good take, actually. Especially in light of how so many corporations are using that strange design language with elongated/disproportioned bodies of people (I forget the name of it). Creativity in this domain is undervalued.
  - 202206241203 4y ago
    > ...strange design language with elongated/disproportioned bodies of people (I forget the name of it) It's a design language that doesn't get one into a PR trouble, I get why it exists.
  - _nhynes 4y ago
    > elongated/disproportioned bodies of people (I forget the name of it) https://en.wikipedia.org/wiki/Corporate_Memphis https://en.wikipedia.org/wiki/Corporate_Memphis
- dang 4y ago
  Sorry for offtopicness, but could you please stop creating accounts for every few comments you post? We ban accounts that do that. I don't want to ban you, because your comments (with this account) are good. This is in the site guidelines: https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html. You needn't use your real name, of course, but for HN to be a community, users need some identity for other users to relate to. Otherwise we may as well have no usernames and no community, and that would be a different kind of forum. https://hn.algolia.com/?sort=byDate&dateRange=all&type=comment&storyText=false&prefix&page=0&query=community%20identity%20by:dang https://hn.algolia.com/?sort=byDate&dateRange=all&type=comme...
  - neinnonyet 4y ago
sebastianconcpt 4y ago
I'm anxious to see flat go. It made everything look the same: cheap and without individuality. The opposite of diversity of ideas and the true spirit of creativity. And funny to see Neumorphism trend fading. Wonder if that actually will happen as I'm perfectly accepting of it. Neumorphism feels like the low-calories version of Skeuomorphism (which I feel is a big win over flat).
koboll 4y ago
A web design opinion that has increasingly solidified in my thinking is that box-shadow should never be relied on to distinguish an edge. Not only is it (obviously) less distinct than a border or an edge where color changes, it breaks outside the visual box model of the page due to spreading outside the element's grid placement, which makes everything look less distinctly part of a grid. box-shadow, when relied on to distinguish edges, is anathema to the human visual system in an unconsciously subtle way. It's fit for light touches that add onto an already clear and accessible design but never for relying on to achieve clarity or accessibility. We realized this during the flat design era but then proceeded to overshoot things pretty far until exterminating shadows became a hot trend. Now there's a backlash, of which 'neumorphism' is the apex, which swings things too far back in the other direction. Just keep shadows light and use them sparingly, it's not too hard.
johnsanders 4y ago
Did I miss something or was Neumorphism just that designers rediscovered inset shadows? We're just putting new names on a design cycle that's been going on for decades, maybe centuries. Things get more ornate until it's so over the top we wipe it all clean and start over.
dchuk 4y ago
It never rose. It was just silly design concepts on Dribbble, no real/popular apps actually adopted it. It's a terrible design system, it looks like you took a perfectly good interface, draped a table cloth over it, and pushed it upwards so you have this weird silhouette feature going on.
- rubito 4y ago
  It’s used in the Ford EV line: https://youtu.be/agpDIZmGRTw https://youtu.be/agpDIZmGRTw
  - dchuk 4y ago
    Ford isn't necessarily a paragon of usability
refulgentis 4y ago
Neumorphism really helped sharpen my thinking on a dynamic color theming system heading into Material You. Neumorphism had no grounding besides "what would trend on Dribbl that finally feels like a movement after years of iOS 7 aesthetic leading the way?" That isn't a design problem. "pure white background with overly dark blue", and neuomorphism was doubling on a very-not-skeuomorphic approach and attaching large shadows to it, simply because it created something "new" that felt "more realistic". No benefit to the user. No grounding in design principles. With Material You, sure, it's flat, but it's skeuomorphic in that _it works how color works in the real world_. (cf. Round Rects are Everywhere https://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt https://www.folklore.org/StoryView.py?story=Round_Rects_Are_..., and replace with "Pure White and Black are Nowhere) Source: I wrote this, and also this post is my opinion, I do not speak for Google or its design: https://material.io/blog/science-of-color-design https://material.io/blog/science-of-color-design
Scogle 4y ago
I feel like this article gets a few things dead wrong - mostly that this trend originated in 2020. Maybe the term came around then but this is what dribbble design has looked like since probably 2010 or 2011 (which is also around the same time the flat aesthetic came around, a decade after this article claimed).
excitom 4y ago
"The days of having entire websites rendered in neumorphism are behind us, but it will undoubtedly continue to have an influence. " Too bad. I personally think it's a huge improvement over flat design.

43 points by makaimc 4y ago

"Neumorphism" came and went because it was a clumsily unnecessary neologism tacked onto a loosely-defined trend. Adding more shading and depth cues to user interfaces is a broader trend that has continued since the popular repudiation of those tools in the early-mid 2010s, but the attempt to package this up and shoehorn it into a neat label alongside "skeuomorphic" and "flat design" was never a particularly useful exercise. I wrote back in 2013 about how these prescriptive labels obscure the tools they represent: https://interuserface.net/2013/05/flat-is-not-the-opposite-of-skeuomorphic/ https://interuserface.net/2013/05/flat-is-not-the-opposite-o...

sebastianconcpt 4y ago
Oh god... you reminded me how much I miss skeuomorphism. Every time you open the app, you can enjoy that little piece of art. The artist rendering of the digital model of the object in question. Now all OS GUIs feels completely the same. As if there is a War on Aesthetics and art treated as an infection to get removed.
- skohan 4y ago
  I understand why trends have moved away from skeuomorphism. It's inefficient to have image assets for every inch of the screen, and it adds more visual noise to parse for the user. Also it was easier to deliver these types of designs in high quality when there was exactly one screen size/aspect ratio to support. At the same time, I was making apps during the skeuomorphic period, and it was a lot of fun! We used to pour a lot of effort into the UI, creating simulated lighting effects, and I'm glad I got to be a part of that period of app design.
  - sprash 4y ago
    > It's inefficient to have image assets for every inch of the screen With modern GPUs pushing bitmaps is actually far more efficient than drawing shapes. > it adds more visual noise to parse for the user On the contrary. It gives better visual cues on where to find what you need. Also noise is actually good in some cases. I have a blue noise background for my terminals which tremendously helps with eyestrain.
    - skohan 4y ago
      > With modern GPUs pushing bitmaps is actually far more efficient than drawing shapes. No I mean it's inefficient from a product development standpoint. With a flat design, you can make a design system which will scale very easily to multiple screen sizes and aspect ratios. If you have to texture everything there is much more you have to account for. > I have a blue noise background for my terminals which tremendously helps with eyestrain. Yeah I mean blue noise is one thing, it's explicitly non-information, but I think in general trying to parse text on top of a pattern is harder than without.
      - sebastianconcpt 4y ago
        The smart layouting of the frames is not a feature that has to be exclusive for flat. Is a layer of functionality to implement UIs, right? Flat kind of stops there but your GUI visual style is not forced to stop there. I might be cheaper to stop there. But not mandatory, rigth?
        skohan 4y ago
        Yeah sure it's always an option. I just think as mobile has gotten more complicated, the whole development pipeline gets wider. So in other words, having to support so many different targets means more work for designers, more work for developers and more work for QA. So to justify going above and beyond in an aspect which is going to increase the workload for all of those people, you had better have a really good reason.
  - sebastianconcpt 4y ago
    Art is not noise. It's the opposite. Art is a concrete rendering of a symbol with the opposite of noise: meaning. The compulsion to send a more artistic asset to the category of noise is the replication of the anti-aesthetics culture in GUIs current designs. As if it would not be alternatives, like appreciation of it in lighter forms, which, Neuomorphism feels like a reasonable attempt at that.
    - skohan 4y ago
      Most apps are just products which serve a function, not art. Like they used to put a lot of extra ornamentation on buildings during the baroque period, but eventually people mostly stopped doing it because the building functions just the same without it, and it's harder to add it.
      - sebastianconcpt 4y ago
        Yes, we agree there is a cost motivator. All games are apps. All games are expressions of art. The price of removing all possibility of art in software, leads to an expression of some kind of software brutalism and UIs that only a niche of temperaments would be fine to work with (and feel from suckish to a torture for the rest). Have you noticed that we could be talkning about almost the same but factor out the subject of the discussion and make it music?
        skohan 4y ago
        Pretty far from you there. First of all, not all games are art. A lot of mobile games are effectively slot machines optimized to get you to keep pumping in quarters for a chance to feel rewarded. And music is quite different from most apps. The entire purpose of music is to convey a feeling, emotion, or energy level. The aesthetics are deeply intertwined with the intrinsic value music brings to the world. An app might only exist to give me directions to the nearest grocery store. The aesthetics are adjacent to function there.
  - mortenjorck 4y ago
    Somewhere there is a gag UI mockup I made at the peak of the Scott Forstall rich-Corinthian-leather period of what I imagined a future Safari UI might look like, in which the app's name was taken literally and given a Jeep-like makeover. That may have been a joke, but there is a certain playfulness that I think the industry is still trying to find again in the modernist period that came as a reaction to past excesses. Edit: Found the mockup: https://imgur.com/twSdV https://imgur.com/twSdV
    - jibbers 4y ago
      That is incredible! It just needs a rear view mirror with the last page you visited in it ;)
  - danhau 4y ago
    > and it adds more visual noise to parse for the user. I disagree. Skeumorphic UIs always were much easier to parse for me than flat design. Maybe I was just subjected to terrible implementations of it, but everything in flat design started to melt into itself after a while of staring at it. I had a hard time distinguishing between purely visual things and interactive widgets. I‘m speaking in past tense because things have improved. Current flat (inspired) design is easier for me than X years ago. Meanwhile with skeumorphism, I immediately groked what was what because things had correlations with items in real life. But I think the biggest helper was skeumorphic having naturally more visual depth, which helps me tremendously. But maybe that‘s just me. I also have a hard time watching Kurzgesagt videos (although they‘re also getting a bit easier for me). Their flat style is so hard on my eyes. Maybe I‘m just broken.
- unsupp0rted 4y ago
  I don't want any art in my phone. My wallpaper and lock screen are both black for legiblility. I use my phone exclusively as a tool (a tool for communication, for social media, for learning, etc). It's aesthetically and functionally designed very well and that's all the art I need from it. I only want art when I want art.
woojoo666 4y ago
Fyi your article looks pretty bad on mobile. Starts zoomed in, body font is tiny, zero margins on the side, paragraph headings are too similar to body text, image captions are indistinguishable from body text. I usually don't comment about these things but in this case the article and website are specifically about UI/UX

1123581321 4y ago

Enjoyed reading the history. I would say that it wasn’t really a trend to begin with. A few designers made some popular conceptual pieces that led to more conceptual pieces. Apple didn’t meaningfully adopt it when they made a few sliders less flat, like in the new control center on macOS. Personally, I found the designs repulsive. That sounds like a hot take, but I actually found myself averting from the unnatural shadow diffusions and artificial heights in neumorphic concepts, the way some are repulsed by depictions of holes in solid surfaces or slightly distorted faces. I wouldn’t want to have had to interact with many of those elements daily.

hnbad 4y ago
I think the problem is that it's a style that looks great when you deal with a single screen with a few design elements but that becomes very difficult to maintain when dealing with an entire app or more complex interfaces. It's like trying to typeset a book in a font face intended for catchy slogans on a leaflet.

202206241203 4y ago

In 2000s "Neumorphism" would have been a name of one WinAmp skin. In 2020 I guess a single style warranted a whole trend.

antiverse 4y ago
This is a good take, actually. Especially in light of how so many corporations are using that strange design language with elongated/disproportioned bodies of people (I forget the name of it). Creativity in this domain is undervalued.
- 202206241203 4y ago
  > ...strange design language with elongated/disproportioned bodies of people (I forget the name of it) It's a design language that doesn't get one into a PR trouble, I get why it exists.
- _nhynes 4y ago
  > elongated/disproportioned bodies of people (I forget the name of it) https://en.wikipedia.org/wiki/Corporate_Memphis https://en.wikipedia.org/wiki/Corporate_Memphis
dang 4y ago
Sorry for offtopicness, but could you please stop creating accounts for every few comments you post? We ban accounts that do that. I don't want to ban you, because your comments (with this account) are good. This is in the site guidelines: https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html. You needn't use your real name, of course, but for HN to be a community, users need some identity for other users to relate to. Otherwise we may as well have no usernames and no community, and that would be a different kind of forum. https://hn.algolia.com/?sort=byDate&dateRange=all&type=comment&storyText=false&prefix&page=0&query=community%20identity%20by:dang https://hn.algolia.com/?sort=byDate&dateRange=all&type=comme...
- neinnonyet 4y ago

sebastianconcpt 4y ago

I'm anxious to see flat go. It made everything look the same: cheap and without individuality. The opposite of diversity of ideas and the true spirit of creativity. And funny to see Neumorphism trend fading. Wonder if that actually will happen as I'm perfectly accepting of it. Neumorphism feels like the low-calories version of Skeuomorphism (which I feel is a big win over flat).

koboll 4y ago

A web design opinion that has increasingly solidified in my thinking is that box-shadow should never be relied on to distinguish an edge. Not only is it (obviously) less distinct than a border or an edge where color changes, it breaks outside the visual box model of the page due to spreading outside the element's grid placement, which makes everything look less distinctly part of a grid. box-shadow, when relied on to distinguish edges, is anathema to the human visual system in an unconsciously subtle way. It's fit for light touches that add onto an already clear and accessible design but never for relying on to achieve clarity or accessibility. We realized this during the flat design era but then proceeded to overshoot things pretty far until exterminating shadows became a hot trend. Now there's a backlash, of which 'neumorphism' is the apex, which swings things too far back in the other direction. Just keep shadows light and use them sparingly, it's not too hard.

johnsanders 4y ago

Did I miss something or was Neumorphism just that designers rediscovered inset shadows? We're just putting new names on a design cycle that's been going on for decades, maybe centuries. Things get more ornate until it's so over the top we wipe it all clean and start over.

dchuk 4y ago

It never rose. It was just silly design concepts on Dribbble, no real/popular apps actually adopted it. It's a terrible design system, it looks like you took a perfectly good interface, draped a table cloth over it, and pushed it upwards so you have this weird silhouette feature going on.

rubito 4y ago
It’s used in the Ford EV line: https://youtu.be/agpDIZmGRTw https://youtu.be/agpDIZmGRTw
- dchuk 4y ago
  Ford isn't necessarily a paragon of usability

refulgentis 4y ago

Neumorphism really helped sharpen my thinking on a dynamic color theming system heading into Material You. Neumorphism had no grounding besides "what would trend on Dribbl that finally feels like a movement after years of iOS 7 aesthetic leading the way?" That isn't a design problem. "pure white background with overly dark blue", and neuomorphism was doubling on a very-not-skeuomorphic approach and attaching large shadows to it, simply because it created something "new" that felt "more realistic". No benefit to the user. No grounding in design principles. With Material You, sure, it's flat, but it's skeuomorphic in that _it works how color works in the real world_. (cf. Round Rects are Everywhere https://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt https://www.folklore.org/StoryView.py?story=Round_Rects_Are_..., and replace with "Pure White and Black are Nowhere) Source: I wrote this, and also this post is my opinion, I do not speak for Google or its design: https://material.io/blog/science-of-color-design https://material.io/blog/science-of-color-design

Scogle 4y ago

I feel like this article gets a few things dead wrong - mostly that this trend originated in 2020. Maybe the term came around then but this is what dribbble design has looked like since probably 2010 or 2011 (which is also around the same time the flat aesthetic came around, a decade after this article claimed).

excitom 4y ago

"The days of having entire websites rendered in neumorphism are behind us, but it will undoubtedly continue to have an influence. " Too bad. I personally think it's a huge improvement over flat design.