Bento Grids - New Web Design Trend for 2024?

There is a new design trend out there that is gaining traction in web design, and that is the Bento Grid. In this video, I want to show you what it's all about, and some examples. You learn what's good about this layout, and what you want to be careful with when using it. Also, how you can use this style in your own web design.

📽️ CHAPTERS
---------------------------
00:00 - Intro
00:11 - What Are Bento Grids?
01:07 - Examples
02:26 - What To Be Aware Of
03:40 - How To Build A Bento Grid Layout In Webflow

What trading design topics do you want to hear about? 💬

📱 Find us on SOCIAL MEDIA

#webdesign #freelancewebdesigner

[eingoluq]

It started with Microsoft's Metro UI for Windows Phone, and originally for the Zune HD. Microsoft's Metro was inspired by architecture, firstly pictograms in Metro stations but also the architectural style called De-Stijl. Metro had live tiles and started the Minimalist/ Flat design that we have today. It was the first truly minimalist UI ever designed, and now even Spotify looks like the original Zune Desktop software.

Bento is just Metro with rounded corners.

[Kwuala]

This reminds me of the days we used tables to layout pages with colspan & rowspan attributes.
A very interesting topic to cover, but it would've been great to dive deeper into "responsive" bento grids, I think it's more challenging than a normal grid layout.

[PKorp-PriyankaKalyan]

IMO, this is good for websites with images/illustrations based niche since it is easy to comprehend image or related stuff. But with written content, it can make us feel overwhelmed because of hierarchy and retention issues.

[larryczerwonka]

We were doing this as far back as 2000. We called it screen spaces. It is a great layout for dynamic data (meaning that while on the page, the data in sections changes.

[deplatt]

I saw this first in the Apple keynote presentations. After that I saw it everywhere. I would not use it. Too trendy now.

[TinyBubbleExtreme]

happy has been using Bento styling in their video showcases and some sections of their websites at least for the last 4-5 years

[IslayAnderson]

I went for a bento design for my portfolio last year, inspired by apples feature catalogue images the have been releasing for the last couple years.

it looked good but, this year I went for a more traditional magazine style.

[anfisign]

Love this video!
I feel like Apple presentations also strongly contributed to creating a bento trend.

[Andyhutchinson]

Seem to me that it evolved from the way Apple create their end of section cards during live events. They began using a Bento layout on them a few years ago.

[marcelomagalhaes]

People rebranded the masonry layout. Cool!

[deathcode]

this saved me alot of time. thanks so much for this

[thenimeshkumar]

It has become very common for portfolio sites!

[thMidnight]

My opinion is that its okay to make features section or portfolio section with Bento grid, just to break that boring equal squares layout, like blogs, but other than that - specially if you make whole website this way - its too much, everything is stacked as boxes, nothing is hightlighted, everything is the same and something to skip.

[perspective.funnels]

Thank god it's trending, we just released cards to the app 👀

[seriouslyEH]

We did this stuff in the early 2000s with tables. ;)

[neludesign]

I love this! 2 years ago I designed a layout along the lines for a client, that was my first project as a freelance. So I am proud because he still have a "fresh" website even though I no longer collaborate with him.
Today as accessibility analyst I wonder if it could be a solution that can be easily used by everyone.

[thedude]

I have seen this a few times not much, this is more for personal websites but not for big tech... Still looks nice.

[adamcitoo]

Thanks for the inspiration bro. You da best ✌🏻

[orangeagent]

The Windows Phone design team looking at this like…. “Now you like grids?”

[tavusion]

I started seeing these layouts on Apple's website many years ago and also on their Keynotes, which they still use.