Бенто: всему своё место
Идея для этой статьи пришла мне в азиатском кафе, когда я заказала бенто 🍱
Бенто в его первоначальном значении
Бенто – это прямоугольная тарелка с мясом или рыбой, гарниром, соусом и закусками.
Исторически это японский ланч-бокс с ячейками для разделения блюд. Японские мамы собирают в такие контейнеры еду своим детям в садик и школу, а офисные работники покупают их в ближайшем супермаркете на обед.
Бенто как часть дизайна
Стоит уточнить, что бенто в дизайне это не отдельный стиль, а способ представления информации в виде прямоугольных и квадратных ячеек (чаще со скругленными углами).
Можно сказать, что бенто — это некая комбинация сеток (grids) и карточек (cards).
От сеток бенто заимствует упорядоченность. Эта упорядоченность может быть как в виде столбцов, так и в виде строк. Также существуют смешанные варианты, но на практике они используются реже, так как менее удобны для вёрстки, масштабирования и адаптива. А хороший дизайнер всегда думает о том, как будет верстаться и развиваться проект 🙂
От карточек же бенто берёт идею о том, что одна ячейка содержит одну смысловую единицу. Например, карточка в интернет-магазине содержит информацию об одном товаре.
Хотя бенто и позволяет представить контент более структурировано, при этом может пострадать иерархия. Выстраивать её только за счет размера ячеек может быть недостаточно и нужно дополнительно управлять вниманием пользователя через цвет, типографику и иллюстрации.
Геометрическая основа бенто довольно универсальна – её можно подружить с любыми стилями (минимализм, 3d, необрутализм и так далее).
В каких случаях стоит рассмотреть бенто для своего проекта?
Бенто неплохо впишется на сайте с большим количеством одинаковой по значимости информации, если конкретнее, то:
- для перечисления фич и характеристик товара (пример из презентации Apple на превьюшке статьи);
- для представления галереи или превью статей с названиями;
- для оформления небольшого количества карточек товаров (как правило, не на крупных маркетплейсах);
- для оформления дашбордов.
Не подойдет бенто для контента, которому требуется строгая иерархия.
📌 Дизайн — это не набор строгих правил, да и в правилах могут быть исключения. Если в вашем проекте можно уместно вписать бенто, то используйте его. Главное, не делать бенто просто потому что это тренд.
Как cпроектировать дизайн с бенто?
Тема может показаться довольно простой, но хороший план никогда не будет лишним:
- соберите информацию, заготовленную для будущего проекта;
- разбейте её на логические блоки;
- создайте пустые блоки, подбирая их размер и расположение;
- распределите информацию по ячейкам;
- не забывайте группировать ячейки по смыслу и придерживаться иерархии;
- включайте фантазию или действуйте по ТЗ, украшайте цветом, типографикой и иллюстрациями то, что получилось в пунктах выше.
Примеры
Больше примеров можно увидеть на dribbble или на bentogrids.com, а ещё я собрала список ссылок с некоторыми реальными представителями бенто:
- яркий и красочный сайт Procreate c бенто ячейками: https://procreate.com/
- великолепное сочетание бенто ячеек с интерактивной анимацией: https://diagram.com/
- сервис для создания персональной страницы, основанный на бенто блоках: https://bento.me/en/home
- дерзкий Bolt со своей кислотной палитрой и ячейками бенто: https://www.bolt.com/
На мой взгляд, бенто очень удобный способ упростить сложное, а не мимолетный тренд. Бенто довольно универсален и при правильном применении может стать отличным решением.
Спасибо за внимание к моей первой статье на vc! 💙
Давайте обсудим её в комментариях. Что вы думаете о бенто?
Поздравляю с первой статьей! Успехов!
Никита, спасибо за поддержку!
Бенто в дизайне — отличная находка
Абсолютно согласна! Спасибо за комментарий)
С адаптивом же гемор. Нет?
Делать адаптив для сайта с бенто ячейками относительно просто. Главное правильно настроить гибкость макета для разных экранов через медиа-запросы и использовать относительные единицы измерения)
Я думал, бенто - это тортики такие. Но красиво кстати)