What is Claymorphism and how can you create the look?
In this 4 part series, we have previously covered Skeuomorphism and Interactive design, and now we're going to look at another modern trend, another 'ism' Claymorphism. If you've not read this series's two previous blog posts, why not check them out? If not, here's a brief run-through of these trends and how we got here.
Like most digital designs, we develop what feels natural to us rapidly. Skeuomorphism made sense at the time as we navigated a world where we used laptops and phones more than ever. It relied on real-world aesthetics to create familiarity, most famously with a trash can representing 'delete'. I forgot that the iphone OS1 used a television icon instead of the youtube logo we all know now.
However, although it was a success on devices, it didn’t find its place on the web, where a more straightforward look and feel was required, and we moved on to flat design, which worked better across devices and at different resolutions.
Here’s a great example of how we adapted to flat design - notice the Instagram logo.
Skeuomorphic vs flat design
And then, by 2020, we adapted further into Neumorphism, which has a softer UI feel.
Neumorphism design
Whilst this aesthetic is visually pleasing; it did have its niggles. It looked clean; however, it also proved problematic for creating any hierarchy or sense of importance to areas without using brighter colours, and it's probably not surprising to hear it wasn't brilliant for accessibility. Not only that, it was hard to make one design to the next look unique. So whilst it's not used so much now, touches remain for use on buttons or cards, which work nicely.
And now we have Claymorphism! This trend certainly carries similarities to Neumorphism, but the significant difference is how the effect is applied, meaning designers could now use varying colours for backgrounds, which means far better accessible options and an opportunity to create different designs.
Designers have always tried to create an illusion of depth on a 2D object. As I wrote in my earlier post, ‘Interactive 3D’ 3D objects are becoming more popular and engaging for users, but how do we add that to elements like buttons, cards and icons? With Claymorphism silly.
Claymorphism is very friendly looking, soft, and cloud-like, I think. In a UI study performed by Michal Malewicz back in 2015, they tested the more fluffy 3D button against another more flat option, and it ‘annihilated’ the competition amongst the general public. However, the more tech-savvy didn’t like it. 🤷♀️
It’s essentially a mix of inner and outer shadows, using 2 for the internal and one shadow for the backdrop, which gives us more flexibility with colour. In addition, this gives us more flexibility to add it to any background colour, which wasn’t as easy with Neumorphism, which was predominantly only able to be placed on a white background. It also works very nicely with Glassmorphism, which still seems to be sticking around for a bit.
I can’t pinpoint what Claymorphism reminds me of, but I think it might be Super Mario. It makes me want to push and jump. It feels friendly and bouncy; ultimately, I want to interact with it, which is the whole point. Either way, it’s adding to the warmer, not-so-serious design era we find ourselves in. And I am very much here for it.
So much so that I based an in-house design using these techniques. Unfortunately, I can’t quite show that all off at the moment, but here is a preview and a link to a mini tutorial to achieve the Claymorphism effect I used.
I can’t say whether or not Claymorphism is here to stay, but it’s certainly having its moment. It works well with animation, and interactive design like creating hover and selection effects, so I think it will stick around for a while yet!
In this 3 part blog post, I will cover some designers that have inspired me or currently do so in my career. We’ll start with Jessica Walsh, whom I discovered early on in my career and who has continued to inspire me.
In the second part of this 3 part series, I will be looking at Dann Petty who is an inspirational web designer. Last time I covered Jessica Walsh so be sure to go back and check that out.
In the final part of this 3 part series, I will be looking at Aaron Draplin. This is probably the designer I have been following the longest and who has shaped how I design.
