4

2023 visual design trends guide

 1 year ago
source link: https://uxdesign.cc/2023-visual-design-trends-guide-82e84f09cbdf
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

2023 visual design trends guide

The rise of motion design, parallax, immersion, contrasting UI styles, imitations and more

1*15F15PBxJLJGEx8hLDGZaw.png

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

Motion design examples mix

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.

Duolingo app screens

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 website short clip

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

Clean design examples mix

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 short clip

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

Multicolor soft gradients examples mix

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.

Clyde website short clip

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.

Gradient headings examples mix

Left to right: Apple, Vercel, Memorisely

High Contrast / Monochrome

High contrast / monochrome examples mix

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

Dark UI examples mix

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 website short clip

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

Real life forms and materials examples mix

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 website short clip

Letter really likes their crystals. Also, notice the strong glassmorphic effect on the navigation bar. See it live: Letter

Gigantic typography

Gigantic typography examples mix

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.

Heart aerospace website short clip

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

Sentimental vintage design examples mix

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.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK