Design, UI, UX, Insights

20 UI/UX Design Trends that will Rock 2023 [Updated]

Prepare for more diverse and experimental digital experiences

Ready to fasten your seatbelt and hop on the ride to the future of UI/UX design? With 2023 just around the corner, it’s time to buckle up and prepare for an exciting journey of digital discovery. Say goodbye to the days of minimalism ruling the design world and hello to bold, off-the-grid interfaces that push the boundaries of interactivity. In this article, we’ll take a deep dive into the top 20 UI/UX design trends 2023, giving you a sneak peek into the diverse and experimental digital experiences that await us in the coming years. So, hold on tight, and let’s explore cutting-edge design together!


Get ready to break the mold with Trend #1: Broken Grid! Grid-based layouts have been a staple of website design for years, but in 2023, we’re taking things off-center and off the charts. This trend is all about breaking free from the constraints of the grid to create bold, memorable designs that stand out from the crowd.

And the best part? You don’t need to be a coding wizard to pull it off! Thanks to website builders, anyone can experiment with broken grids and create jaw-dropping layouts that are sure to wow users.

Benefits of using  broken grids:
  • Off-the-grid layouts break the logical intuitive structure, creating a visually exciting twist in the design.
  • It serves to give emphasis on particular elements or sections.

To see this trend in action, check out some of the recently launched high-end websites that are leading the charge. They’re using broken grids to create visually stunning and highly engaging experiences that keep users hooked from start to finish. And some of them even take things a step further by changing the layout as you scroll, adding an extra layer of excitement and surprise.

Pinguin Web Design

Studio Graphene Picks

Builder Events

You can check out more inspirational examples of rebellious websites with broken grid layouts that break the rules of the standard grid types.


They say you only get one chance to make a first impression, and that’s especially true for websites. That’s why Typographic Hero Sections are taking over the UI/UX world in 2023.

Gone are the days of relying on flashy visuals and animations to capture your audience’s attention. Instead, designers are turning to the power of typography to create bold and memorable hero sections for their websites.

With oversized fonts, stunning font combinations, and animated text, typographic hero sections are a creative way to set the tone for your website and leave a lasting impression on your visitors.

Designers who are more experienced with fonts take full advantage to create amazing website introductions above the fold with aesthetically-pleasing font combinations and animated typography.

Benefits of using typographic hero sections:
  • Big and bold typography in a monochromatic color scheme gets the user’s attention more than videos and photography.
  • It gives the opportunity to make a big bold statement. Literally.

In the following examples, you’ll see how some of the hottest websites are using typographic hero sections to introduce their concepts or intrigue visitors with mystery. Get ready to be inspired and take your typography game to the next level!

Dragonfly Crypto Projects Agency

Etuk Josiah Benjamin Portfolio

Lazarev Product Design Agency

You can check out more examples of hand-picked websites with creative typographic hero sections.


As a continuation of the previous trend, oversized typography can transform any text into a captivating visual element.

Let’s face it, when it comes to typography, bigger is always better. That’s why Oversized Experimental Typography is set to be a major player in UI/UX design for 2023.

With its ability to transform the text into a visual masterpiece, oversized typography is the perfect way to make a bold statement and grab your audience’s attention. And when paired with creative animations, it’s like adding rocket fuel to your design.

Whether it’s used in extra large fonts and animations or more subtly, it depends on the context and what you wish visitors to focus on. Usually, this technique works best with a simple background and high contrast between the font and the background.

When it comes to trends, however, oversized typography works best with animations. You can capture attention with moving text, transitions on scroll, hover effects, and other creative ways to give life to your typography.

Benefits of using oversized typography:
  • Big and bold typography stands out from its surroundings and instantly grabs attention. 
  • When used as an integral part of the overall aesthetics, it creates a clean yet interesting design.
  • It’s best used with UI animation.

In the following examples, you’ll see how some of the most cutting-edge websites are using oversized and experimental typography to create daring and unforgettable designs. Get ready to be blown away!

Standish Creative Agency Portfolio 

Artemii Lebedev Portfolio

Evil Martians Product Development Consultancy 


