Про Bento Grids
У світі веб дизайну та розробки все більше і більше уваги приділяється створенню адаптивних і відгучних інтерфейсів. Для досягнення гармонійного розташування елементів на вебсторінці та забезпечення їх зручного відображення на різних пристроях необхідно використовувати ефективні інструменти. Один із таких інструментів — бібліотека дизайн-сіток Bento Grids. Основна ідея bento полягає в тому, щоб представити ключові продукти у дуже наочний і зручний для споживання спосіб. Макети Bento чудово підходять для демонстрації ідентичності бренду, узагальнення характеристик продукту та багато іншого.
![](https://www.komarov.design/content/images/2023/05/--------------2023-05-26---17.13.45.png)
Отже, Bento Grids — колекція макетів на основі плиток, розроблена для забезпечення процесу створення адаптивних інтерфейсів. Вона надає набір простих і гнучких сіток, які дозволяють розробникам легко керувати розміщенням елементів на сторінці та адаптувати їх до різних розмірів екрана. Також сітки можна відфільтрувати за темами: світлою та темною, а також за напрямом, графічний та вебдизайн.
Особливості Bento Grids
- Простий інтерфейс: бібліотека надає зручні, вже готові набори дизайн сіток, які легко застосовувати до елементів розмітки. Це прискорює роботу дизайнерів і прискорює процес створення адаптивних інтерфейсів.
- Налаштування сіток: Bento Grids пропонує широкий вибір опцій для налаштувань сіток, включаючи кількість колонок, відступи між ними, а також опції для розміщення елементів усередині колонки. Це дозволяє адаптувати сітку до різних потреб дизайну та контенту.
- Адаптивність: бібліотека демонструє адаптивні інтерфейси, які мають гарний вигляд на різних пристроях, включаючи комп'ютери, планшети та мобільні пристрої. За допомогою медіазапитів і адаптивності плиток можна легко змінити поведінку плитки в залежності від ширини екрана.
- Різні види дизайн сіток: Bento Grids пропонує кілька варіантів систем, включаючи системи з фіксованими колонками та системи з автоматичною адаптацією колонок. Це дозволяє обрати найбільш відповідну сітку для конкретного проєкту та його вимог.
- Підтримка інтерактивних елементів: програма дозволяє використовувати інтерактивні елементи у сітках, на кшталт, кнопок, карток та панелей, що сприяє створенню ефектних і функціональних інтерфейсів.
Приклади сіток у Bento Grids
Apple iPhone 14 Pro
Apple продовжує використовувати бенто дизайн у своїх останніх презентаціях продуктів. На головній сторінці iPhone 14 Pro ви побачите введення у нові функції оновленого гаджета, представлене великою різноманітністю візуальних засобів. Попри, різноманітну візуальну обробку, вміст не конфліктує один з одним завдяки ефективності використання розміру та градієнтного тексту.
![](https://www.komarov.design/content/images/2023/05/image-115.png)
Bolt
Bolt також використовував бенто бокс, щоб охопити всі пропозиції й функції на одному екрані, а потім перевести їх до відеоплиток у кінці. Bolt використав більш узгоджений візуальний підхід до кожної плитки, щоб полегшити сканування вмісту. Це чудовий спосіб інформування, а також змотивувати переглянути більше в кінці!
![](https://www.komarov.design/content/images/2023/05/image-117.png)
Linear
Подібним чином дизайнери з Linear використали бенто дизайн, щоб представити функцію у гладкому темному стилі. Круто, що його, можна налаштувати так, щоб текстовий вміст знаходився вгорі або під зображенням.
![](https://www.komarov.design/content/images/2023/05/image-118.png)
Chronicle
Chronicle — це чудовий інструмент для створення презентацій. Він використовує більш вільний стиль для свого бенто боксу, щоб поєднати одразу багато прикладів у одному невеликому просторі.
![](https://www.komarov.design/content/images/2023/05/image-119.png)
The Craftsmen
Сайт The Craftsmen майже повністю побудований на бенто боксах. І попри це, його дуже приємно скролити, відкривати меню, і навіть заповнювати контактну форму внизу сторінки!. Це майже змусило подумати, що «мислити всередині коробки» не так вже й погано.
![](https://www.komarov.design/content/images/2023/05/image-120.png)
Nev Flynn
Nev Flynn, розробник і дизайнер продуктів з Ірландії, розмістив бенто бокс безпосередньо на домашній сторінці. Він використовував його для ефективного розділення різного вмісту, наприклад творів, посилань на соціальні мережі, карти, інсайтів і навіть блоку для перемикання між світлим і темним режимами.
![](https://www.komarov.design/content/images/2023/05/image-121.png)
Iconwerk
Iconwerk використовують бенто стиль, подібно до Nev, для того, щоб продемонструвати свої найкращі дизайни іконок.
![](https://www.komarov.design/content/images/2023/05/image-122.png)
Truf
Один із найулюбленіших сайтів портфоліо, Traf використовує бенто бокс, щоб розмістити свої роботи в портфоліо, підкреслюючи елегантним темним дизайном. Натиснувши на кожну роботу, ви побачите більше дизайнів, натхненних сіткою.
![](https://www.komarov.design/content/images/2023/05/image-123.png)
Bento
Bento — один з останніх найпопулярніших сайтів у стилі «Linktree», на якому кожен може створити особисту сторінку. Як випливає з назви, вони використовували сітку для формування блоків вмісту, які сформували дизайн самого інтерфейсу користувача. Ви можете експериментувати, формуючи блоки з різними розмірами та акцентами.
![](https://www.komarov.design/content/images/2023/05/image-124.png)
💬 Дизайн-чат