About 2024 website design trends - As we step into 2024, the start of the year is the perfect time for new beginnings. It’s an ideal moment for the design community to "recharge their creative souls." Without further ado, let’s explore the UX/UI design trends of 2024 with Markdao—you might just find that "aha!" moment for your next website project!
Every year, we see a wave of new design trends that are not only visually stunning but also influential enough for other designers to adopt and evolve. Like clockwork, each year brings new 2024 design trends as well as website inspiration that Markdao will curate and update. Whether you love them or hate them, some of these design waves are undeniably smart and functional. These features range from packing more information into less space to creating deeper user engagement.
Let’s join Markdao Agency to check out some of the 2024 website design trends that are here to stay and currently taking over the internet!
2024 website design trends: Key shifts dominating the market
1. The Bento Trend (Bento Boxes) - More than just a lunchbox
The Bento box is a staple of lunch culture in general and Japanese culture in particular. They are famous for keeping food organized and everything neat.
Figure 1 - Bento Box design trend
We may never know who first thought of this, but just as they pack food into a container, Bento boxes have a fantastic digital effect on screen.
Bento is another 2024 website design trend that is making waves on platforms like Dribbble and Behance, inspiring millions of designers. However, this "modular" design concept actually originated from website dashboards. This includes sales and financial overviews like PayPal, analytics tools like Google Ads, and many others.
Remember Windows phones and Lumia? Well, the UI they used was essentially an early iteration of Bento designs. Microsoft later implemented this concept into their Windows desktop start menu with Windows 8.
Figure 2 - Bento design style on Win 8
While used throughout the industry, 2024 website design trends featuring the Bento style truly exploded when Apple decided to use the Bento grid for the first time. Initially, they used it on their iPhone landing pages, but it quickly expanded to their slide decks and event presentations.
Figure 3 Apple poster designed in Bento Box style
Apple is widely known as the initiator of major design trends that influence the world, and Bento is just one of them. Every designer, and arguably almost the entire design community, uses Bento for presentations, websites, product showcases, and the list goes on.
The biggest difference between old-school bento-like designs and the new 2024 website design trend is that each section of the grid represents a unique space rather than being part of a group.
Unlike many other UI design trends, Bento is evolving into more than just an aesthetically pleasing layout. It has now grown to include product demos, combined with various unique layouts, and is even being stylized with new visual design concepts.
Let's take a look at the example below to clearly see the power of this layout:
Figure 4 - Live demo bentobox layout on diagram
The example above is from diagram.com, which uses a bento grid to display real-world examples of what its tool can do through an interactive experience. This makes the tool much more engaging and lets users know exactly what to expect.
To help designers like us, there are several websites dedicated to Bento design inspiration from across the web. One such site is bentogrids.com, which features a large collection of Bento grids for UI and graphic design. We are truly grateful to the creators of this site for bringing so much inspiration to the design community!
2. Spatial Design Trends & Leaps in Technology
Just imagine! You wake up, pick up your phone to check your "important emails," and your entire feed is filled with Apple's new Vision Pro. This was exactly the morning for tech and design enthusiasts around the world on June 5, 2023.
Figure 5 Image credit from Apple
For the next few weeks, this was all the tech world could talk about, and designers everywhere scrambled to hone their spatial design skills.
Beyond the 2024 website design trends mentioned above, various AR/VR startups have taken the lead, and their technology is finally getting the recognition it deserves. This has provided a real boost for AR and VR, something we truly needed.
As you know, when all the right elements come together, masterpieces are born. With incredible technology, amazing design potential is set to emerge.
From smartwatches to foldable phones, designers are constantly striving to demonstrate their true adaptability. Spatial design is no exception.
Figure 6 - A glimpse of what is to come
This comes alongside 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 engage in spatial design, connect active AR/VR headsets, and create interactive spatial experiences. Naturally, some web design projects are already utilizing this technology to enhance the user experience.
To get a better idea of Bezi, let’s take a look at what it allows you to create beyond standard design:
Figure 7 Demo from Bezi.com
As you know, better UX is a major contributor to a better AR/VR experience. Deeply understanding the technology behind beautiful designs, using actual VR headsets, and testing everything in a spatial environment will all become part of the work that designers need to do.
There will certainly be many new lessons and shifts in our current understanding of UX as we continue in the design industry. However, this is a skill you want to start building now to use in the future—it’s a profitable long-term investment.
Beyond Apple’s vivid imagination and deep pockets, there are some less tech-focused companies bringing entirely new experiences to eyewear.
Although Google’s "Google Glass" project was never mass-produced, sunglasses company Ray-Ban has entered the smart wearable race with their new Meta Wayfarer.
Figure 8 Image credits — RayBan
Don’t let Ray-Ban’s casual design fool you; the built-in camera and smart features allow you to store videos/images and livestream to social media. This brings a whole new dimension to user experience and customer experience. Perhaps this will be a 2024 website design trend. Who knows what might happen in the future world of humanity!
3. Everyone can animate as they please (Animation trend)!
Sounds strange, right? Don't worry, Markdao will explain this right now:
A new trend often emerges when a new skill becomes accessible to more people. When it comes to 2024 design trends, the animation trend will definitely be on the list.
This is a task that LottieFiles has taken on. When I joined the company as an instructor, I was amazed at how easily we could add animations to any user interface (UI) in any tool. Considering the demand for Lottie animations, they even launched a Figma plugin that allows us to convert our Figma animations into exportable Lottie JSON files.
Figure 9 - LottieFiles plugin for Figma
This eliminates the steep learning curve associated with After Effects and similar software. As a result, designers can create animations quickly on their own.
Nowadays, you will start to notice engaging interactions on every company's landing page. This is all thanks to the growing demand for unique visitor experiences and the increasing need for storytelling as a tool to sell products and services.
Check out these website inspiration, and use the following landing page interaction as a prime example of the power of animation:
Figure 10: Apple Watch Series 9 Landing Page — Double Tap Interaction on Scroll
Try applying animation and start designing your 2024 website trends. With scroll animation in place, visitors will be captivated by what you present to them. No-code tools like Webflow and Framer are constantly innovating to bring such animation capabilities to designers without the hassle of writing long lines of code.
One might think the animation trend journey ends here. Animation may have reached its peak, with nothing left to look forward to. Fortunately for us, those in the tech industry are always looking for the next big breakthrough. Plus, thanks to countless useful tools, everything you can imagine is now achievable.
One such possibility is the new "animated button trend." This new UI style introduces animation techniques to bring life to simple, previously static buttons. These changes range from simple stroke animations around the button to literal stars moving inside the button upon mouse hover.
Take a look at the "animated button" below to see how it becomes more engaging every time you hover over it:
Figure 11 - Galaxy Click Button
Such 2024 website design trends 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 this the end of Flat Design?
It may seem ironic to discuss 2024 trends while mentioning the decline of Flat Design, but we need to cover it because the next trend stems from it.
Recently, many designers have been talking about how the world of web design is shifting from flat design (like the design you see here on Medium) to a pseudo-realistic visual style. Although we have seen many website inspirations that applied Flat Design to great success in the past, those days are now behind us. Modern design trends, both in general and in web design specifically, now include 3D graphics, depth effects, neumorphism, skeuomorphism, and more.
Recently, we have seen many companies implementing 3D as their core style. While it may not yet be widespread in web and app design, logos are already being updated to follow this new trend.
Figure 12: Just a few good examples of the new 3D wave made by Chan Karunaratne
Like other trends, the main driver behind the adoption of these styles is the emergence of "easy-to-use" web-based 3D tools like Spline and Vectary, which make integrating 3D content into websites and apps incredibly simple. They also bring 3D content to life through animation.
It blows my mind how basic linear gradients and a few shadows can add such depth and a third dimension to your designs and assets.
Another company that consistently leads design and sets trends is Airbnb. They are widely known for their simple yet effective app design and interactions. In 2023, they announced an app update that would introduce several significant new features.
What did they do? They incorporated over a dozen 3D-ish visual elements, and their announcement video was almost entirely 3D-based.
Figure 13: Launch video by Airbnb
The isometric visuals, 3D characters, animations, and the array of app interactions kept me coming back for more. The transition from flat to 3D has been slow and steady, which is why I believe this trend is here to stay.
And of course, when you combine isometric visuals, 3D characters, and animation in web design with the right balance, you’re bound to end up with a pretty cool website.
While it remains a mystery who exactly kicked off this 2024 web design trend, the demand for practical and intuitive designs has pushed us to innovate for the sake of our users—and, of course, for our own creative reasons.
5. The A.I. Design Tool Flood - Friend or Foe?
Artificial intelligence is the most used and recognized term in the tech industry over the past decade. While some designers view it as a threat to their future careers, most of us are using this technology to create better designs faster. We must also acknowledge that since mid-2023, and continuing into 2024, some web design work has increasingly utilized A.I. to significantly reduce design time compared to the past.
Figure 14: Adobe Firefly being used for video manipulation
A suite of design tools marketing themselves as "A.I.-powered" is attempting to implement OpenAI APIs at various levels and is also working on A.I. models. However, most of these A.I. features are simply gimmicks. Random UI designs, shuffled assets, and even providing basic solutions to complex client problems—these are just a few of my criticisms, and they are shared by many in the design community.
Amidst the clutter of these gimmicks, a few heroes have arrived to save the day. One such hero is Relume, a fan favorite. This Webflow-focused company introduced Relume A.I., an effective wireframing and site-mapping tool.
Figure 15: Relume A.I in action
You enter a prompt describing your project, and it generates a complete wireframe and site map for you. These wireframes are filled with relevant data and layouts that can be quickly copied into Figma and Webflow.
Also, let me know if I’m the only one who thinks ChatGPT is stifling human creativity and building our dependency on it?
6. UX is moving toward a more friendly and empathetic user experience
If visual and UI design requirements are met, it is safe to say that UX has evolved, a fact evidenced by the current focus of researchers and UX designers. This means streamlining processes to make designs more accessible and inclusive.
Many designers are shifting their focus toward usability rather than just visual design. This has led to 2024 website design trends that are simpler and easier to implement. Designers are prioritizing effectiveness over "reinventing the wheel," despite the industry changes seen over the past few years.
Figure 17: Google trends graph on “UX Accessibility” from 2019 to 2023
The Google trends chart above illustrates how accessible design has become an industry standard.
These accessibility techniques range from color contrast, readable fonts, and recognizable action elements to creating shadows for users with different accessibility needs, bringing accessibility-focused features to the forefront.
Why is there a growing demand for accessibility?
Accessibility is also being driven by the current need to design for people of all ages, including those with physical limitations. Companies want to reach all demographic groups and are pushing for inclusivity in every aspect. As more people go digital, it has become nearly mandatory for designers to focus on accessible website design trends for 2024.
Even courses and training programs have long anticipated this demand and are preparing students to enter the field with a solid foundation in accessible design.
Personalization
Beyond accessibility, personalization is what truly keeps people engaged with an app or website. You have likely seen this small notification on YouTube before -
Figure 18: Youtube assessing what kind of content you like to give you better recommendations
You may also notice various apps testing a new feature for a few days and then withdrawing it because users did not respond well to it. This is a direct demonstration of how UX designers are leading the way when it comes to the future of products, services, and 2024 website design trends.
