На курсі «Основи вебдизайну» ми розповідали про сітки в контексті вебсайтів. Значна частина інформації стосовно сіток залишається актуальною і для графічних інтерфейсів.

Це важливий інструмент для створення з одного боку гармонійних та пропорційних композицій в дизайні, а з іншого — задання певного ритму для сприйняття продукту.

Корисно зазначити, що поширеною є помилка — дизайнери часто називають всі сітки «модульними». Насправді, модульні сітки — це просто поширений тип сіток. Але про все по порядку.

Спочатку з’ясуємо, що таке сітки взагалі.

Що таке сітки і нащо вони потрібні

Ключове завдання сіток — забезпечити в межах макету охайність, пропорційність елементів та певний ритм сприйняття інформації. Новачкам поняття сітки може видаватись незнайомим, а принцип їхньої організації — складним для сприйняття. Але насправді, всім вам сітки дуже добре знайомі. Причому, з дитинства.

Певно, одними з перших сіток, з якими вам доводилось мати справу, були аркуші ваших зошитів — в лінійку та в клітинку. А в молодших класах використовуються ще зошити з полями та діагональними лініями.

Власне, оці от всі розмітки і є прикладом сіток. Завдяки їм вам вдавалось забезпечувати певний розмір літер, писати їх вздовж базової лінії і дотримуватись міжрядкового інтервалу. А в зошитах з алгебри була своя система.

Буквально в усіх фахових роботах графічних дизайнерів також використовуються сітки: в газетах, в журналах, в плакатах, в буклетах тощо. І, як і в шкільних зошитах, вони виконують ту саму задачу: допомагають продукту виглядати охайно, його елементам бути пропорційними щодо формату, а споглядачу — сприймати інформацію у певному ритмі.

Звісно, сітки для журнального розвороту часто дещо складніші за своєю будовою, ніж сітка в зошиті. Та й різновидів сіток та їх організації існує чимало.

Але для інтерфейсів, вебсайтів і для графічного дизайну все ж використовуються як правило прямокутні лінійні сітки. Цьому сприяє те, що пропорцію в сітках легше будувати відповідно до формату, в межах якого ви її створюєте. А в графічному дизайні і у інтерфейсах ви маєте справу, як правило, з прямокутними форматами — А4, А3, B5, 16:9 тощо.

Тож саме на лінійних прямокутних сітках ми й зосередимось в цьому матеріалі.

Будова сітки

А самі сітки можуть складатись з таких типових елементів:

  • Поля
  • Колонки
  • Проміжки між колонками (їх ще називають просвітами та, дещо рідше, коридорами)
  • Рядки
  • Лінії вертикального ритму
  • Власне, модулі
  • Міжмодульні інтервали.