Вы когда-нибудь замечали, что на некоторые картинки в ленте соцсетей хочется смотреть бесконечно? Взгляд не мечется по изображению, а плавно скользит от одного элемента к другому, как по нотам. Информация усваивается мгновенно, а эстетика вызывает дофаминовый удар. Секрет этого гипноза – Bento Grid или бенто-сетка.
Речь не о скучной модульной сетке, а о целой философии «вкусной» подачи контента, позаимствованной у японских поваров. Давайте разберем тренд, который обрел популярность благодаря Apple, на атомы, и научимся делать такой же визуал во Flyvi!
Почему бенто – на пике хайпа?
Термин Bento Grid пришел в дизайнерский сленг отнюдь не из IT-стартапов. Его родина – японская кулинарная традиция. Обеденная коробка бенто – это искусство компактной организации обеда, который трудолюбивый японец берет с собой: рис отдельно, рыба отдельно, соус в своем углу. Все лежит в отдельных отсеках, но смотрится гармонично.
В цифровой дизайн принцип «всему свое место» перенесла компания Apple. Именно их презентационные слайды и карточки продуктов разнесли эстетику Bento по миру. Дизайнеры заметили, что сетка на основе разномасштабных закругленных прямоугольников без жестких отступов цепляет внимание на 40% лучше классических «кирпичных» раскладок. Кроме того, такой принцип организации пространства позволяет эффективней использовать место на макете, разместив на нем больше полезной информации.
Почему это стало трендом сейчас? Мы живем в эпоху клипового мышления. Пользователь больше не читает: он сканирует пространство. Бенто-сетка позволяет упаковать 5-6 смыслов в один визуал без риска вызвать мигрень.
Бенто – лучшее средство против визуального хаоса
Главное заблуждение тех, кто впервые работает с Bento Grid – думать, что бенто-сетка состоит из одинаковых квадратов. Это не так. Магия рождается из контраста пропорций.
Принцип «Плитки шоколада»
Вообразите, что ваш макет – это большая коробка, внутри которой лежат модули разного размера.
- Герой-блок. Занимает 50–60% площади. Это основное изображение или ваше УТП.
- Малые спутники. Чаще всего, это несколько блоков поменьше для фич и деталей.
- Акцентный подвал. Тонкая, вытянутая плашка для кнопки СТА или логотипа.
От витрины маркетплейса до сторис
У японского конструктора нет ограничений по жанрам использования. Дизайн в таком стиле одинаково хорошо презентует сложное ПО и продает кроссовки на Wb. Давайте разберем конкретные примеры использования бенто-сеток.
Дизайн для социальных сетей
Здесь бенто становится настоящим королем виральности. Забудьте о единственной фотографии с плашкой! Используйте сетку.
- Разбейте визуал на 3-4 блока
- В левый верхний угол добавьте заголовок на цветной подложке, справа – крупное фото продукта. Снизу узкой полосой укажите основное преимущество (иконка + короткий текст).
Такая инфографика всегда выглядит как иллюстрация из дорогого премиум-журнала. И никакой дешевой самодеятельности!
Карточки товаров
Правило «первого экрана» никто не отменял. Пользователь скроллит Wildberries или Ozon со скоростью света. Ваша задача – использовать бенто для того, чтобы карточка зацепила внимание и выделила вас на фоне конкурентов.
Для этого разместите на главной карточке фотографию не на весь холст, а в одном из блоков, а рядом дайте 2-3 бейджа с характеристиками. Это создаст иллюзию системности и технологичности, а общий стиль будет аккуратным. Поверьте, по такой карточке захочется кликнуть!
Баннеры для лендингов и сайтов
Шапка сайта (Hero Section) с бенто-сеткой превращается в интерфейс будущего. Вы не просто показываете картинку, вы показываете экосистему: фото, отзыв, кнопка CTA и график роста — все расфасовано по своим контейнерам с мягким скруглением (border-radius 16-24px).
Взгляд автоматически упирается в кнопку, пройдя по мостикам отступов.
Как не превратить стильный бенто в разрозненный винегрет
Фатальная ошибка при работе с Bento – выбрать оттенки так, что все блоки походят на лоскутное одеяло, сшитое неумелой хозяйкой. Чтобы сетка «зазвучала», нужно управлять цветом через правило «Одного лидера».
В бенто-сетке у оттенков – всего три роли:
- Фон-невидимка (60%). Самый светлый, пастельный или нейтральный оттенок. Часто это не чисто белый, а молочный (#F8F9FA) или теплый серый. Он заполняет всю подложку макета.
- Брендовый акцент (30%). Ваш фирменный цвет. Им заливается ровно один или два малых блока, создавая визуальный якорь.
- Темный рыцарь (10%). Самый глубокий оттенок для текста и иконок внутри блоков. Без него дизайн будет выглядеть размытым.
Не можете подобрать оттенки в разных блоках? Используйте монохромную схему. Возьмите один цвет и играйте его прозрачностью и насыщенностью. Допустим, синий блок на 100% яркости, соседний – тот же синий, но 20% прозрачности на белом фоне. Это выглядит аристократично и дорого.
Выбирай бенто во Flyvi!
Чтобы создать стильный макет с бенто-сеткой, не обязательно быть профессиональным дизайнером и часами корпеть над разметкой холста в сложных программах. Мы во Flyvi уже придумали все за вас! Зарегистрируйтесь в нашем редакторе, и дизайн топового уровня станет вашей реальностью.
- 60 000+ профессиональных макетов. Карточки товаров, обложки для сторис и видео, визуал для постов, визитки, афиши, открытки и многое другое (в том числе – и в популярном стиле бенто). Осталось только выбрать подходящий шаблон под свою задачу!
- Продвинутые инструменты для редактирования. Настраивайте стили, используйте маски и анимации, в один клик меняйте палитру, добавляйте свои изображения и дизайн–элементы: редактируйте шаблоны, как хотите, или создавайте свой дизайн с нуля.
- Мощнейшая ИИ-мастерская. Здесь мы собрали самые последние нейросетевые модели для обработки и генерации изображений, создания видео и написания текстов. Они прекрасно понимают русские промпты!
Бенто учит дизайнера не растекаться мыслью по холсту, а уважать контент. Каждый квадрат (или «суперэллипс», если мы говорим о свежем Apple-стиле) имеет границы. Как только вы научитесь дробить информацию на смысловые куски, ваши макеты начнут говорить на одном языке с аудиторией – быстро, ясно и красиво. И сделать это можно прямо сейчас.