Web Design Trends 2024: Sectioning Away with the Bento Grid

Hat tip to Oleg Romanovsky for helping me gather ideas for this post.

We have a custom at ObjectStyle. Each December, we look at the web design trends that took foothold in the soon-to-be-gone year, and make predictions for the next one.

More often than not, certain tendencies go on for several years, having a multi-annum life cycle. And some trends simply die out, or make a comeback for no particular reason. So we normally look at how things have changed in the past twelve months.

With that said, let’s dive in – here’s a list of the latest web design trends and predictions for 2024.

1. Bento Grid

As a design trend, the bento grid is named after the Japanese “bento” lunchbox (invented around 12th century CE) where the internal space is divided into isolated sections to prevent different types of foods – like rice, fish, or grapes – from mixing with one another.

In the web design world, the bento grid was pioneered by Apple and instantly took off, with thousands of websites adopting it at light speed. Indeed, the bento layout has a ton of advantages: it’s neat, uniform, organized, and easy on the eyes. It also allows web designers to slice and dice the page’s real estate rather effectively.

The sections can be big or small; they can have sharp or rounded corners; they may also vary in size and background color.

A variation of the bento grid is “stealth bento” where sectioning is more subtle, barely visible, yet present. This type of layout looks great on dark mode websites.

2. Dark Mode

The dark mode became a distinct trend around 2020, and we talked about it on this blog. In 2023, the number of websites with a dark theme has increased exponentially. A lot of designers combine this theme with bright, saturated colors and complex gradients.

Compared to light themes, their dark counterparts look classy, expensive, and fresh. Not to mention that using a darker theme reduces blue light exposure (sources of blue-spectrum light like computer screens impact the sleep cycle, if used in late hours) and puts less strain on the user’s eyes.

3. AI Generated Imagery

Many in the web dev community predict that AI generated visual content will explode in 2024. However, we are yet to see how often and in what contexts it will be used in web design. In most business case scenarios, you don’t need over-the-top, phantasmagoric imagery – you simply want something specific and normal.

As someone who has used AI image generators myself, I would say there is immense potential in them, but these tools still “hallucinate” and are bad at following very specific instructions. On top of that, AI art has become so popular so quickly that there wasn’t sufficient time for vendors to work out watertight usage rights policies. For example, a big brand might be cautious of using AI generated stock photos – simply because the people and objects in those images might resemble real celebrities or brand products.

At the same time, it’s possible that AI image generators will be used a lot for tasks at which they excel from generating idyllic landscapes to animal photos, to fantasy characters.

4. Retro-inspired design

I remember watching the documentary “Helvetica” when it was first released, exploring the displacement of heavy and clunky fonts in favor of sleek, clean, elegant, and modern typography. And now it looks like those previously criticized, bulky typefaces have reemerged in design trends. This year, there seems to be an abundance of 3D “bubble gum” typefaces, tall fonts with a stark shadow, and other nostalgic typography.

The trend extends beyond mere font choices. Take, for instance, this website that has an old cinema-like aesthetic. Upon closer inspection, it becomes apparent that this vintage-inspired web property is actually dedicated to crypto and NFTs. The irony is intriguing!

5. Complex gradients

In the past few years, we have seen a lot of examples of “aurora borealis” type of gradient, which we discussed in a predictions post a while ago. As time goes by, gradients seem to get more complex and creative. Historically, a gradient was a transition between two colors: you could see the starting and finishing point very well. These days, gradients are much more than that.

Today, many sites use multicolor and radial gradients, which means they can have any possible shape and use lots of colors. The use of contrasting hues is also far from rare. So there is a good reason why gradients seem to be an undying trend: they allow designers to add extra dimensions and dynamism to the page by using just the background colors.

6. Gradient typography

You may have noticed that the creative use of typography has been at its peak lately. And what could be better than combining it with another super-hot trend – the gradient. Multi-color letters definitely look more interesting and impactful than their single-color “cousins”.

7. Supersized typography on steroids

Just like Coca Cola servings, page titles seem to be getting bigger and bigger each year. Just recently, we mused on whether a time would come when the typography is so enormous that it occupies an entire screen. Well, that time has arrived, folks. Here it is – letters don’t get any larger than this.

8. Dynamic typography

Dynamic typography is text that creates the illusion of movement, although it does not move. It can be jagged, tilted, twisted, slashed, etc. – whatever works to make it feel like something is going on.

Sometimes, dynamic typography is confused with animated/kinetic text. While a dynamic font can be animated, what makes it so powerful is that it packs a punch even in the static form.

9. Kinetic typography

Closely related to the previous trend is kinetic typography. “Kinetic” comes from the Greek word “kinesis,” which means “movement” or “to move.” In other words, it’s animated typography that mixes motion and type.

Fonts that feel as if they were alive hold the user’s attention for longer time-periods, helping the viewer maintain focus on what they see.

10. Lottie Animations

Lottie is an open-source animation design tool that was first introduced by Airbnb in 2017. Its main appeal for designers lies in its ability to render animations natively, guaranteeing a consistently excellent user experience across various platforms. As Lottie continues to gain traction among web and mobile designers, an increasing number of websites now showcase dynamic Lottie animations.

Using Lottie is a no-hassle way to incorporate captivating animated graphics in your design. Its user-friendly approach has made it a popular choice, reflecting the broader trend toward leveraging dynamic visuals to enhance web interfaces.

TR; DR

Looking at the upcoming web design trends for 2024, ObjectStyle notes a few interesting tendencies. The bento grid, inspired by Japanese lunch box compartmentalization, is catching on for its neat and functional layout. Dark mode is still going strong, especially when mixed with vibrant colors, offering a cool look and easing eye strain. There’s buzz about AI-generated imagery, even though there are some issues to work out. Retro vibes are making a comeback, with old-school typography and vintage looks. Gradients are getting fancy, and gradient typography adds a splash of color. Supersized typography is in, with letters taking over screens. Dynamic typography gives text a lively feel, and kinetic typography keeps users engaged. Lastly, Lottie Animations, a tool from Airbnb, is gaining popularity for adding cool animated graphics to web and mobile designs.

Looking for a web design services provider?We can help!Get In Touch

Name *

Email *

Message *

FileAttach your file

Δ