Claymorphism: Will it stick around?(smashingmagazine.com)
smashingmagazine.com
Claymorphism: Will it stick around?
https://www.smashingmagazine.com/2022/03/claymorphism-css-ui-design-trend/
113 comments
Hah exactly! This looks like my Quake clans site I made with notepad and Paint Shop Pro but with a better color palette and typography.
Yes, these all seem like variations on adding different shadows to controls vs flat style. Neat, but not some design manifesto.
i don’t think the case is that gradient buttons are lost knowledge
the problem is it’s not fashionable anymore
the problem is it’s not fashionable anymore
It's more like: It is lost knowledge that these kind of gradients look garish and went out of fashion when we figured out how to make more subtle gradients. This is basically "programmer art". I think the lost knowledge is also for example how to make the corners less harsh, and how to add a certain physicality to the buttons.
This seems like Corporate Memphis absorbing all facets of design.
I'm surprised to not find any mention of how infantilizing this is -- childish is absolutely inappropriate.
I have always not cared too much about aesthetics for any product where use is the primary factor -- especially since in most cases you can easily customize digital products -- but this trend is really putting me off to the point where I won't use products from companies pushing such designs.
To mention some of the most awfully repulsive, having to interact with Travis and MailChimp are always sure to trigger a physical disgust response, and checking Sentry, I was greeted by a similarly awful cartoonish homepage. I can't not think of "cynical company that will sell you to the highest bidder if they can wants to be your BFF, they'll even give you candy!".
To mention some of the most awfully repulsive, having to interact with Travis and MailChimp are always sure to trigger a physical disgust response, and checking Sentry, I was greeted by a similarly awful cartoonish homepage. I can't not think of "cynical company that will sell you to the highest bidder if they can wants to be your BFF, they'll even give you candy!".
Definitely not my favorite look, but at least the buttons look clickable. That’s an improvement over having to inspect source in order to distinguish clickable elements from plain text.
It does actually mention this, about halfway down:
One of the major points of criticism is that overusing Claymorphism and going overboard with colors and typography can give off a somewhat childish feel to the UI. Michał Malewicz acknowledged this drawback and gives a few suggestions on how to avoid that.
If foresee a trend in classical Russian literature inspired user interfaces as a reaction. The Dostoyevsky style, dark and deep.
One of the major points of criticism is that overusing Claymorphism and going overboard with colors and typography can give off a somewhat childish feel to the UI. Michał Malewicz acknowledged this drawback and gives a few suggestions on how to avoid that.
“The friendliness of those shapes, along with the 3d imagery creates a slightly child-like interface. To counter it, it’s good to use minimal typography, strong accent colors good contrast.”
— Michał Malewicz
If foresee a trend in classical Russian literature inspired user interfaces as a reaction. The Dostoyevsky style, dark and deep.
At least we seem to have gotten out of the childish period of "oopsie doopsy" style 500 pages. Although I guess we're also in the everything is an SPA period where a website will just break in opaque ways you won't even see an error page.
> This seems like Corporate Memphis absorbing all facets of design. I'm surprised to not find any mention of how infantilizing this is -- childish is absolutely inappropriate
That's just your impression, though. The Windows XP Luna look felt childish because it was dog slow on XP-era machines compared to the classic theme, so it ended up being pretty disrespectful of its users. But a smooth-shaded high-relief button is arguably the best equivalent to that "Classic" look on our modern, graphically-accelerated, variable-DPI environments. It avoids the overly-detailed skeuomorphic look while still being immediately intuitive.
That's just your impression, though. The Windows XP Luna look felt childish because it was dog slow on XP-era machines compared to the classic theme, so it ended up being pretty disrespectful of its users. But a smooth-shaded high-relief button is arguably the best equivalent to that "Classic" look on our modern, graphically-accelerated, variable-DPI environments. It avoids the overly-detailed skeuomorphic look while still being immediately intuitive.
To be fair the article does address the childish criticism: “ One of the major points of criticism is that overusing Claymorphism and going overboard with colors and typography can give off a somewhat childish feel to the UI.”
I'm pretty sure they are saying that any use is childish, not just overuse.
Fair point
I feel like life could use the levity right now
It's the far too many rounded corners that triggers the disgust for me.
[deleted]
I guess you didn’t like windows XP either!
We need much, much more childish things in life, not fewer.
I'm fine with my bank not acting childish. It doesn't invoke a feeling of trust, which is important with some of these companies.
I feel completely opposite, but I'm curious where you come from here? Could you say some words to explain what you mean?
Perhaps you mean childlike, not childish?
Could you define the two? Because as far as I can tell, most people (even ITT) just use "childish" to mean "things I don't like".
Thanks, I hate it.
But about the burger example: Would I buy a burger from the shop with the… extreme site? You bet. Would I buy a burger from the shop with the “modern” site? Less likely! If I had to guess why that is, then maybe it’s about the effort that went into designing the page. The first site may have shit UX, but it at least they went all out with the design. The second site may have better UX, but its design is a soulless husk. No quirks or anything, just 100% boring.
I often miss the old times. The frozen food delivery service I use also had a re-design recently. The catalogue now looks like generic magazine movie prop. At least the new website isn’t as terrible.
But about the burger example: Would I buy a burger from the shop with the… extreme site? You bet. Would I buy a burger from the shop with the “modern” site? Less likely! If I had to guess why that is, then maybe it’s about the effort that went into designing the page. The first site may have shit UX, but it at least they went all out with the design. The second site may have better UX, but its design is a soulless husk. No quirks or anything, just 100% boring.
I often miss the old times. The frozen food delivery service I use also had a re-design recently. The catalogue now looks like generic magazine movie prop. At least the new website isn’t as terrible.
This is a fairly common reaction, very similar to the debate surrounding Elden Ring's "outdated UI" to the uninspired, bland, extremely generic UI coming from "best practices". What is interesting is all the angry critics saying to people "you are not supposed to like that, it is bad and you should follow my theory".
It's a classic appeal to authority. Rather than accept that people actually like what they're playing, they fall back to what they've been told is correct by their design professors. I find it darkly humorous that the UX designer who made that first "Elden Ring got 97 on metacritic. My life is a lie" statement on twitter never really reflected on it.
I have also noticed that anyone who says they didn’t enjoy the game just gets ridiculed and told they just suck at playing games.
I tried elden ring for 3 hours and hardly worked out what I was meant to be doing. Basically no guidance, UI didn’t really explain anything, etc. Went back to playing Skyrim.
I tried elden ring for 3 hours and hardly worked out what I was meant to be doing. Basically no guidance, UI didn’t really explain anything, etc. Went back to playing Skyrim.
It's not for everyone, and honestly that's fine. Not sure why people are ridiculing others for not liking it.
Yeah I just found the game to almost be intentionally obtuse. For context, I had never played any of the previous games in the series and I think they are probably the "required reading" before this one because I found that the UI and intro stage offered pretty much no explanation on what to do or how the fighting mechanics worked. But then it seems most of the players praise it for being so vague and minimal..
I want to like it, but am about the same. Even after a walkthrough on youtube to a boss that I just don't have the skills to even come close to beating... not my thing.
Treat it like a puzzle game :) The game isn't hard but you've got to be willing to keep trying. If that's not your thing, that's completely fine - it's just that I felt the same way when I first started playing Demon Souls and when I went back after giving up it finally clicked for me.
Yeah it's almost a rhythm game when you get to the bosses, or even the hard normal enemies. The boss will do some prompt and you have to reply with the ~correct sequence of inputs in the correct timing. You have to learn what actions to do over time/deaths.
I find it quite fun, but yeah there's a bunch of people who will hate it.
I find it quite fun, but yeah there's a bunch of people who will hate it.
Sounds like modern architecture.
I want to agree with you on the fancy burger site point you made, though I know that I would try to load that site on mobile because I'd be trying to find a place to eat on the go and I would be very annoyed at it immediately.
Is this really a trend? I'm getting very strong neumorphism vibes from it: A contrived trend that never really worked, looked outdated from the start, and never got main stream.
The real vs Dribbble ratio of the examples in this post points in the same direction.
I do think the 3d graphics are a trend, which fair enough have often a sort of clayish aesthetic, but I am very skeptical that will become a popular all encompassing UI style.
The real vs Dribbble ratio of the examples in this post points in the same direction.
I do think the 3d graphics are a trend, which fair enough have often a sort of clayish aesthetic, but I am very skeptical that will become a popular all encompassing UI style.
Yeah, I can't think of a single real app or website I've seen that uses this style. It seems instead like a single designer doing some self-promotion by inventing these new "trends". And this one seems to be inspired by cheap DVD menu screens from the 2000s.
I thought it was over already. It's funny cause it was a fad in early 2000s when photoshop added procedural filters (shadows, inset, etc) so people used near the same ideas.
Done well enough, clay can make for some nice children like UIs but it seems limited.
Done well enough, clay can make for some nice children like UIs but it seems limited.
Bevel and emboss!!
I don’t believe neumorphism was ever supposed to be serious. From what I understood it is just something someone played with on dribble that became popular by accident.
I may be wrong here.
I may be wrong here.
"Flat design and its more popular successor, Material design, have been dominating the web UI for quite some time, featuring a minimalistic aesthetic that eliminates visual clutter and favors user experience."
Yeah. Unfortunately not everyone is masochistic enough to enjoy the Flat or Material design.
Yeah. Unfortunately not everyone is masochistic enough to enjoy the Flat or Material design.
Google's Material Design is such a hostile system.
"lets create action buttons well away from the action"
"modal dialogues _must_ take over as much area as possible, regardless of triviality"
For all the noise about research lead UX, it doesn't seem that people actually performed research on users, only other UX people.
"lets create action buttons well away from the action"
"modal dialogues _must_ take over as much area as possible, regardless of triviality"
For all the noise about research lead UX, it doesn't seem that people actually performed research on users, only other UX people.
The problem with UX is every single UX designer thinks they intuitively know what is best for users when studies show that to be completely false. So Google are right to listen to research instead. No UX design can please everyone.
You can't tell me that the major design features of Material design are based on user research. I've seen so many people completely confused by these, even the most basic aspects, like input fields.
They ended up doing a study for their text fields. The result was something anyone with a shred of common sense would've said and has said from the beginning https://medium.com/google-design/the-evolution-of-material-d...
That is a fair point. They may be using research now but I guess they didn't use proper UX principles when they started. I've noticed the Google Docs floating action button was semi-replaced with a regular 'new document' section at the top of the page.
same thing with the Floating Action Button, i think they are the worst
Google also has some of the worst UX I have ever used. The only good one and the last one was google search homepage.
This was a while ago (years), but for a time, in gmail, if you tried to add a contact the form had an "add contact" button at the bottom that submitted your form and added the contact, and another identical button to the top right that... reset the form without submitting it, because it meant "start a form to add a new contact". I watched my grandma struggle with it, which was fun. But hey, at least they can solve leetcode hard.
More recently, I can confirm that material UI, especially when Google does it, confuses the absolute shit out of my parents.
More recently, I can confirm that material UI, especially when Google does it, confuses the absolute shit out of my parents.
If only they did any research. The moment they actually do it, their fantasies are immediately invalidated: https://medium.com/google-design/the-evolution-of-material-d...
I'd love to see them repeat that, but comparing Material to native Windows forms circa 2000. Or even default browser-styled forms with no modification aside from making it match the general layout of the Material one.
“favors user experience” is such complete and utter BS, I cannot trust who writes stuff like that.
This is a lot of ink to spill for a small tweak to shading - and one that has been fairly common on and off over the years too.
This style was the go to tutorial when Photoshop first added bevel and emboss as a one-shot feature. And it was a common look even before that thanks to Kai's Power Tips: https://photoshopnews.com/2005/04/08/kais-power-tips/
Then we got sick of it and it went the same way as lens flare and animated gifs of dancing babies. A sign that someone was a noob and too unsophisticated to spot an overdone visual cliche.
This style was the go to tutorial when Photoshop first added bevel and emboss as a one-shot feature. And it was a common look even before that thanks to Kai's Power Tips: https://photoshopnews.com/2005/04/08/kais-power-tips/
Then we got sick of it and it went the same way as lens flare and animated gifs of dancing babies. A sign that someone was a noob and too unsophisticated to spot an overdone visual cliche.
> On Apple’s iPhone OS 1, the YouTube app icon is a television instead of the iconic logo we know today!
Because that logo didn't exist yet! YouTube didn't start using their modern logo until 2017 -- before then, they were using a wordmark logo which wouldn't have made for a good icon.
Because that logo didn't exist yet! YouTube didn't start using their modern logo until 2017 -- before then, they were using a wordmark logo which wouldn't have made for a good icon.
We need a total and complete shutdown of web designers until we can figure out what is going on.
It is quite straightforward, everything was going fine and then somebody invented the GUI.
I think they are having a contest to see who can do the least design.
But that sometimes gets too boring even for them, so they invent new crap to get around the ban on skeuomorphism.
I wish they would just go back to skeu as practiced in the 90s to 2000s, just updated for the modern high res. WinXP and Win7 were great. Win2000 was perfectly fine by period standards.
But that sometimes gets too boring even for them, so they invent new crap to get around the ban on skeuomorphism.
I wish they would just go back to skeu as practiced in the 90s to 2000s, just updated for the modern high res. WinXP and Win7 were great. Win2000 was perfectly fine by period standards.
[deleted]
Sweet, I can dust off my "script-fu" knowledge from 1999 and automate gimp to produce reverse-embossed buttons
So long as people move away from having buttons that you have to click to work out what state they are in (i'm looking at you, instagram you dick) I'll be happy. Even if its ugly as shit.
So long as people move away from having buttons that you have to click to work out what state they are in (i'm looking at you, instagram you dick) I'll be happy. Even if its ugly as shit.
Turns out what I've been calling "Pocoyo design"[0] is actually called "Claymorphism"...
[0] https://www.pocoyo.com/
[0] https://www.pocoyo.com/
Eesh, we've found a way to recreate default Powerpoint styles on web. Or is it The Sims 2?
A small but important detail that is always off to me in these views is the use of white and black to create shadow and highlight. Real color os much subtler than this and simply dropping pure white or black on top of the base color rarely creates a realistic or attractive mix. The yellow box example in the article is the best example of black shadowing at its worst. A more realistic (and attractive) shadow effect could be achieved by understanding how the material would actually reflect light differently - there would be richer, deeper oranges, not just "grey orange".
A small but important detail that is always off to me in these views is the use of white and black to create shadow and highlight. Real color os much subtler than this and simply dropping pure white or black on top of the base color rarely creates a realistic or attractive mix. The yellow box example in the article is the best example of black shadowing at its worst. A more realistic (and attractive) shadow effect could be achieved by understanding how the material would actually reflect light differently - there would be richer, deeper oranges, not just "grey orange".
Actually the iOS1 home screen is... Not as skeuomorphic as it could have been? The Telephone, Mail, and SMS icons are all highly stylized. Plus, all icons have that rounded square frame that makes absolute sense for a touch-based UI, but is not skeuomophic at all. Maybe there's a lesson here, like "don't overdo it"?
Also, this neumorphism/claymorphism thing gives off some strong Windows XP Luna [1] vibes, maybe it should have been mentioned somewhere.
[1] https://en.wikipedia.org/wiki/Windows_XP_visual_styles
Also, this neumorphism/claymorphism thing gives off some strong Windows XP Luna [1] vibes, maybe it should have been mentioned somewhere.
[1] https://en.wikipedia.org/wiki/Windows_XP_visual_styles
In my opinion the XP Zune theme was the best of the bunch. I used to use it by default on all my XP machines back in the day. If I could make Windows 10 look like XP I would in a heartbeat.
Yep, still missing classic theme. But Metro apps takeover made everything obsolete.
So my takeaway is that after nearly two decades slumbering, the ol' bevel and emboss filter is finally back. Let's bring back shiny buttons next!
https://tdarb.org/blog/aqua-ui-buttons.html
https://tdarb.org/blog/aqua-ui-buttons.html
That is so nostalgic. Aero Glass and Aqua fall in very special time in our lives when technology was rapidly improving and becoming widespread.
Material design, flat design, next_shitty_design and whatever else doesn't have clearly defined buttons with text labels suck usability wise. We've all know it, we all said it. But they are everywhere and I cannot explain away with just the usual "the crazy pretentious wannabe artists cabal has taken over". There must be more than that or it would have not be so successful in the market.
I personally think the superficial users - which are the majority - are to blame. They require things that look in accordance to the most recent fashion and are willing to sacrifice usability and efficiency to get it. You can see this everywhere, clothes, cars, homes. Fashionable design sells more than almost anything. So I think the designers have no choice but to produce what sells.
I personally think the superficial users - which are the majority - are to blame. They require things that look in accordance to the most recent fashion and are willing to sacrifice usability and efficiency to get it. You can see this everywhere, clothes, cars, homes. Fashionable design sells more than almost anything. So I think the designers have no choice but to produce what sells.
> Material design, flat design, next_shitty_design and whatever else doesn't have clearly defined buttons with text labels suck usability wise
90% of buttons in material and flat design have buttons with text labels, I really don't have a clue what you're talking about...
There are good use cases for buttons without text labels... As I type this in the single space of the browser window I see:
* Upvote arrows and minimize buttons in the HN UI
* Refresh, back, forward, home, share, star in the Chrome UI
* Close, minimize, maximize in the Mac window
The UI would be absolutely atrocious if many of these were "defined buttons with text labels". Also none of these use novel design systems or semantics.
90% of buttons in material and flat design have buttons with text labels, I really don't have a clue what you're talking about...
There are good use cases for buttons without text labels... As I type this in the single space of the browser window I see:
* Upvote arrows and minimize buttons in the HN UI
* Refresh, back, forward, home, share, star in the Chrome UI
* Close, minimize, maximize in the Mac window
The UI would be absolutely atrocious if many of these were "defined buttons with text labels". Also none of these use novel design systems or semantics.
The original "Claymorphic" video game from 1990: TROG in PLAYmation TM !
https://en.wikipedia.org/wiki/Trog_(video_game)
https://www.youtube.com/watch?v=wHPjU7TZ73A
Other Clay Animation Video Games:
https://en.wikipedia.org/wiki/Category:Clay_animation_video_...
Armikrog, BoomBots, ClayFighter, ClayFighter 2: Judgment Clay, ClayFighter 63⅓, Claymates, The Dream Machine, Harley's Humongous Adventure, Hylics, The Neverhood, Platypus, Skullmonkeys, Trog.
https://en.wikipedia.org/wiki/Trog_(video_game)
https://www.youtube.com/watch?v=wHPjU7TZ73A
Other Clay Animation Video Games:
https://en.wikipedia.org/wiki/Category:Clay_animation_video_...
Armikrog, BoomBots, ClayFighter, ClayFighter 2: Judgment Clay, ClayFighter 63⅓, Claymates, The Dream Machine, Harley's Humongous Adventure, Hylics, The Neverhood, Platypus, Skullmonkeys, Trog.
I don't like Claymorphism, but really appreciated this article in naming a bunch of visual design styles that I stumbled over before. Can anyone recommend a good "reference atlas" with a broader range of GUI design styles and techniques?
Check out CARI. It's not GUI-design specific, but they do categorize a number of industry design styles going back to the 1960s, some of which encompass GUIs.
https://cari.institute/aesthetics
https://cari.institute/aesthetics
Thanks!
> Realistic and elaborate UI elements weren’t a good fit for websites that thrived on simplicity, clean layout, and straightforward usability. Additionally, as responsive web design grew in popularity and mobile performance became a concern, the visually rich and detailed graphics were being slowly phased out.
This passage is laughable. Mobile performance is a "concern" only on the most abstract sense. In reality, mobile sites are filled to the brim with JS, trackers, and other bloat. I hardly think loading a few hundred KB of button graphics would make much of a difference.
This passage is laughable. Mobile performance is a "concern" only on the most abstract sense. In reality, mobile sites are filled to the brim with JS, trackers, and other bloat. I hardly think loading a few hundred KB of button graphics would make much of a difference.
Ctrl F "testing", "usability" "a/b" etc shows nothing. Why isn't there a discussion about what's best for users?
To be fair, most designers who engage in these things draw a blank when you Ctrl F "experimental design", "effect size" and "statistical significance", without which any pretenses toward science is just that. Pretenses.
Looks a hell of a lot like Windows XP.
One of my employees once remarked about Windows XP (when it was first introduced) as "Fisher-Price for Windows."
One of my employees once remarked about Windows XP (when it was first introduced) as "Fisher-Price for Windows."
Corporate Memphis is why David Icke’s lizard man theory feels plausible.
Windows XP is back?
All of these are just arbitrary, naieve design decisions that have been given names and substance posthumously. I don't feel that any of it is honest. Monkeys playing with infinite color choices because they can. There is nothing special or dignified in any of these "designs."
Claymorphism doesn't exist. It will go completeyly unnoticed by the average internet traveler unless specifically asked for their opinion upon which point you will be bored out of your mind with their reply. They will barely notice it and forget about it just as quickly. The product of some overemployed artists at a corporation.
Claymorphism doesn't exist. It will go completeyly unnoticed by the average internet traveler unless specifically asked for their opinion upon which point you will be bored out of your mind with their reply. They will barely notice it and forget about it just as quickly. The product of some overemployed artists at a corporation.
Until the next era of "super serious and not enough contrast" shows up.
and so on
and so on
I miss iOS 6.
Same. 7 was a huge step back. They've improved it somewhat since then, but it's still worse, and now there are like 100 new secret gestures that I'm always accidentally triggering.
Claymorphism feels a lot like web design from 2000's :) These shadows and bevel styles were the go-to tutorials for Photoshop. At the same time, I could never get them to look right. Lucky for me, I've discovered that MM_showHideLayers does something interesting and I went down the programming side of things instead :)
I use the rather excellent (IMHO) Axentix CSS framework, and it has a few (optional) *morphisms. Worth a try, they are quite different.
https://useaxentix.com/docs/getting-started/ and choose "Trends" in the menu.
https://useaxentix.com/docs/getting-started/ and choose "Trends" in the menu.
I don't care for claymorphism at all. It does not look professional or interesting to me. It reminds me of The Sims.
> It does not look professional or interesting to me.
But can the user make it through the UI with less clunks?
But can the user make it through the UI with less clunks?
Yep. Someone must have discovered the bevel and emboss function in Photoshop again.
One thing I wish would become a trend is mainframe inspired UIs that have terminal like look and feel but with modern conveniences of clicking and dragging etc. Focused on efficiency and maximum data on screen. Not playful at all.
This reminds me of nintendos styling although theirs has traditionally been glossy like the early web 2.0 designs used everywhere.
I dont like it as it seems too playful and wouldnt be appropriate everywhere.
I dont like it as it seems too playful and wouldnt be appropriate everywhere.
Good showcase of how far web (specifically CSS) has come. Back in the day we had to use images to achieve this kind of effect on websites. Otherwise it probably won't stick too long.
is there any company using Claymorphism today?
is there any UI framework that is based on Claymorphism?
all i've seen so far were bunch of designer-made concepts that never made it to real world
is there any UI framework that is based on Claymorphism?
all i've seen so far were bunch of designer-made concepts that never made it to real world
I wonder if there is a similar way to fix the accessibility issues of glassmorphism (same ones as described in the article with respect to neumorphism).
Woah woah woah. Before asking "will it last" let's ask "is anyone actually using it?" The answer seems to be false.
I think any article on design can have its entire HN comment thread written by bots. Not even GPT3, maybe GPT2.
For anyone who has been involved with web UI design and development since the 1990's this is a throwback.
This style reminds me of late 90s early 2000th website style with those very overly round corners.
Site is down. Claymorphism = "Oh no, Mr. Sluggo is going to be mean to me!"?
[deleted]
Can we please have Claymoremorphism?
Cal me old fashioned but this is the default bevel and emboss effect from photoshop 6.0
I think there is a lot of knowledge of how to make these effects that gets lost and rediscovered periodically. Both web designers and desktop theme designers had a lot of tricks. For example, you can make something look concave or convex with a subtle gradient (like in neumorphism). Or, you can make a button look more realistic with a 1px grey shadow around, grounding it to the background (like buildings in a RTS game might have. Or, you can use a gradient with a step in the middle to simulate glossyness and get an "aqua" style. It might be a fun and useful project to collect this kind of knowledge.