The use of grid lines in web design is nothing new, but recently we’re seeing a new take on them – freestyle lines and borders. The result is a futuristic look that separates content and adds visual interest.

Think of it as an artistic interpretation of the grid system, where edges meet creativity. By experimenting with different shapes, thicknesses, and colors, designers are able to create unique and eye-catching sections on their websites. It’s all about finding the perfect balance between order and chaos.

Benefits of using visible grids:
  • Borders make it easy to distinguish one section from another.
  • It gives visual content structure.
  • Grids and frames create simplicity and order which guides visitors through the content.

In the following examples, we’ll explore how lines and borders are being used to separate content elements and create stunning visuals. From sleek and minimalistic to bold and colorful, these designs prove that lines and borders are here to stay in 2023


Bored Cow 


Minimalism has been the norm in the design world for quite some time now, but it’s time to shake things up. Say hello to overlapping elements, a bold new trend that’s taking the UI/UX world by storm. Instead of keeping things neat and tidy, designers are choosing to layer, merge, and stack elements on top of each other, creating a multidimensional visual feast for the eyes. Not only does this add depth and immersion to the design, but it also establishes a strong connection between the elements.

Benefits of using overlapping elements:
  • Overlapping elements add depth to the design and create immersion.
  • When used with parallax effects and less text, layers can create a visually cohesive experience.

The following examples showcase the power of overlapping elements and parallax effects to elevate the user experience to new heights. Get ready to be blown away!

Mica Rino Website

Option5 Studio



You know that feeling when you can’t quite find the button you need to click on a website? Well, designers are taking care of that by making the cursor impossible to miss. Oversized pointers and mouse hovers are the new craze in UI design, adding a playful and fun element to the user experience. Imagine a big, colorful circle expanding with a satisfying animation as you hover over a clickable element. It’s like a game, and who doesn’t love games? In the following examples, we’ll take a closer look at websites that use oversized pointers to make navigation a breeze.

Benefits of using oversized pointers:
  • An interactive element that helps visitors engage with the design more.
  • They only work with animation: increasing size and changing shape, or color when they hover over a clickable element or shrinking when they hover over a non-clickable area.

Let’s see a couple of recent websites that use oversized animated pointers perfectly. In most cases, these pointers appear only in specific sections that need to draw the visitor’s attention.

Twice Pictures Brand Studio


Tired of harsh drop shadows that make your designs look like they belong in the early 2000s? Fear not, for the smooth drop shadow trend is here to save the day! Thanks to the influence of design systems like Microsoft’s Fluent and Mac OS Big Sur, designers are opting for soft, subtle gradients that add depth and dimension without overpowering their designs.

The best part? These smooth drop shadows are versatile and can work for both static elements and interactive hover effects. Whether you’re looking to add a touch of elegance to your website or simply want to stay on top of the latest design trends, this trend is definitely worth a closer look!

Benefits of using smooth drop shadows:
  • Barely visible smooth drop shadows look realistic and stylish.
  • They add depth to the design and give elements emphasis, so they work great for both static and interactive elements.

In the following examples, a couple of smooth drop shadows turn a clean standard design into something much more interesting.

Companies Tools Featured Stacks


Picture this: you visit a website, and as you scroll, the content comes to life with captivating animations. That’s what the latest trend in web design is all about: scrolling animations. Gone are the days of static websites with boring text and images. Instead, designers are taking user engagement to the next level with fully animated scrolling experiences.

But don’t worry, usability hasn’t been forgotten in the quest for interaction. These scrolling animations are carefully crafted to enhance the user experience, not detract from it. With this trend, visitors are in control of their journey as they explore a website that feels like a captivating story unfolding before their eyes. Get ready to be wowed by the following examples of scrolling UI animations in action.

Benefits of using scrolling animations:
  • Brings interactive design to a whole new level of engagement.
  • Gives users full control over their own experience.

The following websites add entire sections of scrolling animation experience that spice the design up without sacrificing usability.

Grids Obys Agency

Quiet Games


