In the world of web design, new styles and trends continually emerge. One of the most interesting in recent times is the Bento Grid style, inspired by the Japanese food boxes called Bento.
This approach combines aesthetics and functionality, resulting in a consistently diverse outcome. Let’s discover how the Bento Grid style can radically change a website, taking as an example our new version of the Ex Machina website, where we have applied this approach.
Introduction to the Bento Grid Style
Imagine a Bento-type food box: each section is carefully organized and separated, creating a balanced and pleasant visual experience. Transferring this concept to web design, we have the Bento Grid style: a structured arrangement of content in modular sections, each with its own focus and purpose.
The Roots of the Bento Grid Style
Many believe that the trend of the Bento Grid style was inspired by Apple’s videos and website. In these videos, Apple presented the technical specifications of its products in a visually appealing grid, combining visual variety and typographic applications. This unique approach to presenting technical details, which could seem tedious, in an intriguing grid style, has aroused considerable interest.
On the other hand, some argue that the true origins of the Bento Grid style can be traced back to Microsoft’s Metro design with the launch of Windows Phone 7. This design system emphasized a clear and clean arrangement of contents, which can be considered a precursor of the Bento Grid style.
Modular Organization
In our new site for Ex Machina, we applied a modular grid that, in the desktop version, is applied to the entire width of the site, avoiding ugly and boring empty areas on the sides when viewing a site on a very large screen, as well as making better use of the available space. Until recently, creating this type of grid could be quite time-consuming technically despite the very simple concept; but recently some new technologies, which have become very common, allow for easy creation of all types of grids.
In the Bento Grid style, the site is divided into modules or cells, each containing a design or content element. This modular structure brings order and clarity, facilitating navigation for the user.
In the Ex Machina site, we divided the various sections, organizing the texts so that they can be easily read or allowing the visitor to quickly scan the site and identify the area of interest.
Balance and Symmetry
Fundamental to this style is visual balance and symmetry. These elements contribute to creating a harmonious and aesthetically pleasing layout, improving the overall user experience.
In the Ex Machina site, not all boxes are squared; some are borderless, making the site lighter and more dynamic and also creating a concept of emptiness and fullness fundamental in design. Indeed, always “filling” everything is a mistake; elements must also “breathe,” leaving empty areas.
Interactivity and Dynamism
Each box of the Bento Grid can be interactive, functioning as a link, a button, or including videos or animations. This adds a level of engagement and dynamism to the site.
Clarity and Order
The Bento Grid design, at first glance, can give the opposite impression of its purpose, that of being overwhelmed by the amount of information on the page.
This happens because all elements are close together, making everything more compact. But this feeling disappears as soon as you start reading the contents; everything becomes clearer and more enjoyable, simple to enjoy.
Unique Aesthetics
The Bento Grid style, at first glance, might seem uncreative and repetitive over time, but it is exactly the opposite. Having solid foundations (the underlying grid) allows for very creative use of the boxes and to freely insert all the elements we want and that can help us better communicate the message we want to convey.
The result is that each site is truly different from the other; clearly, the basic grid style remains, but there will never be a site identical to another, as is increasingly happening in the world of web design, which now largely relies on ready-made templates, which inevitably make sites all clones of each other.
The Bento Grid Style is Suitable for Everything
The flexibility of the Bento Grid makes it suitable for all types of sites. It is widely used for portfolios, where each module can represent a different category of work, allowing for organized and detailed viewing. It works well for e-commerce, where the different modules can show product categories, promotions, and reviews, facilitating navigation and purchase. It is also excellent for news or blog sites, where each section can focus on a different topic or news category, organizing the content in an intuitive and accessible way.
Conclusion
The Bento Grid is not just a design trend; it is an approach that blends aesthetics and functionality in a unique and versatile format. If you want your site to stand out for clarity, beauty, and ease of use, the Bento Grid is a serious option to consider. With this style, you can offer visitors a memorable and pleasantly organized web experience.
You can visit Ex Machina’s site here, and by the way, the site you are seeing is also made with the Bento Grid!
EXM /creative creates brands or restyling existing brands, applying them to the web, social and all company communication. Stay in touch by signing up for our newsletter on LinkedIn, link at the bottom of the page.
