Концепция Bento в UI-дизайне

Дизайн включает в себя множество стилей и направлений как в подходах к проектированию, так и в визуале.

Термин пришел к нам из Японии, где словом «Bento» обозначалась коробочка с едой. Каждый ингредиент блюда находится в своем отделении, не смешиваясь с другими компонентами. Ячейки ланч бокса могут быть разного размера, чтобы вмещать в себя различные продукты. Так получается чистая композиция с красотой каждого элемента как по-отдельности, так и в целостном Bento-боксе.

В UX/UI-дизайне Bento не представляет самостоятельный стиль, а является подходом к представлению информации. Структура и концепция отдельных компонентов единого целого переносится в интерфейс при помощи сеток и карточек характерной формы. Концепция Bento стала популярна благодаря логике размещения контента и упорядоченности, которая создает простой и понятный дизайн.

Bento не подойдет для сайтов с большим количеством разнородной информации. Дизайн более уместен для продуктов с равнозначным контентом. Например:

Равномерное распределение контента

Подобно японским ланч боксам в дизайне Bento, каждому элементу интерфейса отдается свое место. За счет этого создается четко-структурированное пространство, где контент грамотно организован: в одном блоке может находится только один ответ на один вопрос или одна функция. Таким образом, снижается когнитивная нагрузка и улучшается удобство пользования.

Четкая структура

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

Визуальная иерархия

Помещение контента в ячейки помогает отделять главную информацию от второстепенной. Распределяя контент между элементами, дизайнер может создать систему, где информация представлена в соответствии с ее значимостью. Наиболее важные моменты можно выделить при помощи размера, цвета, анимации и графики. Например, самая большая ячейка – самый важный контент.

Простая навигация

В понятной структуре Bento дизайна легко ориентироваться и просто найти необходимый контент – это работает на улучшение опыта пользования. Такие интерфейсы интуитивно понятны и не требуют долгого обучения.

Характерные элементы визуала

Эстетику Bento легко отличить от других тенденций благодаря определенным визуальным элементам. Квадраты и прямоугольники с закругленными углами являются характерной чертой Bento и вдохновляются формой отделений японских боксов для еды. Чистые и яркие цвета добавляют разнообразие однотипным элементам.

Баланс в дизайне

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

1. Не перегружает интерфейс

Основная характеристика Bento дизайна – четкая структура, которая помогает поддерживать визуальный порядок. Простая и лаконичная форма исполнения не требует активных дополнений, которые перетягивают внимание пользователя на себя. Bento может работать с любыми стилями, но тяготеет к минимализму, что положительно влияет на опыт пользования: свободный от множества деталей интерфейс снижает когнитивную нагрузку.

2. Легко адаптируется

В современном дизайне интерфейсы должны просто использоваться и привлекательно выглядеть на любых устройствах: компьютеры, планшеты, мобильные телефоны. Благодаря структуре и логике размещения элементов, Bento дизайн легко адаптируется под разные размеры экрана с сохранением эстетики, функциональности и удобства.

3. Рассказывает историю

При помощи структуры Bento можно рассказывать историю, где каждая ячейка становится главой повествования. Четкая организация элементов позволяет вести визуальный рассказ в логичной последовательности. Так пользователь переходит от карточки к карточке подобно страницам в книге, что создает запоминающийся опыт.

4. Сочетается со многими стилями

Несмотря на то, что концепция Bento имеет свои визуальные проявления (закругленные углы у прямоугольников), она легко подстраивается под любой стиль. Вы можете обращаться к этой тенденции, когда работаете в брутализме, минимализме, максимализме, 3D-дизайне и других направлениях. Bento хорошо работает с разным визуалом.

5. Вовлекает пользователей

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

6. Улучшает опыт пользования

Эстетика Bento активно используется многими известными компаниями. Например, интерфейсы Apple представляют пример Bento дизайна. Частое использование этой тенденции в современных сайтах дает возможность пользователям быстро ориентироваться в новых продуктах с похожим визуалом. Логичная структура, простота и четкая организация контента позволяют человеку легко ориентироваться в интерфейсе, что улучшает опыт пользования. Система  «один элемент – одна функция» дает возможность пользователю быстро добраться до нужной информации.

1. Однообразие и монотонный ритм

Повторяющиеся формы дизайна Bento легко запоминаются. Однако есть вероятность, что пользователи будут воспринимать разные дизайны с похожей структурой как однообразные и скучные. Ряды однотипных блоков также могут отрицательно влиять на взаимодействие. Чтобы добавить динамики в интерфейс, нужно использовать акценты (цвет, размер, анимация), которые продемонстрируют индивидуальный характер продукта.

2. Риск избыточного разделения контента

Обращаясь к эстетике Bento, нужно помнить про баланс. При разделении контента на фрагменты есть риск затруднить ориентацию пользователя в интерфейсе и негативно повлиять на взаимодействие множеством разных карточек. Помните про отделение главного от второстепенного.

