UI design and especially its more artistic, visual side is constantly evolving. While most current products repeat the same, trusted and well-known IA patterns, UI and the Value Proposition are the biggest differentiators the product can have.
Nobody is going to try and redesign a registration process that works well in thousands of other apps — we’ll tweak it, for sure, and hopefully with some research, but in the end, it will just be a copy of what the users already know.
All the morphisms
Both Neumorphism and Glassmorphism were the response to the design trend pendulum swinging back from forced minimalism. The momentum here was just as big as when it was swinging the other way around — from Skeuomorphism all the way to functional minimalism of Material Design and Modern design trends.
I’d say it takes about 7 years for a design trend to start reversing (give or take). The wooden backgrounds and stitched leather of the first iPhone (2007) gave way to minimal designs of iOS 7 (2013), and 2020 started bringing the real world, organic inspirations right back.
With both the usage of the frosted glass aesthetic (both Microsoft and Apple), skeuomorphic icons (Mac OS Big Sur update) people have generally reacted positively to the change.
We wanted the products we use to be “crafted” and have a soul, instead of being a utilitarian white-label from a design system (like Material Design).
There’s nothing wrong with minimalism, even in its extremes, but it does make everything blend together into a mass of sameness. The design diversity has been diminishing long enough. The users want change. The Android examples above just look boring in the most utilitarian way. Some would argue that that’s ok, that boring is good. But our lives are not about just accomplishing tasks on some to-do lists. We want to be delighted.
The new, skeuomorphic drive of all of these new trends also comes from the craft culture having a revival. Instead of another minimal, uninspiring IKEA table, we crave uneven wood that has a texture and a life for our homes. Same goes for wallets, backpacks, clothing, and more. We want the things we use to be “hand-crafted” rather than mass-produced.
The main problem with interfaces, however, is that they can’t really get too “funky”, or they’ll stop being functional. So how can we marry function with a form that looks beautiful and “organic”?
You know, just like the Northern Lights, which I think is a fitting name for this background type.
If the interface itself (the buttons, the fields, the labels) can’t really change that much, it’s up to the backgrounds to differentiate. This is the basic principle behind all the “morphisms” and this new Aurora style.
Use the minimal design for everything that’s functional, and play around with ornamentation only. If done right, it also has the benefit of being accessible, because the actual interface — i.e. the things you use are accessible. So if someone can’t see some subtle background gradients, all they’d be missing is decoration.
This is also why I believe Neumorphism CAN be accessible if it’s just used for the cards and the cards have a proper hierarchy. Just don’t use it for text-fields, buttons and so on, and the contrast is going to be a non-issue.
Mixing “creative” backgrounds with minimal UI components is the best compromise between functionality and accessibility, but as with everything accessible it has to be done right.
Before we get to the backgrounds, it’s worth mentioning that this style works particularly well with Glassmorphism, and Apple knew it by creating a less blurred version of irregular color patterns as their main Big Sur wallpaper.
Apple and Microsoft are leading the way in exploring these new trends, but they’re not the only ones anymore.
How to start?
You can use your existing interface components with this style, as long as they have good enough contrasts, sizes and touch targets.
There are three main ways that you can use to create this effect.
The blurred shapes method is all about making irregular (preferably oval) shapes and then blurring them and mixing together to create an irregular gradient.
Multiple Gradient fills
This method is a mix of gradient fills (radial work best) with decreasing opacity towards the outer edge of the fill. Just drag the handles around to find the best mix. The more the transparent, outer-edge overlaps the more the colors will blend. You can also merge this method with the first one for something even more custom.
Just blur a photo
If you have a photo that already has a couple of soft color transitions, you can blur (with maximum blur value) the photo and have this organic effect with minimal effort.
I also made two videos on how to achieve this effect in Figma and Sketch. Here’s the first one:
Then simply pick your preferred overlay style (glassmorphism, standard transparency or opaque) and you have yourself a nice looking Aurora style UI.
Make sure the important interface elements are all accessible, and have your UI stand out from the crowd, at least until everyone else blurs their backgrounds and the pendulum will start swinging back again.
We should still have a couple of years (of experimentation) before that happens.