While browsing through good web designs recently on Twitter or via web design galleries, I noticed a trend of using content blocks in variable size and design to form an interesting bento box style design. It’s usually designed in a grid, for example 3×3, 4×4 or other configurations, and then making it visually interesting by being creative with the block sizes while conforming with the underlying grid configuration.
In this post, I will be talking about how the trend got started, then show some creative examples of applying the bento box content UI in web design. Lets get into it.
How it all started
Many believed that the trend was inspired from the Apple promotional videos in the where they show a grid view of specs and features shown below. It was unique to present the boring specs in a visually interesting grid style with variety of visual and typography application. Below is the example I screenshot from the recent Apple Mac promotional video.
However some might also argue that the true origin could be coming from Microsoft when they introduced the Metro design language system when they unveiled Windows Phone 7. Be it who was the true inspirer, it definitely sparked many designers around the world to create bento box style design.
Bento box design examples
Apple iPhone 14 Pro
Apple continues to use this bento box design in the recent product offerings. In the iPhone 14 Pro landing page, you will see high level features introduction presented in this way with great variety of visual treatment to keep things interesting. While having different visual treatments, the content are not clashing with each other due to the effectiveness in using size and gradient text to guide user’s eye.
Bolt also used bento box to convey product offerings and features at a glance to give visitors high level of what it can do and then leading them to the video tiles at the end. Bolt used a more consistent visual approach to each of the tiles to keep the content easier to scan. It’s a great use to communicate features and lead them to view more at the end!
Similarly, the designers from Linear used bento box design to introduce the feature with the sleek dark bento style. I like how it can be configured to have the text content on the top or below the image.
Chronicle is a visually stunning presentation maker tool. It used a more free form bento box style to communicate many examples of what you can create with the tool in a small available space. It makes a lot of sense to use this style here because it’s exactly what user can create with it.
Developers agency The Craftsmen used bento box style predominantly to err.. craft their website. It’s quite of a visual treat scrolling their website, revealing their menus, work and even contact form at the bottom of the page. It almost made me think that “thinking inside a box” is not that bad after all.
Nev Flynn, a developer and product designer from Ireland, spotted a bento box style in the home page. He used it to effectively segregate different content like a works, links to social media, map, his words of wisdom, and even a block to toggle light or dark mode. Bento box style certainly a refreshing way to present who you are!
Similar to Nev, Iconwerk used bento box style to showcase their best icon designs. Each of the content boxes are kept very minimal so that when putting all of them together, it will not feel busy. Certainly Iconwerk did a marvellous job at this.
One of my recent favourite portfolio site, Traf used bento box to layout his portfolio works in a sleek dark themed design. Clicking to each work like the Icons, you will see more grid inspired layout designs. Truly inspirational!
Bento is one of the recently popular “Linktree” style website for anyone to create your own personal page. As the name suggested, it used grid to form the content blocks that formed the bento box UI design. You can be creative with forming the blocks with different sizes and emphasis.
Get started with designing in grid
So above are some of the good examples of bento box UI design. As I mentioned above, this UI style can be achieved by layout out a grid system in your design tool. Framer in particular as a specific grid content configuration that you can use right away. It also can be achieve with CSS too! Below are some links to learn about CSS grid:
- Web.dev’s grid tutorial
- Follow this Tweet thread by Alamin to learn CSS grid visually
Credits and more
I also would like to credit @hckmstrrahul and @hellomuller for their Tweet on this visual trend that inspired me to write this article. And if you want to look for more examples, head on to One Page Love’s Bento tagged web designs and Grid websites in Godly.