Unpacking the Bento Grid Web Design Trend

A bento grid is a web design trend that is characterized by its use of a modular grid system to layout content. This has been happening for a while, more than 2 years, actually. Pinterest and Spotify uses for a few years.

It started with Microsoft’s Metro UI for Windows Phone and Zune HD. Microsoft’s Metro was inspired by architecture. It has pictograms in Metro stations but also an architectural style called De-Stijl. Metro had live tiles and started the minimalist/flat design that we have today. It was the first minimalist UI ever designed. Now even Spotify looks like the original Zune Desktop software.

Bento is a Metro with rounded corners. Although Zune HD and the Zune desktop software were beautiful. In fact I haven’t seen any Bento UI concept or implementation that even matches the Zune UI in beauty. It is simple and functional.

The problem is that minimalism is a sophisticated design implementation. So when the rest of Microsoft started to put in place the design they didn’t get it right.

Unpacking the Bento Grid Web Design Trend

I’m all for chasing trends, but this is rather niche. Bento grid shouldn’t be used if it isn’t already immediately clear what your product is. Like some tech startups, they should focus more on explaining what they’re doing rather than throwing all kinds of boxes at the visitor.

The worst of course is Windows 8. Which isn’t really MetroUI. It is in name, but lacks any of the philosophies that made Metro what it is. The Xbox 360 was okay and so was the Windows Phone. But Microsoft pushed it to every part of their products without proper vetting. Such as SharePoint and Office 365.

So when they invented it and utilized it in Windows Phone, Zune and Xbox, they did it right. But when they put it on Windows, they did it wrong. And that was most people’s introduction to Metro. Which is why you think that way. But I employed you to look at reviews of the original Zune HD and desktop software back then. It looks like it was designed today.

How to create visually-appealing websites.

Bento grids are a hot trend in web design. They offer a structured yet flexible way to organize website content and create visually appealing layouts.

• Content Planning. Before diving into design, plan your website’s content and identify the key sections you want to include.
• Grid Construction. Choose a grid system that suits your content. Popular options include symmetrical grids with equal-sized sections or asymmetrical grids with varied sizes.
• Content Placement. Allocate each content type (text, image, video) to its designated section within the grid.
• Visual Hierarchy. Use visual cues like size, color, and spacing to guide users’ attention towards the most important information.
• Responsiveness: Ensure your Bento grid layout adapts seamlessly to different screen sizes for optimal viewing on all devices.

I love the “Bento grid” design, but I have to try not to want to use it for everything. It works well for weather or certain science-oriented apps, and tech. IMO, this is good for websites with images/illustrations based on niches since it is easy to comprehend images or related stuff. But with written content, it can make us feel overwhelmed because of hierarchy and retention issues.