Bento Grids — бібліотека дизайн-сіток
Про Bento Grids
У світі веб дизайну та розробки все більше і більше уваги приділяється створенню адаптивних і відгучних інтерфейсів. Для досягнення гармонійного розташування елементів на вебсторінці та забезпечення їх зручного відображення на різних пристроях необхідно використовувати ефективні інструменти. Один із таких інструментів — бібліотека дизайн-сіток Bento Grids. Основна ідея bento полягає в тому, щоб представити ключові продукти у дуже наочний і зручний для споживання спосіб. Макети Bento чудово підходять для демонстрації ідентичності бренду, узагальнення характеристик продукту та багато іншого.
Отже, Bento Grids — колекція макетів на основі плиток, розроблена для забезпечення процесу створення адаптивних інтерфейсів. Вона надає набір простих і гнучких сіток, які дозволяють розробникам легко керувати розміщенням елементів на сторінці та адаптувати їх до різних розмірів екрана. Також сітки можна відфільтрувати за темами: світлою та темною, а також за напрямом, графічний та вебдизайн.
Особливості Bento Grids
- Простий інтерфейс: бібліотека надає зручні, вже готові набори дизайн сіток, які легко застосовувати до елементів розмітки. Це прискорює роботу дизайнерів і прискорює процес створення адаптивних інтерфейсів.
- Налаштування сіток: Bento Grids пропонує широкий вибір опцій для налаштувань сіток, включаючи кількість колонок, відступи між ними, а також опції для розміщення елементів усередині колонки. Це дозволяє адаптувати сітку до різних потреб дизайну та контенту.
- Адаптивність: бібліотека демонструє адаптивні інтерфейси, які мають гарний вигляд на різних пристроях, включаючи комп'ютери, планшети та мобільні пристрої. За допомогою медіазапитів і адаптивності плиток можна легко змінити поведінку плитки в залежності від ширини екрана.
- Різні види дизайн сіток: Bento Grids пропонує кілька варіантів систем, включаючи системи з фіксованими колонками та системи з автоматичною адаптацією колонок. Це дозволяє обрати найбільш відповідну сітку для конкретного проєкту та його вимог.
- Підтримка інтерактивних елементів: програма дозволяє використовувати інтерактивні елементи у сітках, на кшталт, кнопок, карток та панелей, що сприяє створенню ефектних і функціональних інтерфейсів.
Приклади сіток у Bento Grids
Apple iPhone 14 Pro
Apple продовжує використовувати бенто дизайн у своїх останніх презентаціях продуктів. На головній сторінці iPhone 14 Pro ви побачите введення у нові функції оновленого гаджета, представлене великою різноманітністю візуальних засобів. Попри, різноманітну візуальну обробку, вміст не конфліктує один з одним завдяки ефективності використання розміру та градієнтного тексту.
Bolt
Bolt також використовував бенто бокс, щоб охопити всі пропозиції й функції на одному екрані, а потім перевести їх до відеоплиток у кінці. Bolt використав більш узгоджений візуальний підхід до кожної плитки, щоб полегшити сканування вмісту. Це чудовий спосіб інформування, а також змотивувати переглянути більше в кінці!
Linear
Подібним чином дизайнери з Linear використали бенто дизайн, щоб представити функцію у гладкому темному стилі. Круто, що його, можна налаштувати так, щоб текстовий вміст знаходився вгорі або під зображенням.
Chronicle
Chronicle — це чудовий інструмент для створення презентацій. Він використовує більш вільний стиль для свого бенто боксу, щоб поєднати одразу багато прикладів у одному невеликому просторі.
The Craftsmen
Сайт The Craftsmen майже повністю побудований на бенто боксах. І попри це, його дуже приємно скролити, відкривати меню, і навіть заповнювати контактну форму внизу сторінки!. Це майже змусило подумати, що «мислити всередині коробки» не так вже й погано.
Nev Flynn
Nev Flynn, розробник і дизайнер продуктів з Ірландії, розмістив бенто бокс безпосередньо на домашній сторінці. Він використовував його для ефективного розділення різного вмісту, наприклад творів, посилань на соціальні мережі, карти, інсайтів і навіть блоку для перемикання між світлим і темним режимами.
Iconwerk
Iconwerk використовують бенто стиль, подібно до Nev, для того, щоб продемонструвати свої найкращі дизайни іконок.
Truf
Один із найулюбленіших сайтів портфоліо, Traf використовує бенто бокс, щоб розмістити свої роботи в портфоліо, підкреслюючи елегантним темним дизайном. Натиснувши на кожну роботу, ви побачите більше дизайнів, натхненних сіткою.
Bento
Bento — один з останніх найпопулярніших сайтів у стилі «Linktree», на якому кожен може створити особисту сторінку. Як випливає з назви, вони використовували сітку для формування блоків вмісту, які сформували дизайн самого інтерфейсу користувача. Ви можете експериментувати, формуючи блоки з різними розмірами та акцентами.
💬 Дизайн-чат