Bento Boxes are a web design secret, as long you understand what they are not.

A bento box
Photo by kofookoo.de on Unsplash

Bento grids in web design, just like the Japanese food boxes, are very pretty to look at, and they are very trendy these days.

Diego Liv's bento grid footer
The footer from Diego Liv


It’s a great way to break out of boring, repetitive and uninspired layouts.
You see them every time Apple wants to show the plethora of new features a product or an OS has to offer.

Control eye movement

In web design you can control the eye movement of the user, like F shape patterns, but with bento grids you can’t.

Control eye movement. Source: Crazy Egg
Control eye movement. Source: Crazy Egg


But what some designers seem to miss is that Bento boxes are not meant to lead to an important call to action.

They are meant, at best, to be pleasing to look at, and to an extent to overwhelm the user with an overload of information on purpose. This leaves an impression of “we have so much to offer” kind of an impression.

And it also works great in responsive web design, but that’s not the point.

My favorite websites that make good use of bento grids

Diagram

Givingly

Linear

Web Design Secrets, Part 8: Figma Playground
Web Design Secrets, Part 7: Huge Graphics
Web Design Secrets, Part 6: Gradient Headings
Web Design Secrets, Part 5: Bento girds
Web Design Secrets, Part 4: Mouse Follower
Web Design Secrets, Part 3: Secondary Animation
Web Design Secrets, Part 2: Staggered Text Reveal Animation
Web Design Secrets, Part 1: Smooth Scrolling
How to add "Paper" to your web design
Relume AI Website Builder
No more unbalanced headlines in your design
Fill text on scroll with GSAP and ScrollTrigger
Design Better Countdown Timers
Emoji Confetti
Text Stroke Effect
Stretched letter effect using variable fonts

Got a Question?

Get an Answer!

If something's not clear, drop a question on my Instagram and I'll update my tutorial if needed.

More videos

Next
No next video
Back to all videos
Previous
No previous video
Back to all videos

Some of the links on this page are affiliate links, meaning I may receive a commission if you follow them. This allows me to continue providing free content and educational resources for you, and for you it changes nothing. Also, I 100% stand behind every product I recommend. Thank you for supporting my small business