Made in Framer: Bento Box Design Style
In this article, I’ll introduce the Bento box design style that has gained recent popularity and share how I easily implemented this style using Framer. The first part will explain the evolution of the Bento box design system and its advantages. The second part will detail how I applied it in designing our company’s site and the ways in which Framer facilitated the process.
The Bento box design style, observed on websites like Apple, Bolt, and Chronicle, is inspired by the traditional Japanese bento box used for single-portion meals. The term ‘bento’ originates from the Chinese term ‘biandang,’ which means ‘suitable.’ These boxes, prevalent in East Asian cultures, feature dividers that prevent the mixing of flavors among different dishes, preserving their individual characteristics.
Similar to physical bento boxes, the digital Bento box design style segments content into distinct compartments or sections on a webpage. These compartments organize and present information or features without overwhelming or blending into one another. This method aims to create a visually appealing and structured layout, enhancing user experience by providing clear and concise content presentation. The sizes of these digital compartments can vary, reflecting the diversity in sizes of dishes within a traditional bento box.
The shift from a mere food container to a design style is quite fascinating. While many credit Apple as a pioneer in this realm, the origins of the Bento box design style can be traced back to an earlier player — Microsoft’s Nokia Lumia device, which debuted in 2013.
Microsoft, through its Metro design language, introduced a unique design perspective that laid the foundation for what we now recognize as the Bento box design style. This innovative approach segmented content into visually distinct and organized compartments, reminiscent of the sections found in a Bento box used for food separation.
While Microsoft’s Lumia device pioneered this approach, the trend’s current association with Apple underscores the latter’s knack for timing and marketing, once again showcasing Apple’s ability to capitalize on emerging design styles at just the right moment.
So, what kind of features does the Bento Box design style give us an advantage:
- Partitioning
- Aesthetic presentation
- Hierarchy
In addition, it also brings the advantage of making simple information or text look more extraordinary. Content blocks of different sizes and designs are arranged in grids (think 3x3, 4x4 and beyond) to create visually stunning websites.
Now I will share with you how and in which way I used this design system while designing the company’s website.
First of all, I calculated the content count and designed a suitable grid system accordingly. The things I paid most attention to while making wireframes were gaps and hierarchy. It is important in this design style that the gaps between all boxes, bottom, top, right and left, are the same. Since I had content to highlight, I created a grid structure accordingly.
In order to make this system fully responsive in the framer, I chose to proceed by adding invisible frames to the designs. In this way, I created a grid system aligned in 4 different horizontal stacks. In order to create the perfect grid system, I ensured that the gaps and paddings of the contents in each box were of the same value. The frames and contents in this system are resized relatively within the Stack, but I fixed it by giving a maximum horizontal size so that the entire screen is not filled with huge content. I was able to successfully create this grid system entirely by using the resize features available in Framer.
To summarize, each box actually consists of squares that receive the fill command in resize, and in the phone size, this system is arranged vertically as single squares. One of the most important things to consider when creating this system in Framer is the correct use of resize, the contents can be controlled with the fill command and resized without any changes in the gap and padding. If you switch to a screen size where the gap and paddings need to be changed, then a breakpoint can be added, all contents are manually resized according to the screen size, and after making sure that there is no deterioration in optical alignment, the publish button can be easily pressed.
If you would like to visit our site and observe the experience we are trying to create, you can access the link here.
I think you are now ready to experience your own Bento box style, and thanks to Framer, it’s no-code!
If you want to be a part of the great team, check out our openings. At PlusMinusOne, we love to learn and share our experiences.
