fbpx

Every year some innovative brands disrupt the market with techniques and approaches that bend the limit of what is possible and what is a standard. They became trends when other major brands started adopting them, eventually reaching the big masses and small businesses. In this post you will find UI trends for 2023.

The list I present is my opinion on techniques that can last years. Some are more impactful than others, but they all have their place either because they change a standard or help the web become more immersive for the end user.

UI Trends for 2023

  1. Ambient modes
  2. Scrollytelling
  3. eCommerce with 3D visual elements
  4. Solo type hero sections
  5. Glassmorphism 2.0
  6. Generative AI
  7. Dark mode first
  8. Pre-trial Tours
  9. Floating navigation menus
  10. Auto-play micro-video

1. Ambient modes

Ambient design is adapting the ambient to the context of what is being presented. In the image below, we can see a video of Kobe Bryant, and behind the video, we can see a light colour that fades to black. The colour is a pale yellow. Youtube is dynamically and in real-time fetching the prominent color of the video and applies it to the background.

This effect is subtle but makes the ambient feel more immersive. If you you take this effect to the limit this is what you get, video example.

UI Trends for 20223: Kobe bryant inspirational video.
Kobe bryant inspirational video.

Example of how to apply the effect. In this example, I am using the same image to generate a blur effect behind it. This technique is called the diffuse shadow.

2. Scrollytelling

Storytelling on the internet evolved immensely. With the evolution of internet speed, web standards and compression algorithms, we can load more and more content on a single page. Below is an example of what you can do with more than 100mgbts on a single page. Leica leverages the use of video and animation to keep the user immersed in their product. As you can see by the example, the user only needs to scroll to see the whole experience.

This is Scrollytelling, and the benefits are that the user does not need to click anywhere to learn more, nothing is hidden from them, there is only one topic at a time on the screen, the browser will load the assets as the user scrolls, and the user does not need to think on their following action.

Everything is done for them. It is like a sales pitch. Usually, the user is trying to convince themselves to buy the product. Try it with the Leica M11.

Leica M11 scrollytelling landing page

3. eCommerce with 3D visual elements

Dues to three.js popularity, more and more, it has become the web standard for 3d. Thanks to it, browsers like Chrome, Edge, Brave and others need to become compatible. In the example below, we can see a wedding ring that can be customised. The experience uses a mix of pure HTML elements and a 3d engine to render the result. I have selected to be a UI trends for 2023 because the industry has more creatives building on these types of interactive experiences.

While the user can choose the options in the HTML part, the render update to apply the user selection. This is amazing because with HTML the analytics tools can track user behavior while the 3d engine can provide the most immersive experience, allowing the user to rotate and zoom as they like.

UI Trends for 20223: Oui 3d ring experience
Oui 3d ring experience

In the example bellow you can play with a chair. Try it in desktop and mobile to get a look and feel on how it behaves in each device:

4. Exploded type hero sections

Over the past years, minimal and type-only hero sections have become a trend. Unfortunately, it is not enough nowadays. To captivate the attention of a modern user, we need to use visual applying interactions and disruptive approaches. Otherwise, “our site will look just boring” — a comment by an intern.

The next phase for text-only hero sections is to add visual clues that highlight the message behind the text. The following example shows multiple elements that load when you open the page. Breaking the lines, miss aligns them on purpose and adding elements inline create a re-appealing hero section. You can test it yourself here.

UI Trends for 20223: Exploded type hero
Hero section with icons between the words.

5. Glassmorphism 2.0

Since the introduction of Microsoft Fluent Design System, the use of real world inspired effects became a treds, the biggest example was the use of glass inspired effects. Glass is composed of the following components: transparency, diffusion, diffraction and reflection.

When a designer understands each of these concepts they can apply them to the extreme (combine with the other multimedia elements like video or image) creativity has no limits. Check it for yourself, remember to come back to this post.

6. Generative AI

The truth is that we cannot avoid it. Ai is here to stay so we better embrace it. Generative AI is the technique of generating content that simply does not exist. There benefits are generating multiple options and saving a lot of time and money. I have no doubt the this is going to be the number one on the list of UI trends for 2023.

Generative AI can go multiple aways, you start with a source and expect an outcome, for instance you write a message and expect an image to be generated. Tools like notion and canvas are adding new tools to expedite the creation process. You can play with it here.

UI Trends for 20223: Generative AI
Promt: A basketball monster dunking the ball Pixar style
UI Trends for 20223: Generative image
Same Promt, another example: A basketball monster dunking the ball Pixar style
UI Trends for 20223: Image generated by AI
Same Promt, another example: A basketball monster dunking the ball Pixar style

7. Dark mode first

Software and platforms have adopted dark mode through the years, and with the user adopting more and more, it was expected that this trend would reach the web. First, it started with API documentation, then social media platforms. Now, more sites will adopt dark mode first to avoid building two versions.

The image below shows a list of winning sites from awwwards, and we can see the dark backgrounds on most of the thumbnails (I have checked the following examples and their sites reflect the thumbnail).

UI Trends for 20223: Awwwards dark mode sites
Awwwards dark mode sites

8. Pre-trial Tours

Testing SAAS platforms is something a lot of us do on a weekly or monthly basis either because we are searching to solve a new problem or we a looking for a better solution for our needs. Either way, when we are shopping for a new platform testing a few of them can be painful, that is because it will required to create an account on each platform and test them.

There is a new technique to present the user a “near real” demo before we create an account. Navattic is a platform that allows you to build does tours.

UI Trends for 20223: Example of Mixpanel platform in the website.
Example of Mixpanel platform in the website. (https://mixpanel.com/resources/tour/)

9. Floating navigation menus

Navigation menus tend to evolve every year. Some of the current most used techniques are mega menu, dropdown menu, off-site/sidebar menu (hamburger) and full-screen menu.

Floating menus always existed but the adoption has increased a lot this year. Above you can see Mixpanel example, the menu change color from white to black, bellow you have awwwards menu in the bottom of the window that changes context based on the scroll and section the user is in.

The novelty now is the fact that we can adapt the menu depending on the context.

UI Trends for 20223: Awwwards navigation menu

Awwwards navigation menu

10. Auto-play micro-videos

Last but not least in the UI trends for 2023 is Autoplay micro-videos. Video and animated gifs have always been used on the web. For years we relied on hosting solutions like youtube to stream the videos without buffering. Since 3g and 4g sites use small video format, it takes up to 10 seconds to load the video and autoplay it without sound. The idea here is that in a quick video, we can show the user something that an image can’t.

Please look at this DJI example; you will notice how the videos load and autoplay. Below, you can see a 6 seconds videos that show a drone flying through any environment.

DJI video flying from different environments

Share with your community

Facebook
Twitter
LinkedIn

Related articles

Book a Call

Choose any time slot that suits you.