Как Tinkoff и Сбер экономят до 30 % времени верстки

Что такое Bento-layout и откуда он взялся

Bento-сетка — это «коробка» из равно- или кратноразмерных квадратов и прямоугольников, в которых живут виджеты: графики, карточки, кнопки. Идея впервые громко прозвучала на лендинге iPhone 14 Pro, а к 2025 году стала мейнстримом UI-трендов. Главная причина популярности — модульность: один раз нарисовал компонент и переиспользуешь его десятки раз.

Почему «тяжеловесы» взялись за Bento

По устным оценкам дизайнеров Tinkoff, озвученным на Product Design Meetup ’25, переход на Bento-модули сократил время прототипирования примерно на четверть.

Сбер (Nova Design System) перевёл корпоративные админ-панели и мобильные сервисы на плиточную структуру: готовые тайлы + Auto Layout уменьшают ручную работу с адаптивом.

Было / стало — сколько времени съедает сетка

Классический подход

1. Расставить 12 виджетов — около 40 минут: вручную накидать колонки, подогнать отступы.
2. Сделать адаптив desktop → tablet — ещё ~30 минут: продублировать артборд, перекроить сетку.

Bento-подход

1. Закинуть те же 12 виджетов — ~25 минут: drag-and-drop тайлов, поменять тексты.
2. Адаптив — один Auto Layout-фрейм, ~10 минут: меняем ширину контейнера, тайлы подстраиваются сами.

Итого: экономится примерно треть рабочего часа макетчика — около 30 % времени на каждый экран.

Где Bento-сетке становится тесно

Разместите
тендер бесплатно

Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.

Заполнить заявку 13333 тендера
проведено за восемь лет работы нашего сайта.

Текстовые простыниЕсли страница — один длинный лонгрид, плитки начинают рвать поток: читатель спотыкается на каждом стыке. Для «романов» лучше классический потоковый grid.

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

Ретро-браузеры (привет, IE 11)Там ещё здравствуют floats и таблицы. Без fallback на flex-grid ваши аккуратные плитки расползутся, как джелло на жаре.

Вывод

Bento-layout не волшебная палочка на все случаи, но в корпоративных дашбордах и «супер-приложениях» он работает как ускоритель: готовые плитки + чёткая сетка снимают рутину и освобождают дизайнеру время на идею, а разработчику — на логику.Попробуйте: сборка экрана закончится раньше, чем вы успеете допить свой второй эспрессо.