What Are the Predicted Web Design Trends for 2024?

Vũ Khôi

Author at Wotech Electronics Blog

About web design trends 2024 — As we step into 2024, the start of the year is a time we set aside for new things. It is an especially fitting moment for the designer community to "awaken the artist" within us. Without further ado, let's join Markdao for a quick tour of the UX/UI design trends of 2024 below — who knows, you might just "boom" out an incredibly wow idea for your upcoming website design project!

Every year, we see a wave of new design trends that are not only easy on the eyes but also close enough to reality to influence other designers into "borrowing" and building upon them. Like clockwork, each year brings a fresh set of 2024 design trends as well as website inspiration, compiled and updated by Markdao. Love it or hate it, in reality some of these design waves are genuinely smart and useful. These functions can range from packing more information into less space to building more interaction with users.

‍

Join Markdao Agency as we look at some web design trends for 2024 that have stuck around and are taking over the internet!

Web design trends 2024: the shifts that are and will dominate the market

1. The Bento trend (Bento Boxes) — Not just a lunchbox for kids

The bento box is an essential part of lunchbox culture in general and of Japanese culture in particular. The Japanese are famous for storing food neatly and keeping everything clean and tidy.

Figure 1 - The Bento Box design trend

‍

We may never know who first thought of it, but the bento box has a wonderful digital effect on screen — much like how it packs food neatly into a pouch.

Bento is another web design trend for 2024 that started making waves on platforms like Dribbble and Behance, pursued by millions of designers. However, the concept of "modular" design actually began with dashboard panels for websites. This includes sales and finance dashboards like PayPal, analytics like Google Ads, and many other things.

Remember Windows phones and the Lumia? Well, the UI they used was essentially the original iteration of Bento designs. Microsoft later brought the concept to their desktop Windows start menu with Windows 8.

Figure 2 - The Bento design style on Windows 8

‍

While the industry was using it everywhere, Bento-style web design trends for 2024 truly exploded when Apple decided to use the Bento grid for the first time. Initially, they used it on their iPhone landing pages, but quickly expanded it to their event presentation and keynote pages.

Figure 3 - Apple poster designed in the Bento Box style

‍

Apple is widely known as the originator of major design trends with worldwide influence, and Bento is just one of them. Every designer — and arguably nearly the entire designer community — now uses Bento for presentations, websites, product introductions, and the list goes on.

The biggest difference between the old bento-like designs and the new 2024 web design trend is that each section of the grid represents a single, standalone space rather than part of a group.

Unlike many other UI design trends, Bento is genuinely evolving beyond just a visually pleasing layout. It has now grown to include product demos, combinations with other unique layouts, and is even being stylized with new visual design concepts.

Take a look at the example below to see the power of the layout in action:

Figure 4 - Live demo bentobox layout on diagram

‍

The example above is from diagram.com, which uses a bento grid to show real-world examples of what its tool can do through an interactive experience. This makes the tool far more appealing and tells users exactly what to expect.

To help designers like us, there are several websites dedicated to Bento design inspiration from all over the web. One such site is bentogrids.com, which features a large collection of Bento grids for UI and graphic design. Kudos to the creators of this site for bringing so much inspiration to the designer community!

2. Spatial design trends & leaps in technology (Spatial Design Trends & Leaps in Technology)

Just imagine! You wake up, pick up your phone to check "important emails" while watching a match, and your entire feed is flooded with Apple's new Vision Pro. That is exactly how the morning of June 5, 2023 went for tech and design enthusiasts around the world.

Figure 5 - Image credit of Apple

‍

For the next few weeks, this was all the tech world could talk about, and designers scrambled to hone their spatial design skills.

Beyond the web design trends for 2024 described above, many different AR/VR startups have been leading the way, and their technology is finally getting the recognition it deserves. This has given AR and VR a real boost — something truly necessary for all of us.

You know how it goes: when all the right elements come together, masterpieces are created. With great technology comes great design potential.

From smartwatches to foldable phones, designers are always striving to demonstrate their true adaptability. Spatial design is no exception.

Figure 6 - A glimpse of what is to come

‍

