The rise of motion design, parallax, immersion, contrasting UI styles, imitations and more
Hello everyone. Welcome to my newest UI Design Trends Guide — it’s fourth year I’m covering already, so it became kind of a personal tradition for me. As always the 2023 edition is prepared in a similar manner — with thoughtful consideration that took a few weeks of thorough observation and gathering the most noteworthy examples of the following trends.
Important note: 99% of the examples provided are real products ?!
Some trends stayed or evolved and clarified into something more specific. Some trends are (hopefully) gone for good. You will also find some old trends that are making a huge comeback in the industry.
Let’s start and have a good time reading ❤.
Motion Design
Upper left to right: Estee Lauder, Apple, Duolingo, Wishes In Words, The Virtual Economy ,Wickret
Motion design has become HUGE and you can probably see it everywhere. From micro-interactions to complex animations, UI is no longer a static thing — users expect it to visually “live and breathe.”
Because of Tiktok, Instagram and constant motion that the users consume on a daily basis, people’s attention span drops lower and lower. Some speculate we’re at a level of a goldfish right now, or even lower than that.
To keep users involved and curious, we need to use motion and try to put some life in static screens and images so they’re more immersive.
If you use Duolingo, you can clearly see that their recent update includes more animated illustrations and screen transition effects. Most of the UI components are one way or another interacting with the user through various visual effects. Something is happening on the screen almost all the time the user takes action.
In the newest update of Duolingo, the app interacts with you on almost every level.
While talking about motion, it’s impossible not to mention parallax effect.
Parallax is basically a set of different layers of graphics, that move at different speeds while scrolling. This creates a very enchanting, eye-pleasing effect as if the content had an actual depth while everything is placed in one dimension.
Parallax uses the simple foundation of moving the closest elements faster than the ones in the back. This is exactly how it happens in real-life, when you’re driving and looking out the car window at a far-out mountain range.
Midwam used GSAP library to create their website. See it live: Midwam
These animations may seem really stunning — of course most of them are done in code using libraries like GSAP. (It‘s even possible to explore the Meroe Pyramids in a browser). Yet, every animation needs to be designed first so it can be recreated by the developer. And here’s where the designers come in.
If you think about exploring motion design more — good for you. I strongly believe it will become an inevitable design skill to own in the very near future. It’s probably best to start learning it already ?
Clean Design
Upper left to right: Coinbase, Airbnb, Tran Mau Tri Tam, Squareblack, Foh&Boh, Revolut
Over the years my design style was evolving, and I was gradually heading into more simple, minimal and cleaner approach. It might be a natural way for every designer, but I’m glad that among all the trends that either stay or pass, a clean minimal design is something that you can never go wrong with — and the realization of this is both eye-opening and comforting.
Every time I’m surfing through different apps and websites, I find the clean and minimal ones the most pleasurable and professional looking. You don’t need to follow every single trend to create a great, modern digital product.
It’s good to be inspired with some of the trends — but as long as it’s still looking classy and keeps your designs future-proof. Since trends may
seem too overwhelming sometimes, it’s a true relief for any designer.
Apple website — the ultimate king of timeproof, minimal, clean UI design focused on products feature. The famous Apple “Masonry grid” is a trend now itself — you can spot it on many websites! See it live: Apple
Multicolor Soft Gradients
Left to right: Sketch, LS Graphics, Winamp, Cosmos, Until, Stripe
Aurora gradients, abstract gradient forms and shapes, gradients on buttons, cards, or colorful and vibrant splashes of colors used in backgrounds with a parallax effects — that trend seems to be still very actual and strong.
Beautiful example of aurora gradients use. See it live: Clyde
You can also spot gradients that are placed on text, for example in headings to accentuate a certain phrase.
Left to right: Apple, Vercel, Memorisely
High Contrast / Monochrome
From upper left: Uber, Endel, Revolut Business, Homey, Klarna, Dropbox
You can spot strong contrasting elements and sometimes even the whole sections on many websites and apps, including the biggest players in the industry.
I personally think that the reason behind this trend is similar to the one I’ve mentioned earlier in this post — the constant flashing of strongly contrasting elements/surfaces while you scroll through the interface can stimulate your focus.
It also makes the interface quite accessible thanks to the good visibility of the elements and text, unless you go too far with the contrast and cause eye-strain.
Dark futuristic/cosmic UI
Upper left to right: GitHub, Zenly, Railway, Linear, Notion AI, Create
Dark UI evolved into something bigger than just a “night/dark mode” option to choose. Actually, more and more brands are switching to the dark version of their products and pages.
I personally think that it may be easier to catch the user’s attention with dark UI, as it’s more unusual and intriguing than typical “content on the white background” look, and creates a futuristic or sometimes even “cosmic” vibe.
Linear’s website is a great example od dark UI. It’s also full of glassmorphic elements. See it live: Linear
Real-life materials imitation
Upper left to right: Solana, Letter, Thoughtlab, Youtube Music, Next.js, Mural
We already have glassmorphism, claymorphism, metal/chromemorphism etc. I’ve also noticed that elements with crystal or pearl-lookalike effect are becoming quite the thing. I think it’s reasonable to put it under one label — it just seems that the overall real-life materials imitation is a strong trend in the recent years, and it’s not coming to an end anytime soon.
(Remember when I wrote one year ago that the Skeumorphism is slowly making a comeback?)
Important observation to add here — glassmorphism seems to be on the rise. You can easily witness glassmorphic effects on many websites now, such as navigation bars, buttons or decorative elements.
Letter really likes their crystals. Also, notice the strong glassmorphic effect on the navigation bar. See it live: Letter
Gigantic typography
Upper left to right: Apple, Heart Aerospace, Stand With Ukraine, Increase, Gumroad, Instagram
A very visible, strong trend nowadays. Mostly used on websites due to the bigger screen resolutions, to achieve a minimal/brutalist/raw vibe. Often with fullscreen photos and noticeable animations.
Looks really stunning! Credit: Heart Aerospace
Sans-serif, geometric typography is not going anywhere and will always be a safe, functional choice for interfaces.
We have so many great font sources right now. From free sources like Google Fonts or Font Share — to many amazing, premium font families like Gilroy, Circular Std, Mont, Axiforma, Nexa, Galano.
I encourage you to consider investing in some of those professional families, to take your designs to the next level — it’s worth the money.
See my huge selection of notable fonts here.
Sentimental Design
Upper left to right: Harbor, Beautiful, Vacation, Franky’s, How We Feel, Express VPN
As I like to tidy things up on a daily basis — let’s put all the neubrutalist, vintage, retrowave, ‘80-’90s, magazine/poster-look alike trends into one box with the “sentimental design” label.
As much as they can serve great visual purpose depending on a product or service they trying to sell, they are often a triumph of form over function.
At the same time, it’s refreshing to see something original and completely distinctive from time to time.
One serious question — are they really a good fit for UI Design?
Example? Many brands that decided to switch to brutalist design have received very negative user feedback.
Figma and Gumroad being popular exceptions, but it’s a style that doesn’t fit every product. It just seems that mostly the design team that was responsible for the redesign was actually happy with the outcome. Sorry to say that — styles like brutalism are rarely functional and appealing for the users.
The most recent The Verge redesign is a prime example with nearly a 5.5 Milion views per month dropping off the site after the change. Chaotic layout and extreme contrasts were likely the main culprits here.
It would be safe to say, that when it comes to digital products, balance between functional and visual is the key.
PS. Wonder what would it look like to mix almost all of the trends I’ve mentioned in the article? I’ve got you covered.
Why focus on one trend when you can have them all? See it live: Cyd Stumpel