Дизайн, который хочется съесть: что такое бенто-сетки и как они повышают конверсию

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

Рекомендуемые статьи