3. Ограниченное пространство

Концепция Bento подразумевает использование контента в элементах. Не всегда информацию удается уместить в конкретный блок, и дизайнеру приходится отбирать материал. Действие в ограниченном пространстве ведет к избирательному подходу и отбору контента под конкретные параметры выделенного элемента. Это осложняет работу дизайнеру, который тратит больше времени на отбор информации и размещения ее в карточках.

Определение контента

Разделите контент на фрагменты и определите ключевые функции, ранжируя их по важности. Разбейте сегменты по приоритетам, подумайте, что хотите поместить в начале интерфейса, а что стоит добавить на последние страницы. Проанализируйте соотношение форматов контента: больше текста или изображений,видео? Это поможет грамотно построить композицию блоков и определить, как продемонстрировать продукт и услуги в наиболее выгодном свете.

Создание макета сетки

В основе Bento дизайна лежит строгая структура, поэтому сетка должна быть тщательно продумана. В Bento используются квадратные или прямоугольные ячейки, другие формы не допускаются. Похожие друг на друга блоки создают ощущение единого целого, что работает на идею гармоничного дизайна. Карточки могут быть разного размера, но они должны поддерживать согласованность дизайна. Это поможет легче ориентироваться в интерфейсе.

Размещение контента

После анализа, отбора контента и построения сетки вы можете приступить к наполнению ячеек. Помните: важно не заполнить все карточки, а создать гармоничную композицию, в которой пользователю будет удобно ориентироваться. Сочетайте форматы контента в ячейках, стоящих рядом, чтобы не создавать монотонность. Для добавления динамики можно поиграть со шрифтом, цветом и графикой.

Установление визуальной иерархии

Отделить главное от второстепенного можно при помощи создания акцентов. В случае с Bento дизайном это размер ячеек: чем крупнее ячейка, тем важнее информация. Можно использовать цвет: яркие, насыщенные, контрастные к фону тона привлекут внимание пользователей к контенту. Типографика – это еще один способ добавить акцент для текстового контента. Графика, которая указывает на определенную ячейку, также служит акцентом. В Bento дизайне акценты важны, чтобы добавить движение в статичную и однотипную сетку прямоугольников.

Закругление углов элементов

Одна из особенностей Bento дизайна – закругленные углы карточек, которые помогают визуально разделять ячейки. Обратите внимание, что уровень скругления углов должен быть одинаковым у всех элементов. Конкретного числового значения здесь нет; ищите наиболее гармоничное решение для вашего дизайна.

Группировка ячеек

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

Доступность

При создании каждого дизайна нужно помнить о доступности: текстовый контент должен легко читаться, изображения и видео должны быть в хорошем качестве. Необходимо проверить на контрастность, чтобы каждому пользователю было комфортно взаимодействовать с интерфейсом.

Initiate

Придерживайтесь описанных выше принципов и избегайте распространенных ошибок, чтобы выигрышно продемонстрировать товар на вашем сайте.

Простые и лаконичные формы ячеек Bento сочетаются с нетривиальной композицией и акцентными цветами, которые добавляют динамику дизайну.

Red Basset

Бесплатная платформа для прослушивания подкастов, где каталог выполнен в эстетике Bento дизайна. Размещение обложек подкастов удобно для поиска, ячейки разделены по тематикам, что дополнительно облегчает задачу аудитории.

Сбер Класс

Простой и понятный сайт, где закругленные углы карточек поддерживают дружелюбную атмосферу интерфейса. В данном случае комбинируются ячейки разных размеров и с разной ориентацией: горизонтальные и вертикальные блоки создают ритм. Лаконичные формы сочетаются с градиентными заливками и насыщенными цветами, что поддерживает баланс.

Be relax

В этом проекте эстетика Bento поддерживает спокойную атмосферу, располагающую к отдыху и расслаблению. Приглушенные тона, округлые формы блоков настраивают пользователя на нужный лад, а использование карточек разных размеров разбавляет однотипность.

Easy Shop

Пример обращения к эстетике Bento для создания маркетплейса по продаже товаров. Простота и легкость взаимодействия с интерфейсом в сочетании с понятной структурой сделают процесс покупки приятным для покупателей.

Абсолют Страхование

Эстетика Bento гармонично вписывается в визуальную концепцию сайта страховой компании. Простые геометрические формы и нейтральный фон сочетаются с яркими иллюстрациями, которые разбавляют единое пространство. Карточки представляют категории, внутри которых существует разделение на более мелкие блоки. В такой структуре пользователю будет легко разобраться и найти необходимую информацию.

Эстетика Bento плотно закрепила свои позиции в дизайне. Логичность и удобство взаимодействия в сочетании с лаконизмом дают возможность интегрировать Bento в интерфейс в любом стиле. Придерживаясь рекомендаций, описанных в этой статье, Bento может стать подходящим решением для вашего цифрового продукта.