Words can move people, and with slide-in text, they can also move on the screen! This trend takes kinetic typography to a new level, shifting from interactive hovers to non-interactive slide-ins that serve a specific purpose. It’s an excellent way to highlight key information, guide visitors through the design, and add a touch of playfulness to the page.

With the ability to capture attention and communicate messages in an exciting way, it’s no wonder that slide-in text is becoming increasingly popular. So, get ready to see more creative ways of using this technique in web design in the upcoming years

Benefits of using slide-in-text:
  • Serves a specific function to guide the user’s eyes through the page.
  • It highlights important information and separates it from other segments.

The following websites take advantage of non-interactive slide-in text. You can see how the technique works with different styles.

Apoc Blaze Type


Don’t underestimate the power of the footer! It’s a small section that can make a big impact on the user experience. A mega footer is a great way to keep visitors engaged and provide them with easy access to important information that they may not find elsewhere on your site.

With mega footers, you can include all sorts of helpful resources, such as navigation links, contact information, social media profiles, job opportunities, and more. Not only do they add a practical element to your website, but they can also serve as a creative canvas for design experimentation. So don’t let your footer go to waste – make it mega!

Benefits of using  mega footers:
  • Helps users see your entire website in a well-structured comprehensive way and find what they’re looking for.
  • Mega footers visually take up most of the screen which eliminates all distractions. This is why they work well even with fewer links.
  • They work well with any kind of design style, including brutalism.

The following websites have mega footers for cases with more or fewer links.

Vape Superstore eCommerce

AI Model

Proof Finance Business Website


Moving beyond 3D with realistic shadows and layer effects, get ready to experience a whole new level of visual stimulation with the rise of hyper-realistic graphics! These 3D graphics take realism to the next level, with intricate shadows and stunning layer effects that will make your jaw drop.

With the growing popularity of VR and AR technologies, designers are pushing the boundaries of what’s possible, creating the most fantastical visuals and bringing them to life with incredible detail. Whether it’s a futuristic cityscape or a magical forest, hyper-realistic graphics will transport you to another world and leave you mesmerized by their sheer high-quality execution.

Benefits of using  hyper-realistic graphics:
  • CGI can turn even the wildest and most fantastic concepts into visual reality.
  • When executed well, they elevate the design into a very high-end one and, therefore, speak of a high-end brand.
  • Visitors spend more time simply admiring the graphics.

The following websites feature high-quality hyper-realistic graphics animated so smoothly and realistically that you can almost touch them.

IRL URL Agency

Mint Venture NFT

Osiris VR


VR isn’t just for gaming anymore as they become a significant trend on the web as well. Interactive museums, space travel, and product presentation in 3D are just a small fraction of the possibilities VR brings to web design. Especially when shopping shifts to an online experience, this technology helps users perceive information visually in the comfort of their devices. In 2023 and forward, we can expect bigger physical shops giving users realistic visual tours to bring the products closer to the buyers.

And as shopping moves more online, VR and AR technologies are changing the game by allowing users to see and interact with products in a whole new way. So, get ready to step into a world of virtual reality where the possibilities are endless!

Benefits of using  VR/AR:
  • Great for eCommerce projects as it allows users to view products from all angles and interact with them.
  • The approach is ideal for giving tours, meetings, conferences, and lectures.

The following websites give users virtual museums to help them explore and perceive the information visually as they would in the real world.

Convexity Space

Fave Studio

Check out more examples of virtual reality website design.


Who needs images when you have the power of words? Well, at least that’s the idea behind the text-only trend that’s gaining momentum in web design. As minimalism continues to reign supreme, designers are finding creative ways to strip away unnecessary distractions and focus on the essentials. In 2023, we can expect to see more text-only pages or those that use only a minimum amount of images to get the message across.

Of course, this doesn’t mean that all websites will be devoid of visuals – product pages, case studies, and other content that relies on images and videos will still be visually rich. But for those who love the simplicity of the pure text, this trend is a dream come true.

Benefits of using  text-only pages
  • Allows websites to rely on a copy, by giving a few choice lines to guide visitors.
  • A modern uncluttered approach to clean design that turns any homepage into a map that’s easy to navigate.