This came along with the launch of a popular designer-focused tool called "Bezi". It is similar to design tools like Figma and Spline, but with an added third dimension. Designers can jump into spatial design, connect working AR/VR headsets, and create interactive spatial experiences. And of course, web design today already has several players using this technology to enhance the user experience.

To picture what Bezi is, let's take a quick look at what Bezi lets you create — no longer just ordinary design:

Figure 7 Demo from Bezi.com

‍

You know, better UX is a major contributor to a better AR/VR experience. Understanding the technology behind the beautiful visuals, using actual VR headsets, and testing things out in a spatial environment will all be part of the skill set designers need to build.

There will certainly be plenty of lessons and new shifts in our current understanding of UX as we move forward with the design industry. But this is one of those skills you want to start accumulating now and be able to use in the future — a long-term investment that pays off.

Beyond Apple's rich imagination and deep pockets, there are also a few less tech-savvy companies bringing a completely new experience to wearing glasses.

Although Google's "Google Glasses" project never went into mass production, the sunglasses company RayBan has joined the smart wearables race with their new Meta Wayfarer.

Figure 8 - Image credits — RayBan

‍

Don't let RayBan's ordinary design fool you; the built-in camera and smart features let you store video/photos and livestream straight to social media. This brings a whole new dimension to user experience and customer experience. Perhaps this will be a web design trend for 2024. Who knows what might happen in humanity's future world!

3. Everyone can animate to their heart's content (Animation trend)!

Sounds strange, right? Stay calm — Markdao will explain this part right away:

A new trend often emerges when a new skill becomes accessible to more people. When it comes to 2024 design trends, the animation trend is a name that makes the list.

This is a task that LottieFiles has taken on. When I joined the company as an educator, I was amazed by how easily we could add animations to any user interface (UI) in any tool. Given the demand for Lottie animations, they even released a plugin for Figma that lets us convert our Figma animations into exportable Lottie JSON files.

Figure 9 - LottieFiles plugin for Figma

‍

This removes the rather steep learning curve of After Effects and similar software. As a result, designers can create animations quickly on their own.

Nowadays, you will also start noticing engaging interactions on every company's landing page. All thanks to the growing demand for a different experience for website visitors and the rising need for storytelling as a tool to sell products/services.

Check out this website inspiration — take the following landing page interaction as an example that proves the power of animation:

Figure 10: Apple Watch Series 9 Landing Page — Double Tap Interaction on Scroll

‍

Try applying animation and get started on your own 2024 web design trend. With scroll animation in place, visitors will be captivated by what you present to them. No-code tools like Webflow and Framer keep innovating to bring such animation capabilities to designers without the hassle of writing long lines of code.

One might think the journey of the animation trend ends here. Animation may have peaked with nothing left to look forward to. Fortunately for us, those of us in tech are always chasing the next big breakthrough. What's more, with countless useful tools out there, anything you can imagine is achievable.

One such possibility is the new "animated button trend". This new UI style brings animation techniques to bring life to a simple button that used to offer little interactivity. These changes range from a simple stroke animation around the button to literal stars moving inside the button as you move your mouse.

Admire the "animated button" below — it gets more delightful every time you hover over it:

Figure 11 - Galaxy's Click Button

‍

Web design trends for 2024 like this are often created by a domino effect. First, a designer's social media post goes viral, and then other prominent designers follow suit.

4. Is it the end of Flat Design?

Contrarian as it may seem to discuss the decline of Flat Design while talking about 2024 trends, we need to touch on it because the next trend also has its roots there.

Recently, many designers have been talking about how the design world is shifting from flat design (like the design you can see here on Medium) toward a pseudo-realistic visual style as part of the 2024 web design landscape. Although we once saw plenty of Flat Design website inspiration dominating in the past, those days are now behind us. Design trends in general, and web design in particular, now include 3D graphics, depth effects, neumorphism, skeuomorphism, and more.

Lately, we have seen many companies adopt 3D as their core style. While it may not be showing up much in web and app design just yet, logos are being updated to match this new trend.

Figure 12: Just a few good examples of the new 3D wave made by Chan Karunaratne

‍

