Как делать презентации в стиле Apple и при чем тут японские ланч-боксы?
Перевел для вас статью Луизы Норт о том, откуда взялся дизайн-тренд Bento UI, что сделало его популярным и как делать интерфейсы в таком стиле.
Очевидно, что новый стиль - Bento UI становится одним из главных трендов в дизайне (советую чекнуть сайт Bento Grids, с примерами применения Bento UI). В последнее время Dribbble и Behance заполонили интерфейсы, составленные из квадратных и прямоугольных карточек со скругленными углами. Луиза Норт помогает нам разобраться с новой тенденцией и дает советы которые помогут начать творить в новом стиле. Далее текст от лица автора.
Термин "Bento Box" появился в Японии. Изначально под ним подразумевалось блюдо, разделенное на составные части и упакованное в коробку. Однако в мире дизайна Bento Box - это тренд, который оказывает огромное влияние на то, как мы разрабатываем пользовательские интерфейсы.
Тренд Bento Box существует уже некоторое время, но только в последние год или два он набрал обороты. Стиль и вправду хорош: все по полочкам и огромное количество вариантов компоновки.
Как и в случае со многими тенденциями в дизайне, его происхождение оспаривается. Некоторые говорят, что Bento UI появился благодаря Apple, которая использовала его для своих элементов интерфейса. Другие отмечают, что Metro UI от Microsoft фактически представлял собой Bento UI.
Что такое Bento UI?
Bento UI это очень простой способ структурирования дизайна. Он прост и эффективен, а следовательно, пользуется популярностью как среди дизайнеров, так и среди пользователей.
Главным отличием Bento UI является то, что он хорошо работает для небольших прямоугольных макетов, что делает его идеальным вариантом для мобильных приложений, оформления презентаций и сайтов. Ну и большинство дашбордов представляют собой классический Bento Box.
Чем еще хорош дизайн в стиле Bento
Bento UI хорош для всех: дизайнеров, разработчиков и пользователей.
- Прост в проектировании и отрисовке: позволяет легко создавать адаптивные макеты для разных устройств. Адаптировать прямоугольники под разные разрешения обычно не вызывает особых сложностей.
- Помогает управлять вниманием пользователя: легко организовать контент в визуально привлекательную иерархию. Вот тут как раз размер имеет значение. Также управлять вниманием в бенто-сетке можно и при помощи цвета.
- Знаком пользователям: С внедрением Bento UI такими монстрами, как Apple и Microsoft, этот стиль стал знаком и понятен для большинства пользователей.
Является ли Bento всего лишь еще одним дизайнерским трендом?
Как и в случае с любым визуальным трендом, то, что сегодня выглядит современным и инновационным, со временем становится устаревшим — такова природа дизайнерских тенденций. Забугорные эксперты по дизайну утверждают, что Bento UI уже достиг пика популярности, и единственный путь дальше - это движение вниз.
Но, например, Apple очень медленно развивает свой UI дизайн. А Bento является основным компонентом macOS, IPadOS, iOS и нового Vision Pro, и скорее всего, он будет использоваться и влиять на дизайн еще долгое время.
Более того, основные веб-технологии эволюционировали, чтобы сделать разработку интерфейса в стиле Bento проще. Там, где раньше разработчики сталкивались с трудностями при создании намного более простых макетов интерфейса в стиле кирпичной кладки, теперь с помощью CSS Grid делать интерфейсы в стиле Bento стало так же просто, как любую другую сетку.
Как начать проектировать в стиле Bento
Бенто работает лучше всего, когда вы разбиваете содержимое на небольшие кусочки - котлету в один отдел, макарошки в другой. Как только вы это сделаете, приступить к работе будет проще:
- Начните с сетки — Bento UI работает по строгой системе. Каждая ячейка в сетке должна быть прямоугольной.
- Распределите содержимое по ячейкам — вставьте содержимое в разные ячейки.
Создайте иерархию для управления вниманием. Управлять вниманием можно при помощи размеров блоков, изображений и цвета.
Не забудьте закруглить углы. Закругленные углы ячеек помогают отличить их друг от друга, и это ключевая составляющая эстетики Bento Box.
Сгруппируйте связанный контент — расположите ячейки таким образом, чтобы связанный контент находился в непосредственной близости. Работает «Теория близости».
Подойдет ли Bento для вашего проекта?
Bento крайне универсальный стиль и отлично подходит для презентации продуктов, создания дашбордов и лендингов, а также мобильных приложений.
Простой способ примерить бенто к своей тематике - зайти на Tilda Publishing и посмотреть примеры. Сейчас огромное количество лендингов используют блоки в стили Bento или полностью собраны в таком стиле.
Если понравилось - вот наш телгарм-канал Skobeev Digital. Тут пишем про диджитал, нейросети и маркетинг. Вот, например, Большой о трендах на 2024 год от Trendhunter.
презентации apple - как отдельный вид искусства) смотреть их одно удовольствие. как по мне бенто очень даже круто справляется со своей задачей
Согласен, реально кайф.
Тот случай когда термин "вкусно" в отношении дизайна оправдан
Бенто бокс из Midjourney)))
Самый лучший пример, как по мне
мужик у вас мегаотвратный вышел кстати, я чуть не блеванул
😆😆😆
ммм, точно
Тот случай, когда еще помнишь приложение Bento для Mac родом из 2008-х.
Всё новое, хорошо забытое старое.
Кайф...👍🏻
Финансовая сторона презентаций в стиле Apple - это вложение в успех и впечатление.
Я бы сказал в больше части всей маркетинговой стратегии Apple
Крутой и уникальный концепт. Думаю проживет долго
Скрин в комменте Невероятного Блондина тому подтверждение)
Пушка !
ну стиль просто огонь ,выглядит премиально
Стиль-то норм
Но мне не нравится, когда необдуманно или целенаправленно, как у эпол, ломают или не создают нормальную иерархию информации в стремлении ебнуть по восприятию юзера чтоб аж глаза разбежались в шоке от того, сколько много тут всего разного и красивого, а владелец глаз побежал в очередь за новым айфончиком. Это как инфографика, на которую с важным видом все кивают, но тяжело понять че там вообще написано и изображено и как это все в своей голове сводить в кучу, а никто даже и не пытается.
Согласен. Это же по сути инструмент, которым нужно уметь работать. Просто распилить контент на квадратики не получится. Придется еще и подумать.
Зумеры изобрели виджеты.
Кого-то майки могли "допилить" свой Metro UI до чего-то красивого и удобного, но как обычно пришла корпорация Apple и сделала это.
стиль крутой ,мне очень нравится ,выглядит структурировано и стилево
да. его даже проектировать приятно 😆. Успокаивает
ну красота же
Комментарий удален автором поста