Більшість дизайнерів знайомі з адаптивним дизайном — макетом на основі колонок з фіксованими брейкпоінтами для всіх розмірів екранів. Однак ми можемо вийти за рамки жорсткої структури за допомогою сучасних CSS-макетів, створюючи гнучкі та динамічні дизайни, які плавно підлаштовуються під різні розміри екранів.
Дизайнери та розробники мають різні ментальні моделі при обговоренні макетів, особливо сітки, що призводить до багатьох непорозумінь у нашій співпраці.
Ця стаття не про ідеальну передачу (я все ще сумніваюся, що така річ має існувати), а про розуміння інструментів один одного та їхніх обмежень, щоб знайти спільну мову для розмови та співпраці.
Я хочу розповісти вам трохи про:
- Адаптивний дизайн на основі колонок проти сучасної CSS-верстки
- Розуміння CSS Flexbox як дизайнера
- Розуміння CSS Grid як дизайнера
- Брейкпоінти: Чи потрібні вони нам ще?
Традиційний дизайн на основі фреймворків з колонками
Давайте спочатку розберемося, з чого ми починаємо. Як дизайнер інтерфейсу, ви, швидше за все, більше знайомі з класичною модульною сіткою на основі стовпців, яка складається з колонок, відступів і полів, де ви розміщуєте свої елементи. Ця сітка слугує основою вашого дизайну, забезпечуючи структурований фреймворк.
Розуміння брейкпоінтів в класичних сіткових макетах
Суть цього підходу до адаптивного дизайну полягає в брейкпоінтах, які визначаються за допомогою медіа-запитів CSS і мають вирішальне значення для адаптації макета до різних розмірів екрану. Структура сайту динамічно підлаштовується в цих заздалегідь визначених точках: елементи можуть переставлятися, компактне навігаційне меню може розширюватися, а розмір тексту може змінюватися для покращення читабельності. Така гнучкість гарантує, що дизайн залишається функціональним і естетично привабливим на всіх пристроях.
Фреймворки
Для реалізації таких дизайнів популярними є CSS-фреймворки, такі як Bootstrap або Foundation, а також, можливо, ви чули про Tailwind. Вони надають заздалегідь розроблені компоненти та системи сіток, які спрощують процес створення адаптивних веб-макетів.
Якщо кілька років тому ці фреймворки були необхідними для створення адаптивних дизайнів, то сьогодні ми все ще можемо їх використовувати, але насправді не потребуємо, завдяки сучасним методам верстки CSS
📍 Примітка: Сьогодні багато фреймворків використовують Flexbox та/або CSS Grid під капотом, стаючи все більш гнучкими, ніж оригінальні жорсткі макети на основі стовпців.
Отже, коротко: у традиційній адаптивній модульній сітці зміни дизайну для різних розмірів екрану реалізуються шляхом реагування на набір фіксованих брейкпоінтів. Іншими словами, це передбачає погляд назовні і пристосування до зовнішніх факторів, таких як зміна розміру області перегляду.
Сучасна CSS-верстка
Сучасні CSS-макети з Flexbox і CSS Grid можуть застосовувати більш внутрішньо орієнтований підхід, який іноді називають внутрішнім дизайном. Це означає, що наші дизайни адаптуються не лише до розміру області перегляду, але й до самого контенту та доступного простору.
Таким чином, замість розміщення елементів у статичній сітці, визначеній в області перегляду, цей внутрішній підхід дає нам більше контролю над тим, як контент поводиться у мінливому просторі. Він поєднує фіксовані та гнучкі елементи, пропонуючи широкий простір для тонкого налаштування, наприклад, визначення мінімальних і максимальних розмірів тощо.
Інтуїтивне розуміння дизайнерами цієї концепції може зайняти деякий час, оскільки вона передбачає базового розуміння CSS. Отже, давайте зробимо саме це!
Які інструменти ми використовуємо?
Наші основні інструменти CSS тут — Flexbox і CSS Grid. Їх можна використовувати окремо або комбінувати. Ми можемо використовувати їх для налаштування компонентів, а також загальних макетів.
Як працює CSS Flexbox, пояснення для дизайнерів
За допомогою Flexbox (офіційна назва — CSS Flexible Box Layout) ми можемо акуратно розміщувати елементи в певній послідовності та контролювати їхнє вирівнювання, а також точно налаштовувати їхню поведінку та розмір відповідно до наявного простору та з урахуванням змін у контенті. Ми можемо використовувати Flexbox для налаштування наших компонентів і цілих груп або сторінок, вся справа у вкладенні.
CSS Flexbox працює з двома основними елементами: батьківським контейнером і його дочірніми елементами.
Батьківський контейнер (Flex Container)
Це зовнішня обгортка, до якої ви застосовуєте display: flex;. Це оголошення перетворює контейнер на flex контейнер, а його прямі дочірні елементи — на flex елементи. У межах flex контейнера ви можете керувати напрямком flex елементів (рядок або стовпець), способом їхнього обтікання, а також вирівнюванням (уздовж головної осі) або вирівнюванням (уздовж перехресної осі). Іншими словами, батько контролює загальні правила, тому для всіх дочірніх елементів встановлюються однакові правила.
Дочірні елементи (Flex Items):
Це елементи всередині flex контейнера, безпосередні дочірні елементи. Хоча вони все ще слідують загальним правилам батьківського елемента, вони мають певну індивідуальну свободу. Ми можемо контролювати їхнє розширення (щоб заповнити контейнер), їхнє зменшення (коли не вистачає місця) і їхню основу (їхній розмір за замовчуванням перед зростанням або зменшенням). Існують також деякі більш розширені налаштування, наприклад, вирівнювання окремих елементів, відмінне від решти.
Вкладений флексбокс
Отже, за допомогою простих налаштувань, як на картці нижче, ви можете побачити, що це звичайний флексбокс; картка є батьківською, а всередині неї є три дочірні, зображення, заголовок і текст, які рухаються в одному напрямку, з однаковою відстанню між ними, що дуже просто.
Але для більш складних конструкцій, як навігація нижче, з різними елементами, згрупованими разом, з різними відстанями, напрямками та поведінкою, нам потрібно вкладати флексбокси. Таким чином, кожен вкладений флексбокс є нащадком свого прямого батька, який отримує загальну позицію зверху (наприклад, навігаційної панелі), але також диктує нові правила своїм прямим нащадкам… як і в будь-якій сім’ї, насправді.
Чи є авторозмітка (auto layout) в Figma флексбоксом?
Звучить знайомо? Це те саме, що використовувати авторозмітку в Figma або гнучку розкладку в Penpot, тому що обидві вони по суті відображають Flexbox. Пряма кореляція стає очевидною, коли ви досліджуєте режим розробника або використовуєте інструмент інспекції. Щоб заглибитися в цю тему, я створив безкоштовне відео (eng), в якому досліджую, як авторозмітка у Figma відповідає Flexbox, включаючи області, де ми стикаємося з обмеженнями.
Одновимірні чи двовимірні макети?
Важливо розуміти, що Flexbox — це одновимірний підхід до проектування, коли кожен елемент розміщується в одній лінії.
У багатьох випадках це абсолютно нормально, але це не дає вам контролю над сіткою з рядками і стовпчиками. Якщо вам потрібен контроль над дизайном у вигляді сітки, вам знадобиться двовимірний підхід до макета, наприклад, CSS Grid.
Немає правильного чи неправильного; це залежить від того, що ви намагаєтеся побудувати. Вони чудово працюють разом.
CSS Grid макет
Я обожнюю Grid CSS; вона дивовижна, і ви потенційно можете створити з нею що завгодно. Так, дійсно все що завгодно — перекриття, вирівнювання підсіток, або навіть не визначаючи нічого, вона чарівним чином створить все за вас. Це божевілля. Однак, це також може бути дуже приголомшливим, і в 90% випадків ми не створюємо супер вигадливі мистецькі макети (але ви можете!!!). Grid CSS чудова ще й тому, що ми можемо створювати найпростіші структури макетів, такі як класична сітка стовпців, і відкривати наші макети з більшою гнучкістю для структурування композиції і розмірів, аж до креативних дизайнів, які виходять за рамки стандартного сприйняття сітки. CSS Grid допоможе вам у цьому.
Якщо уявити Flexbox як намистини на нитці, розташовані горизонтально або вертикально. Тоді CSS Grid — це як взяти намистини і помістити їх у бенто-бокс, де ми можемо вільно розташувати їх у будь-якому рядку або стовпчику. І це схоже на одну з тих крутих коробочок бенто, де ви можете пересувати перегородки і з’єднувати відділення. Вона навіть автоматично розширюється.
Давайте крок за кроком розберемося в структурі CSS Grid трохи краще:
Мислення лініями сітки, а не стовпчиками
Як UI-дизайнери, ми зазвичай думаємо про сітку макета як про контейнер зі стовпчиками, а потім розміщуємо наші елементи в цих стовпчиках. Але з CSS Grid все трохи інакше. У нас все ще є контейнер, але сама сітка складається з ліній, які створюють комірки сітки. За замовчуванням елементи сітки розміщуються послідовно, відповідно до їхнього порядку в HTML. Однак ми можемо контролювати їх точне горизонтальне і вертикальне розміщення за допомогою координатно-подібних ліній CSS Grid.
Це дозволяє створювати області сітки, що дає змогу створювати ефекти перекриття та більш складні структури макета. Крім того, ми, звичайно, можемо додати поля до контейнера і проміжки між рядками.
FR або дробові одиниці
Наші стовпчики і клітинки сітки не обов’язково повинні бути однакового розміру; ми можемо налаштувати їх так, як нам подобається. Це включає в себе фіксовані розміри або використання “одиниць fr”, які є дробовими одиницями, що розділяють доступний простір.
Використовуючи одиниці fr, ми можемо рівномірно розподілити решту доступного простору або змінити пропорції — наприклад, 2 fr для однієї комірки і 1 fr для іншої.
При зміні розміру все чудово підлаштовується: наші фіксовані елементи зберігають свій розмір, а fr-блоки відповідно перерозподіляють простір, що залишився.
Явні та неявні сітки
Досі я говорив про явну сітку (explicit grid), де ми, як дизайнери, чітко визначаємо рядки і стовпці. Однак CSS Grid також функціонує, коли ми не визначаємо кожну комірку; браузер автоматично генерує сітку на основі вмісту. Це називається неявною сіткою (implicit grid), і вона особливо корисна, коли ми маємо справу з динамічним або невідомим контентом, наприклад, зі списком постів блогу або продуктів, які змінюються з часом.
Явний підхід є більш природним для нас як дизайнерів інтерфейсу, тоді як неявний підхід ми спостерігаємо в основному в браузері. Тому нам потрібно мислити за межами нашого програмного забезпечення і співпрацювати як дизайнери та розробники.
Вкладеність
CSS Grid також можуть бути вкладеними. Наприклад, якщо у вас є загальний макет із заголовком, бічною панеллю та областю контенту, і ви бажаєте структурувати цей контент, ви можете легко вкласти іншу CSS-сітку в нього. Залежно від ваших вимог, ця вкладена сітка може бути як неявною, так і явною.
Щоб досягти ідеально вирівняного дизайну, функція підсітки CSS Grid дозволяє створити послідовну структуру сітки в усьому макеті.
Світ у ваших руках
Ми розглянули основи CSS Grid, але ще більше можливостей є в його вирівнюваннях і способах комбінування та вкладання його елементів. Тож, отримуйте задоволення від заглиблення в його тонкощі. Крім того, я наполегливо рекомендую цю статтю для подальшого читання: Gridless.design
Але я хочу просту сітку!
Хоча CSS Grid відкриває безмежні можливості, дуже важливо залишатися зосередженим і робити все максимально простим, щоб створювати підтримувані і масштабовані продукти, а це те, що нам потрібно в більшості випадків. Тому в багатьох проектах ви можете обмежитися базовою сіткою стовпців і це абсолютно нормально! Ми можемо використовувати найпростіші налаштування за допомогою CSS Grid. Однак, коли покличе творчість, ви тепер знаєте, куди йти.
Чи потрібно вибирати між CSS Grid і Flexbox?
Справа не в одному з них, Flexbox і CSS Grid є частиною сімейства CSS і працюють у великій гармонії.
Здебільшого компоненти налаштовуються за допомогою Flexbox, тоді як CSS Grid керує загальним макетом. Однак, за потреби, цілком можливо використовувати Flexbox для всієї сторінки. Ви можете змішувати і поєднувати; іноді обидва підходи працюють добре, в той час як в інших випадках один з них може бути кращим рішенням. Немає правильного чи неправильного вибору; вони бездоганно доповнюють один одного, залежно від того, одновимірний чи двовимірний макет працює краще у вашому конкретному випадку.
Як UI-дизайнер, ви можете залишити дріб’язкові рішення своїм фронтенд-розробникам. Ваша увага зосереджена на розумінні того, чому зроблено той чи інший вибір, і проектуванні з урахуванням потенціалу та обмежень сучасного CSS. Пам’ятайте, що те, що ви уявляєте у Figma або Penpot, не завжди може бути відображено безпосередньо в браузері. Ви не робите нічого поганого; це просто частина творчого процесу. Співпраця між дизайном і розробкою є ключовою!
Чи потрібні брейкпоінти? Погляньмо ближче
У традиційному дизайні на основі стовпців
«Старий» спосіб, з адаптивною сіткою із заданими стовпчиками, передбачав фіксовані точки, в яких наш дизайн переходив у нову версію. У цих точках може змінюватися сам макет сітки, починаючи від різної кількості стовпців і закінчуючи зміною відступів або полів. Ми також можемо змінити розташування елементів у сітці або показати чи приховати певні елементи. Крім того, ми можемо вибрати відображення різних версій, наприклад, меню бургерів змінюється на меню посилань, а розмір тексту може змінюватися в цих точках розриву.
Цей більш жорсткий підхід до адаптивної верстки часто використовує фреймворк, до якого зазвичай додається супровідна документація, що містить важливу інформацію. Наприклад, у фреймворку, такому як Bootstrap, документація міститиме детальну інформацію про кількість колонок, ширину відступів та брейкпоінти. Це дуже полегшує нам, UI-дизайнерам, роботу з такими інструментами в Figma або Penpot.
Сучасний CSS та брейкпоінти
Завдяки сучасним CSS-макетам наш підхід до дизайну може стати більш інтуїтивно зрозумілим, дозволяючи дизайну плавно адаптуватися без постійної потреби в точках розриву. Це означає, що макет може ефективно реорганізовуватися автоматично більшу частину часу.
Однак, все одно будуть випадки, коли вам може знадобитися використання брейкпоінтів. Замість того, щоб покладатися на набір фіксованих точок (хоча ви все ще можете це зробити), ви можете проаналізувати свій проект і визначити брейкпоінти з набагато більшою гнучкістю.
Тож, можливо, ви захочете додати точки розриву в сучасній CSS-верстці для:
Зміни макета
Незважаючи на те, що сучасний CSS чудово справляється із завданням сам по собі, ви можете встановити брейкпоінти для більш «радикальних» змін у макеті, таких як зміна налаштувань сітки, відображення або приховування елементів, або їх розподіл.
Зміни макету компонента
Прикладом може бути зміна навігації з меню бургерів на меню посилань. Таким чином, ми можемо знайти “золоту середину”, де ми хочемо встановити брейкпоінт.
Зміна типографії
Типографія — складніша область. Якщо коротко, то теоретично ми можемо просто встановити окремі брейкпоінти і тут, але зазвичай доцільніше повернутися до фіксованого набору брейкпоінтів для вашої гарнітури. Такий підхід спрощує процес, гарантуючи, що наша типографія залишається послідовною і читабельною на різних розмірах екрану.
Інші підходи з CSS Clamp:
На додаток до брейкпоінтів, ми також можемо використовувати функцію clamp() в CSS, щоб дозволити нашій типографії плавно масштабуватися в межах заданого діапазону, забезпечуючи її адаптивність. Цей метод дозволяє змінювати розмір тексту між мінімумом і максимумом, враховуючи загальну ширину області перегляду, незалежно від брейкпоінтів.
Однак використання clamp() вимагає тісної співпраці з командою розробників, оскільки необхідно враховувати проблеми продуктивності та доступності, а також проводити більше тестування. Отже, це чудовий інструмент для розуміння, але він повинен відповідати вашим конкретним налаштуванням і проекту.
У пошуках балансу: Між свободою дизайну та структурою
Однією з проблем, з якою я зіткнувся, було впорядкування широкого спектру можливостей і свободи, які надає CSS-верстка. Я виявив, що дуже важливо спочатку сісти і ретельно обміркувати проект та його обсяг.
a) Художній дизайн для одноразових проектів або розділів
Ми створюємо унікальну, супермодну, мистецьку сторінку? Тоді, ймовірно, ви захочете використати всю магію CSS-верстки. Дивовижні творчі приклади Джен Сіммонс демонструють, чого можна досягти за допомогою сучасних CSS-макетів. Ви можете повністю відмовитися від традиційних брейкпоінтів, дозволивши браузеру диктувати макет, або ретельно продумати кожний брейкпоінт для кожного елемента.
Майте на увазі, що такий підхід може бути застосований не до всього сайту, а лише до головної сторінки або розділу, де ви прагнете оживити графічний дизайн.
У цьому випадку я б створив кілька фіксованих екранів у Figma або Penpot в якості графічного представлення. Потім потрібен дуже кваліфікований фронтенд-розробник (і відповідний бюджет!), щоб тісно співпрацювати. Акцент робиться на швидкий перехід до браузера; занадто детальне планування поведінки в Figma чи Penpot не матиме великого сенсу.
б) Балансування гнучкості та структури в масштабованих проектах і системах проектування
Гнучкість — це ключ до масштабованого продукту, але так само важлива і структура. Хоча сучасні CSS-макети дозволяють створювати більш плавний дизайн, дозволяючи браузеру диктувати відображення, створення масштабованого дизайну часто вимагає встановлення чіткіших правил, щоб зберегти керованість. Уявіть собі, що ви вкладаєте трохи магії в структуровану рамку — не для того, щоб зробити дизайн тьмяним, а для того, щоб забезпечити міцну основу.
Стаття Бреда Фроста про те, як працювати з сіткою в дизайн-системі, створюючи сітчасті компоненти, є абсолютно фантастичною. Я щиро вірю, що це те, з чим ми можемо чудово працювати, оскільки такий підхід до використання шаблонів макетів працює так само добре у Figma (з деякими обмеженнями через відсутність CSS Grid) або Penpot, як і в CSS. Особисто я б також віддав перевагу деяким фіксованим брейкпоінтам для загального макета і типографії, щоб спростити життя. Важливо те, що ми все ще можемо легко вийти з цієї системи, коли це необхідно.
Це не про кодування дизайнерами
Дозвольте мені бути дуже відвертим: ця стаття не про те, що дизайнери повинні кодувати. Рішення про те, як це буде реаліховано в CSS, не приймається і не повинно прийматися дизайнером; воно завжди буде лежати на плечах фронтенд-розробника, експерта в цій галузі! Отже, мова йде зовсім не про надання кодового рішення в дизайні. Але якщо ми проектуємо з розумінням можливостей і обмежень CSS, то ми можемо набагато краще і з більшим розумінням співпрацювати і, що найголовніше, розмовляти з розробкою… і з цим досить весело грати!
Першоджерело — «Why UI designers should understand Flexbox and CSS Grid»