Like other trends, the main reason people are adopting these styles is the arrival of "easy-to-use" web-based 3D tools like Spline and Vectary, which make adding 3D content to the web and apps extremely easy. They also bring 3D content to life using animation.

I was blown away to learn that a simple linear gradient and a few shadows can add depth and a third dimension to your designs and assets.

Another company that has always been design-oriented and trend-setting is Airbnb. They are widely known for their simple yet effective app designs and interactions. In 2023, they announced an app update that would truly bring a number of new and important features.

What did they do? They incorporated over a dozen 3D-ish visual elements, and most of their announcement videos were 3D-based.

Figure 13: Launch video by Airbnb

‍

Isometric visuals, 3D characters, and animations, along with a host of app interactions, made me want to watch it over and over. The transition from flat to 3D is happening slowly and steadily, which is why I believe this trend is here to stay.

And of course, when you design a website combining isometric visuals, 3D characters, and animation — each element with just the right balance — a pretty cool website is bound to emerge.

For now, who exactly started this 2024 web design trend remains a mystery, but the demand for realistic, easy-to-understand designs has pushed us to innovate for users — and of course, for our own creative reasons.

5. The flood of A.I. design tools — love it or hate it?

Artificial intelligence is the most used and recognized word in the tech field over the past decade. While some designers see it as a threat to their career future, most of us are using this technology to create the most beautiful designs, faster. We also have to admit that a lot of web design work today, from mid-2023 through the 2024 design trend cycle, continues to apply A.I. to dramatically shorten design time compared to before.

Figure 14: Adobe Firefly being used for video manipulation

‍

A set of design tools that self-promote as "A.I. powered" are trying to implement the Open A.I. API at various levels, and some are also working on their own A.I. models. However, most of the features of these A.I.s are simply marketing gimmicks. Randomized UI design, shuffling assets around, and even offering basic solutions to difficult problems customers are facing — these are just a few of my criticisms, and they are shared by many members of the designer community.

Amid the chaos of these gimmicks, there are a few heroes who have come to rescue a world being fooled. One such hero is Relume, a fan favorite. This Webflow-focused company has come out with something called Relume A.I., an efficient wire-framing and site-mapping tool.

Figure 15: Relume A.I in action

‍

You feed it a prompt that basically describes your project, and it also generates a complete wireframe and site map for you. The wireframe is full of data, and the relevant layouts can be quickly copied over to Figma and Webflow.

Also, let me know if I'm the only one who thinks Chat-GPT is eroding human creativity and building our dependence on it?

6. UX is moving toward friendliness and empathy in the user experience

‍

If the visual and UI design boxes are ticked, it is fair to say that UX has matured — and this can be proven by what researchers and UX designers are focusing on. You see, this means streamlining processes to make designs more accessible and inclusive.

A lot of designers are venturing into usability rather than visual design. This has produced 2024 web design trends that are simpler and easier to implement at their core. Designers are focusing on what delivers results rather than reinventing "old wheels," regardless of the industry's changes over the past few years.

Figure 17: Google trends graph on "UX Accessibility" from 2019 to 2023

The Google Trends chart above shows just how much accessible design has become an industry-wide requirement.

These accessibility techniques range from color contrast and readable fonts to recognizable action elements, and even creating shadows for people with different levels of ability to push accessibility-focused features onto the agenda.

Why is Accessibility in growing demand?

Accessibility is also being pushed forward by the current need to design for people of all ages, and even for those with physical limitations. Companies want to make money from all the different demographic groups and are driving inclusivity in every aspect. As more and more people go digital, designers are practically required to focus on accessible design as a 2024 web design trend.

Even courses and training programs have caught on to this demand early and are preparing students to enter design with a solid knowledge of accessible design.

Personalization

Beyond accessibility, personalization is what really locks people into a particular app or website. You've surely seen this little notification on YouTube before —

Figure 18: Youtube assessing what kind of content you like to give you better recommendations

‍

You can also observe many different apps testing a new feature for a few days and then pulling it back because users don't appreciate it. This is a direct demonstration of how UX designers are leading the game when it comes to the future of products and services and web design trends for 2024.

‍

Related articles