Бенто: всему своё место

Идея для этой статьи пришла мне в азиатском кафе, когда я заказала бенто 🍱

Бенто – это прямоугольная тарелка с мясом или рыбой, гарниром, соусом и закусками.

Исторически это японский ланч-бокс с ячейками для разделения блюд. Японские мамы собирают в такие контейнеры еду своим детям в садик и школу, а офисные работники покупают их в ближайшем супермаркете на обед.

Стоит уточнить, что бенто в дизайне это не отдельный стиль, а способ представления информации в виде прямоугольных и квадратных ячеек (чаще со скругленными углами).

Можно сказать, что бенто — это некая комбинация сеток (grids) и карточек (cards).

От сеток бенто заимствует упорядоченность. Эта упорядоченность может быть как в виде столбцов, так и в виде строк. Также существуют смешанные варианты, но на практике они используются реже, так как менее удобны для вёрстки, масштабирования и адаптива. А хороший дизайнер всегда думает о том, как будет верстаться и развиваться проект 🙂

От карточек же бенто берёт идею о том, что одна ячейка содержит одну смысловую единицу. Например, карточка в интернет-магазине содержит информацию об одном товаре.

Хотя бенто и позволяет представить контент более структурировано, при этом может пострадать иерархия. Выстраивать её только за счет размера ячеек может быть недостаточно и нужно дополнительно управлять вниманием пользователя через цвет, типографику и иллюстрации.

Геометрическая основа бенто довольно универсальна – её можно подружить с любыми стилями (минимализм, 3d, необрутализм и так далее).

Бенто неплохо впишется на сайте с большим количеством одинаковой по значимости информации, если конкретнее, то:

• для перечисления фич и характеристик товара (пример из презентации Apple на превьюшке статьи);
• для представления галереи или превью статей с названиями;
• для оформления небольшого количества карточек товаров (как правило, не на крупных маркетплейсах);
• для оформления дашбордов.

Не подойдет бенто для контента, которому требуется строгая иерархия.

📌 Дизайн — это не набор строгих правил, да и в правилах могут быть исключения. Если в вашем проекте можно уместно вписать бенто, то используйте его. Главное, не делать бенто просто потому что это тренд.

Тема может показаться довольно простой, но хороший план никогда не будет лишним:

1. соберите информацию, заготовленную для будущего проекта;
2. разбейте её на логические блоки;
   
3. создайте пустые блоки, подбирая их размер и расположение;
   
4. распределите информацию по ячейкам;
   
5. не забывайте группировать ячейки по смыслу и придерживаться иерархии;
   
6. включайте фантазию или действуйте по ТЗ, украшайте цветом, типографикой и иллюстрациями то, что получилось в пунктах выше.
   

Больше примеров можно увидеть на dribbble или на bentogrids.com, а ещё я собрала список ссылок с некоторыми реальными представителями бенто:

• яркий и красочный сайт Procreate c бенто ячейками: https://procreate.com/
• великолепное сочетание бенто ячеек с интерактивной анимацией: https://diagram.com/
• сервис для создания персональной страницы, основанный на бенто блоках: https://bento.me/en/home
• дерзкий Bolt со своей кислотной палитрой и ячейками бенто: https://www.bolt.com/
  

На мой взгляд, бенто очень удобный способ упростить сложное, а не мимолетный тренд. Бенто довольно универсален и при правильном применении может стать отличным решением.

Спасибо за внимание к моей первой статье на vc! 💙

Давайте обсудим её в комментариях. Что вы думаете о бенто?