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!
The design world is a fast paced one and there are always new technologies out there but it's always good to know what tools others are using to help them or inspire their work. Our designer Becky shares her current top 5 tools that help or inspire her ✌️.
In our first blog post of this 4 part series we covered one of the original ‘isms’ with Skeuomorphism, and now we’re moving into more modern trends with a look at Interactive design. What is Interactive Design and how can it work for you?
What is Skeuomorphism and how it's developed?
This blog post is the first in a 4 part blog series in which I will cover design trends from the 80's Skeuomorphism to today's re-emerging Y2K designs. It's always interesting to see how and why some trends stay or don't. And perhaps why some trends drip on through all eras. We'll also look at some truly inspirational work which will hopefully inspire.