The following websites cut the visuals out to give users clean comprehensive homepages. This allows visitors to understand what the website is about and choose how to proceed.

Women Tell Women

Without Form Space


Say goodbye to boring static images and hello to interactive image elements! In 2023, web design will be all about engaging users with layered and decorative elements that they can play around with. Whether it’s on-scroll animations, animated micro-interactions, or gesture interactions, web designers are finding creative ways to keep users hooked. So, get ready to have some fun and interact with your favorite websites like never before!

Benefits of using  interactive image elements:
  • They don’t serve any particular function rather than engaging the visitor to play around with the decors.
  • They give users a fun experience and provoke them to explore the design more.

In the following examples, users can click and drag around the decorative sticker elements for fun. Design over functionality at its finest.

Astrology Club Spotify


Let’s proceed with another upcoming trend that serves strictly design purposes rather than functionality. Since split-screen doesn’t work well for usability and responsiveness, it’s now just for fun desktop aesthetics. As the name suggests, we have two screens, split horizontally or vertically. There are a couple of ways you may encounter them:

  • Each side of the screen with functional or click actions.
  • One side of the screen is purely decorative and unclickable.
  • One is purely decorative and unclickable and the other one is scrollable.

The very fact that we see the comeback and evolution of trends long thrown aside for lack of usability, might be a sign that minimalistic, uniform corporate designs are finally taking a break and we’re about to enjoy fun and more engaging websites in the following years.

Benefits of using  split-screen:
  • The split-screen design provides a strong visual experience.
  • It can be used to give visitors two different entry points into the content.

The following examples show split-screen in the three most common uses.

Hyumanking Hyam Designer Portfolio

Readymag Awwwards Website of the Year

Captain France Rail Network

Check out more live examples of websites with split-screen layouts.


Video hero images or video backgrounds refer to automatically playing background videos in the hero section. Unfortunately, in most cases, background videos slow down page loading, and can even be distracting. For that purpose, we’re about to see websites using them much more carefully and strategically. For example, the videos aren’t just abstract and conceptual, but rather show actual footage of the event or product the website is promoting. They are much shorter so they won’t eat too much data or prevent the website to load properly.

Benefits of using background videos in the hero section:
  • Autoplay background videos: They serve to give important visual information about the product or service.
  • Non-auto-play video next to the page title: It’s a great opportunity to put an informative and helpful product video.

Salt Project


Horizontal scrolling, when done right, subverts expectations from the uniform vertical scrolling experience, and makes a website more interesting, fun, and most importantly, memorable. It’s becoming a trend to use mixed scrolling, usually, websites start with vertical scrolling and then shift to horizontal for certain sections, especially ones with large gallery images or animations.

Benefits of using horizontal scrolling:
  • It subverts expectations and gives memorable experiences.
  • It works great for large galleries of images and animations.

In the following examples, horizontal scrolling gives more space for the elements, saving the design from clutter.

Henry Northington Portfolio

Orb Space Studio


Although you can’t control 404 errors, you can still take care of your visitor’s experience and use your 404 pages to recover the inconvenience of arriving at a dead link. Let’s call it a happy accident.

This trend allows businesses to show they care about their users and manage to negate any negative emotion with cool animations, games, humor, and other memorable and unexpected content.

Benefits of using a custom 404 page
  • Custom 404 pages help your visitors recover from the poor experience of hitting the error page and ultimately help you bring them back to your website.
  • They show you care about the experience of your users.

Now let’s see a couple of beautiful custom 404 pages that bring a smile to the visitors’ faces.


Santa Teresa Fest


Responsiveness is an obvious requirement, however, considering mobile usage has surpassed desktop for shopping, consider going a step further. Unlike responsive design, with this approach, you design the layout specifically for mobile devices and adapt that design for bigger screens later on.

Benefits of mobile-first design:
  • The better you design a site for mobile, the easier the use, and the better the performance.
  • Makes the content consistent with the space of a mobile screen.
  • Eliminates the usual headache of having to exclude content from your desktop version.

Website:  Cubitts

Subscribe for our newsletter

We hate boring. Our newsletters are relevant and on point. Excited? Let’s do this!