Bento Grid в UI дизайне: особенности японского стиля
Упорядоченность и системность стиля Bento сделала его настоящим трендом. А, благодаря простой и понятной структуре, универсальному и довольно легкому применению, он останется в ТОПе надолго.
Кто бы мог подумать, но японцы оказались законодателями одного из стилей UI дизайна. Хорошо знакомые любителям японской кухни боксы для еды стали прототипом для популярного Bento Grid style. Он отличается от других именно тем, что мы все привыкли видеть в Японии — рациональностью и упорядоченностью. Можно с уверенностью сказать, что этот довольно простой и понятный стиль является не просто дизайнерским приемом, а настоящей философией жизни, где для всего есть свое место и царит гармония и порядок.
В чем секрет популярности
Так или иначе, все что нас окружает служит вдохновением для творчества и поэтому часто находит свое отражение в дизайне. К тому же, вторая эвристика юзабилити учит нас, что пользователям нравится находить в дизайне отражение реального, хорошо знакомого им окружающего мира. Возможно, именно в этом секрет популярности Bento Grid.
Дизайн в стиле бенто. Источник — Dribbble
С другой стороны, многие приписывают успех Bento законодателю IT стиля, компании-гиганту Apple. На основе Bento Grid построены рекламные ролики и презентации большинства их продуктов: Iphone 14 Pro и 15 Pro, MacBook M2 и многие другие… Всё, что начинает использовать Apple, автоматически становится популярным и трендовым, ведь на них равняется весь цифровой мир. Тем более, что Microsoft тоже оценил преимущества этого стиля и проторил ему дорожку в мир дизайна. Metro UI от Microsoft, по сути, является ярким примером Bento стиля. У большинства панель задач главного экрана OS Windows ассоциируется с упорядоченной системой японских lunch-боксов.
Bento Grid для Iphone 15 Pro. Источник — Figma Community
Кстати, в нашем Instagram недавно вышла визуальная версия рассказа про Bento Grid, где мы рассмотрели его плюсы и минусы. Ну а кто любит почитать, устраивайтесь поудобнее. О преимуществах и недостатках Bento дизайна расскажем прямо сейчас.
Плюсы и минусы
Для Bento крайне важны структура и иерархия. В этом и заключаются его сильные стороны. Четкая разбивка всего контента на прямоугольные блоки с закругленными углами делает дизайн очень практичным и узнаваемым. Особенно такая структура по вкусу разработчикам. Технология CSS Grid помогает им легко воплощать в жизнь подобные дизайны.
Благодаря простой структуры стиля Bento довольно легко легко проектировать блоки для разных устройств. Отзывы студентов нашей Академии показывают, насколько это важно и как помогает профессионально дизайнить с первых дней работы, а в последствии находить крутую работу. Адаптинвный дизайн — это в целом очень и очень важно. На курсах Пижамной Академии мы уделяем ему огромное внимание и учим, как делать адаптивы быстро, просто для дизайнеров и разработчиков, но при этом удобно для пользователей.
Bento Grid для адаптивов. Источник — Dribbble
Bento Grid использует хорошо узнаваемые паттерны и опыт мировых брендов. Поэтому для пользователей он будет знаком и понятен. Им не придется теряться в трех соснах в поисках нужной информации. В то же время, такой дизайн — не просто картотека с папками контента. Он отвечает всем требованиям современного стиля и выглядит актуально и трендово. Благодаря этому и продукт, который вы представляете, будет восприниматься положительно и вызывать доверие.
Bento Grid и его универсальность. Источник — Dribbble
Выход в балансе
Но, как всегда, есть и капля дегтя в бочке мёда. Прямоугольные блоки съедают большую часть пространства сайта и количество контента приходится строго ограничивать. Чрезмерная сегментация создает впечатление нагроможденности и пользователям может не хватать легкости и воздушности, к которым нас так приучил современный минимализм.
Конечно же, с этими недостатками можно успешно бороться. Ведь секрет продуманного и эффективного проекта в балансе. И это, как нельзя лучше, отражает японскую философию жизни.
Соответствие Bento Grid и воздушность минимализма. Источник — Kuldar
Итак, мы узнали о происхождении, а также огромных преимуществах и некоторых недостатках использования Bento Grid в UI дизайне. Но решение воплощать или нет его в своей практике остается за вами. В любом случае мы уверены, что теперь вы точно узнаете Bento стиль, когда встретите его на просторах Интернета.
Пожалуйста, поделись этим материалом!
Мы потратили много часов на его создание, а тебе нужно всего 10 секунд, чтобы поделиться им!
