Сітки у веб-дизайні: історія та найкращі практики

UX/UI та графічні дизайнери мають багато спільного. Серед іншого застосування сіток для впорядкування та організації дизайн-елементів як на екрані, так і за його межами.

Сітки бувають різних форм і розмірів (все залежить від того, що ви проектуєте) і мають довгу історію, яка сягає найперших рукописів, створених людством.

Спочатку ми визначимо, що таке сітка, а потім розглянемо деякі найпопулярніші типи сіток, які використовуються у друкованому, веб- та UX/UI-дизайні. Нарешті, ми дамо вам 5 корисних рекомендацій, які стануть у нагоді, коли ви будете використовувати сітки у своїх проектах.

Що таке сітка?

Сітка - це система для організації лейауту.

Традиційно графічні дизайнери використовували сітки у дизайні друкованих матеріалів (наприклад, книг, журналів чи плакатів). UX/UI-дизайнери також активно працюють із сітками, адже останні відіграють роль базової структури в дизайні інтерфейсів (наприклад, веб-сторінок, мобільних додатків тощо).

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

Чому сітки важливі?

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

Проте досвід підказує, що це не так однозначно.

Якщо ви колись стикалися з творчим блоком, ви знаєте, як сильно може лякати чистий аркуш.

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

Крім того, сітки – це практична необхідність. Вони роблять лейаут структурованим та організованим і формують основу, на яку можуть орієнтуватися розробники, щоб дизайн поводився так, як було задумано, на будь-яких пристроях.

6 типів сіток

Кожен тип підходить для певних цілей. Ось кілька основних сіток, які зустрічаються в графічному та UX/UI-дизайні:

1. Сітка з базових ліній

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

2. Колонкова сітка

Це той тип сітки, який дизайнери використовують найчастіше. Сторінка розбивається на кілька вертикальних полів, якими вирівнюються об'єкти. Такі сітки ми часто можемо зустріти у газетах та журналах.

3. Модульна сітка

Модульна сітка - своєрідна розширена версія колонкової сітки: тут до стовпців додаються рядки. Пересічні рядки та стовпці створюють "модулі", які можна використовувати для організації елементів. Модульні сітки часто зустрічаються в журналах та корпоративних звітах.

4. Манускриптна (блочна) сітка

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

5. Піксельна сітка

Якщо ви коли-небудь збільшували масштаб документа в Photoshop, ви, швидше за все, бачили, як з'являється піксельна сітка. Цифрові екрани складаються з мільйонів мікроскопічних пікселів, і іноді дизайнери наближають зображення, щоб відредагувати його попіксельно.

6. Ієрархічна сітка

Ієрархічна сітка — це будь-яка нерегулярна сітка, яка відображає специфіку контенту.

Історія сіток

Ймовірно, найдавніша сітка являла собою щось схоже на сітку з базових ліній: напрямні або "допоміжні лінії", намальовані на стародавніх рукописах, які допомагали переписувачу створювати рівні, рівномірні рядки тексту.

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

‍Храмовий сувій — один із сувоїв Мертвого моря, датованих періодом між 150 р. до н.е. та 70 р. н.е.

Приблизно через 1500 років цей принцип був застосований у роботі ранніх західних друкарських верстатів. .

У Біблії Гутенберга — першої західної книги, надрукованої за допомогою рухомого шрифту, — використовується двоколонова сітка.

Наприкінці 19-го — на початку 20-го століть газети почали активно використовувати великоколонні сітки, тому що вони дозволяли вмістити на аркуші максимальну кількість інформації.

На великих сторінках, таких як широкоформатний газетний папір (розміром приблизно 30 на 23 дюйми), колонки давали можливість вибрати менший розмір шрифту (часто 8pt): усі рядки в стовпцях залишалися досить короткими, що забезпечувало високу читабельність. Без колонок рядки були б надто довгими та складними для сприйняття.

Сітки у 20 столітті

“Сітка – це допоміжний інструмент, а не гарантія успіху. Вона допускає безліч варіантів використання, і кожен дизайнер може знайти рішення, яке відповідає його особистому стилю. Але потрібно навчитися застосовувати сітки правильно; це мистецтво, яке потребує практики.” Йозеф Мюллер-Брокманн

Сітки стали цікавішими на початку 20 століття, коли дизайнери-авангардисти почали більше експериментувати з розташуванням елементів, надихаючись такими рухами, як Баухаус та Де Стиль. Наприклад, дизайнери Ян Чіхольд та Йозеф Мюллер-Брокманн розробили нові системи сіток у вигляді розріджених, мінімалістичних друкарських лейаутів та плакатів.

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

Один із найважливіших висновків Мюллера-Брокмана полягає в наступному: успіх сітки залежить не тільки від того, як елементи розміщені всередині неї, але і від того, як сама сітка розташована по відношенню до свого контейнера. Сьогодні у друкованому дизайні роль контейнера зазвичай грає сторінка, а у веб- або UI-дизайні вікно браузера.

Назва книги певною мірою вводить сучасних читачів в оману, оскільки Мюллер Брокманн приділяє стільки ж, якщо не більше уваги вибору шрифту і роботі з ним. І це не випадково: історично абстрактні сітки з'явилися в написаних від руки та друкованих текстах, тому для Мюллера-Брокмана сітки та текст були нероздільні. По суті, сітки виникли як система організації тексту, такими вони залишаються і сьогодні.

Дійсно, у рекомендаціях Мюллера-Брокмана для друкованих лейаутів всі модульні рішення про ряди сітки та вертикальні відступи (англ. gutter) приймаються на основі текстової сітки з базовими лініями. Модулі, що вийшли в результаті, він називає "полями" (fields).

Плакати 1950-60-х років, створені Йозефом Мюллером-Брокманном, демонструють модульні, повернені і навіть радіальні сітки.

Модульна система, розроблена Мюллером-Брокманном, подарувала дизайнерам неймовірну кількість можливостей, а вплив його робіт і сьогодні простежується у багатьох графічних та веб-дизайнах. Наприклад, ми можемо побачити цифрову версію модульної системи Мюллера-Брокманна на сайті газети Guardian (хоча і без вирівнювання базової лінії):

Мюллер-Брокманн навіть досліджував застосування сіток до тривимірних просторів, що вплинуло на дизайн виставкових просторів і корпоративних інтер'єрів.

Як своєрідний постскриптум до книги Мюллер-Брокманн звертається до стародавніх "упорядкованих систем", які можна знайти в природі і культурі більш ранніх людських цивілізацій. Як приклади він називає створені бджолами стільники та примітивні карти пропорцій людського тіла. Він також розглядає єгипетські піктограми, Біблію Гутенберга та музичні манускрипти (які, якщо вдуматися, є свого роду деталізованими сітками). Він згадує геометрію традиційної японської архітектури та навіть опорну конструкцію даху лондонського Кришталевого палацу.

Проводячи паралелі з роботою сучасного дизайнера, він завершує книгу таким уривком:

“Замовники чекають від дизайнерів дедалі більше логічних і системних рішень не лише з економічних міркувань, а й з метою створення та підтримки іміджу, оскільки єдина концепція фірмового стилю не може бути результатом творчості, яка має винятково емоційну природу. Дизайн потребує великих не лише емоційних, а й інтелектуальних зусиль — лише в цьому випадку можливі реальні творчі здобутки.” Йозеф Мюллер-Брокманн

У другій половині 20-го століття ще більше дизайнерів почали застосовувати та популяризувати сітки. Візьмемо, наприклад, Массімо Віньєллі та Віма Кроувеля. Віньєллі віддавав перевагу суворим модульним сіткам — як у своїх незліченних книжкових дизайнах, так і в інформаційних матеріалах для великих клієнтів, наприклад, Служби національних парків США та Нью-Йоркського метро. Кроувел знаменитий своєю побудованою на основі сіток типографікою.

Віньєллі розробив для Служби національних парків США дуже гнучку систему "Unigrid" ("універсальна сітка"), що дозволяє використовувати широкий діапазон розмірів та форматів документів.

21 століття: бунт проти сіток

Революція в комп'ютерних технологіях та програмному забезпеченні для дизайну розпочалася у 1970-х роках, набирала чинності у 80-х та 90-х і продовжується досі. Вона не лише швидко змінила інструменти та методи, які використовують друкарні, але й створила нові можливості для дизайн-експериментів

Історично сітки були найважливішим інструментом, що дозволяє послідовно організувати текст та інші графічні елементи. машин.

Друкарські експерименти Вайнгарта одночасно і вписувалися в дизайн на основі сітки і підривали його.

З появою комп'ютерів та спеціального ПЗ ці технічні та формальні обмеження, які як визначали, так і відображали особливості застосування сіток у графічному дизайні, пішли у минуле.

Навіть найраніші програми для графічного дизайну, такі як Pagemaker і Photoshop, дозволяли змінювати сітки одним клацанням миші. до дорогого процесу друку.

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

Однією з найвідоміших постатей, що завоювали популярність у ході експериментів 1980-х і 1990-х років, був Девід Карсон, професійний серфер, який зацікавився графічним дизайном.Він навчався ремеслу на двотижневих курсах графіки в Університеті Арізони, короткому курсі в Орегоні та тритижневому семінарі у Швейцарії. Карсон - один із найкращих прикладів того, як стати дизайнером, не відвідуючи дизайн-школу.

Карсон часто порушував правила та норми, прийняті у графічному дизайні, включаючи використання стандартних сіток. Тим не менш, у його проектах зберігається чимало елементів сітки, завдяки чому такий дизайн виконує своє головне призначення – передає сенс.

Хоча колонки тексту мають різну ширину і не розділені відступом, кожен блок, як і раніше, спирається на базові лінії і дотримується чітких меж ліворуч і праворуч, тому текст зрештою залишається читаним.

Сітки в UX/UI-дизайні

Крім візуальної структури, що вони забезпечують у цифрових інтерфейсах, сітки служать і функціональної мети. Для сучасних дизайнерів колонкові сітки є незамінним інструментом, що дозволяє створювати досить структурований дизайн, який можна ефективно використовувати на різних пристроях.

Наприклад, в рамках нашого безкоштовного email-курсу Figma 101 ви можете створити дизайн програми для мобільних пристроїв на основі 3-колонкової сітки, а потім перенести його на ширшу 12-колону сітку для комп'ютерів. На сьогоднішній день такий спосіб роботи є основою успішного проектування.

Дизайнери передають свої доведені до ідеалу проекти розробникам, які використовують такі системи, як Flexbox, Tailwind та CSS Grid, що пропонують базову структуру для точної реалізації сіток на веб-сайтах та додатках.

5 порад щодо використання сіток в UX/UI-дизайні

Вирішили поекспериментувати із сітками у своїх проектах? Є кілька ключових моментів, які допоможуть вам створювати ефектні, гнучкі дизайни за допомогою:

1. Подумайте, як сітка співвідноситься зі своїм контейнером

У своїй книзі Йозеф Мюллер-Брокманн підкреслює, що розташування сітки на сторінці – відступи навколо неї – може вплинути на її функціональні та естетичні характеристики.

2. Просто дизайну на основі сітки недостатньо – спроектуйте саму сітку

Коли ви відкриваєте новий файл для роботи над дизайном сайту або програми, виникає спокуса почати з вашої "звичайної" сітки - можливо, зі звичної кількості колонок або відступів певної ширини, які ви завжди використовуєте.

Найчастіше це має сенс, оскільки у будь-якому проекті існують певні обмеження.

Але завжди варто витратити час на те, щоб з'ясувати, яка сітка дійсно потрібна в конкретному випадку, і чи є додаткові фактори, які можуть зіграти свою роль. Ця повторна перевірка може зберегти вас від вибору сітки, яка насправді не працює або негативно позначається на функціональності вашого проекту.

3. Слідкуйте за тим, щоб усі елементи починалися та закінчувалися в полях сітки, а не всередині відступів

Призначення внутрішніх відступів – порожнього простору між колонками – поділ елементів. Текст і графіка, звичайно, можуть займати кілька стовпців, але вони повинні починатися і закінчуватися біля колонки, а не всередині відступів.

4. Не забувайте про вирівнювання по базових лініях

Переконайтеся, що весь текст у колонковій сітці послідовно розташовується на базових лініях, це допоможе зробити дизайн набагато більш впорядкованим і гармонійним.Вирівнювання по базовій лінії легко випустити з уваги на цифрові проекти (на відміну від графічного дизайну, де воно знаходиться в центрі уваги), але саме це відрізняє збалансований дизайн від того, що виглядає якось “неправильно”.

5. Спробуйте використати сітку, кратну 8

Сьогодні наші дизайни повинні працювати і виглядати відмінно на різних пристроях та екранах з будь-якою роздільною здатністю. Розміри та інтервали, кратні базовому числу, допомагають зробити ці переходи акуратними та планомірними. В даний час прийнято використовувати сітку, кратну 8, так як вона дозволяє відмінно масштабувати дизайн на Retina-дисплеях, і працює як у векторних, так і піксельних проектах.

Щоб дізнатися більше, ознайомтеся з рекомендаціями Google Material Design, присвяченими принципам роботи з 4- та 8-піксельними сітками.

Основні висновки

• Сітки грають в UX/UI-дизайні естетичну та функціональну роль і зрештою формують структуру, яка забезпечує доступність та чуйність контенту.

• Сітки були найважливішим елементом візуального дизайну протягом усієї його історії — починаючи з ранніх рукописів та друкарських верстатів і закінчуючи сучасними практиками проектування інтерфейсів.

• Сітка, кратна 8, стала стандартом, особливо коли йдеться про проектування для Retina-дисплеїв.

ТОП-11 принципів використання сіток у графічному та веб-дизайні

Анастасія Свеженцева Продуктовий дизайнер (UX/UI), веб-дизайнер та бренд-дизайнер. Досвід проектів у міжнародних агентствах (HighTime.agency), продуктових компаніях (iSpring) та зі стартапами по всьому світу (Agently.com).Ділюсь досвідом у дизайні на офлайн- та онлайн-платформах з 2017 року: Інститут програмних систем, godesign.school, онлайн-платформа breezzly.ru та пишу мікролекції про дизайн на Яндекс.Кью (226 відповідей) 3 · 10 хв читати

Сьогодні поділюся практичними порадами та фішками, які стануть у нагоді при побудові сіток у графічному дизайні та веб-дизайні Отже, приступимо до розбору.

1. Що таке сітка, яка буває і навіщо вона потрібна?
2. Найкращі практики в роботі з сітками
   1. Принцип 1. Немає контенту – немає сітки
   2. Принцип 2. Сітка та відображення характеру бренду
   3. Принцип 3. Вертикальний ритм підказує як досягти узгодженого та приємного дизайну
   4. Принцип 4. Модульна сітка – це інструмент керування пропорцією
   5. Принцип 5. Сітка – це шлях до цікавих композицій
   6. Принцип 6. Сітка – каркас для правил ієрархії та системи управління увагою
   7. Принцип 7. Сітка задає стандарти розвитку внутрішніх сторінок сайту та прискорює дизайн
   8. Принцип 8. Сітка – стандарт розробки дизайну під усі екрани та пристрої
   9. Принцип 9. Сітка – це швидкий спосіб створити систему відступів між елементами
   10. Принцип 10. Різна щільність інформації потребує різної сітки
   11. Принцип 11. Сітка – стандарт передачі дизайну у розробку: про готові програмні сітки

   Що таке сітка, яка буває і навіщо вона потрібна?

   Сітки — один з ключових інструментів дизайнера.

   Цікавитесь свіжими статтями щодо продуктового дизайну (UX/UI)?

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

   Хлопці в Setka зібрали найпоширеніші зразки, що стали вже «класичними», знайомство з якими допоможе краще зрозуміти модульне проектування. Рекомендую вивчити цікаву статтю з видів сіток →

   Найкращі практики в роботі з сітками

   Розібрала 11 правил роботи із сітками. Результати дослідження зібрала у практичні поради щодо створення продуманого дизайну. Тримайте 👇

   Принцип 1. Немає контенту – немає сітки

   Сітка призначена для організації об'єктів у просторі, в цьому є її природа. Якщо немає контенту, немає об'єктів, отже й нема чого організовувати. Тому почніть з контенту та скетчу.

   «Структуруючи за допомогою модульної сітки площини та простір, дизайнер отримує можливість організувати тексти, фотографії та графічні зображення за принципами об'єктивності та функціональності. Логічно організований дизайн підтримує достовірність інформації та має в своєму розпорядженні до неї читача».

   – Йозеф Мюллер-Брокманн, графічний дизайнер

   Принцип 2. Визначитись із сіткою допомагає дизайн-концепція: сітка та відображення характеру бренду

   Сітки – основа сучасного веб-дизайну. Сітки допомагають читачеві сприймати текстову та візуальну інформацію та виділяють сайт у натовпі конкурентів.

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

   Давайте розберемо приклади сіток сайтів Stripe – Payments infrastructure for the internet та Focus Lab – global b2b branding agency.

   Сітка Focus Lab працює на образ вітрини для успіхів у брендингу. А сітка Stripe підтримує історію ефективності.

   Давайте експресом збудуємо сітку по кроках.

   Крок 1. Визначаємо оптимальну кількість колонок

   12 стовпців - одна з найзручніших сіток для Інтернету, вона допомагає розміщувати в рядку як парне, так і непарне кількість елементів, наприклад як 3, так і 4 товару в ряду.

   Крок 2. Регулюємо міжколоночну відстань (gutters) та відступи від краю екрану (margins)

   Отже, ми визначили оптимальну кількість стовпців. Давайте тепер визначимо міжколонну відстань (gutters) та відступи від краю екрану (margins).

   Міжколоночна відстань (gutters)

   У веб-дизайні прийнято працювати із сітками в 10px. Міжколоночний інтервал вважаємо пропорційно до модуля, наприклад, міжколоночна відстань може бути 20 або 30, 40, тобто коротко 10.

   Відступи від краю екрану (margins)

   Відступи від краю екрану робимо виходячи із ширини контентної частини макета, тобто області, де будуть розміщуватись зображення та тексти, наприклад 1200px.

   Принцип 3. Вертикальний ритм підказує як досягти узгодженого та приємного дизайну

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

   Вертикальний ритм слідує одному з принципів дизайну - повторення. Повторення дозволяє створити відчуття, що речі пов'язані разом. Що вони є частиною одного плану.

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

   Принцип 4. Сітка – стандарт розробки дизайну під усі екрани та пристрої

   Адаптивний дизайн - це коли улюбленим сайтом зручно користуватися вдома з комп'ютера, в машині з мобільного телефону і в метро з планшета.

   Причини виникнення адаптивності та актуальність

   Сьогодні пристроїв величезна кількість: телефони, планшети, ноутбуки і т.д. Тому створення дизайну рекомендую починати зі складання списку пристроїв та дозволів, якими клієнти користуватимуться.

   Нюанси сценаріїв роботи з одним сайтом у різних контекстах на різних розмірах екранів

   Як правило, користувачі мобільних пристроїв і користувачі стаціонарних комп'ютерів неоднаково дивляться на ваш продукт. та годинник роботи.

   Підхід до дизайну «Спочатку мобільні!»

   У 2009 році Люк Вроблевскі зробив революцію у веб-дизайні за допомогою книги «Спочатку мобільні!» Посилаючись на різке зростання мобільного веб-трафіку та нові технічні можливості телефонів, Люк запропонував створювати насамперед мобільні версії сайтів.

   Приклад сітки в роботі під час створення адаптивного дизайну

   Наприклад, сітка з 12 колонок для робочого столу може адаптуватися в 8-ми колонкову сітку на планшеті і 4-х колонкову сітку для телефону - зменшуємо кількість колонок залежно від пристрою.

   Сітка у цьому прикладі допомагає прискорити розрахунок пропорцій для колонки з фото та описом для кожного розміру екрану.

   Приклад адаптивної сітки Figma.

   Книги на тему

   Принцип 5. Модульна сітка – це шлях до цікавих композицій

   Модульна сітка – допомагає організувати простір, підпорядковує елементи певної закономірності та робить дизайн сторінки естетичнішим.

   Модульна сітка складається з прямокутників із заданою шириною та висотою. Будується на перетині колонок та рядків вертикального ритму.

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

   Модуль допомагає створити збалансований багатошаровий гармонійний дизайн з цікавим ритмом.

   Online store for Interior Decor Studio

   Принцип 6. Модульна сітка – це інструмент керування пропорцією

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

   Принцип 7. Сітка задає стандарти розвитку внутрішніх сторінок сайту та прискорює дизайн

   Сітка звертає увагу читача та захоплює у глибину змісту. Саме завдяки єдності сітки між сторінками користувач сприймає всі ці сторінки як частину єдиного ресурсу.

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

   У веб сітки прийшли з тією ж метою - підвищити ефективність роботи команди дизайнерів і розробників, що особливо важливо в більш динамічному і конкретному digital-світі.

   Принцип 8. Іноді сітку роблять явним елементом дизайну

   Іноді доречно оголити сітку, тобто перетворити її на елемент дизайну, щоб явніше спрацювати на відчуття системності та точності.

   Brand new landing page — Real estate marketing tool for agents

   Принцип 9. Різна щільність інформації потребує різної сітки

   Сітка 10 pt - повітряна і хороша для веб-дизайну і сторітелінг в діджітал, а сітка 8 pt - щільна і хороша для інтерфейсів.

   Чому сітки на 8 pt так поширилися, якщо сітки на 10 pt не гірші?

   Зростає тренд на дизайн-інтерфейси, поширилися мобільні пристрої, впливає бренд Google та його масова дизайн-система Google Material Design зі стандартом у 8px. 👌

   Тобто в епоху, коли потрібно розвивати продукти для гігантського асортименту дозволів екранів (різні бренди годинників, телефонів, ноутбуків та desktop).

   Найпопулярніші сітки такі:

   У стандартних параметрах Figma встановлено 10px. Під цей параметр заточена функція прискореного переміщення об'єктів на полотні за допомогою затиснутого Shift. При такому підході об'єкти можна швидко пересувати і вони потрапляють в осередок.

   Для довідки:

   Є Pixel (px), а є Point (pt)

   WHAT ARE POINTS?

   Point (pt) є мірою місця, що є dependent on screen resolution. Симпатична експланація є те, що в "1x" резолюції (або @1x), 1pt = 1px.

   При «2x» резолюції (@ 2x), 1pt = 4px тому, щоб задовольнити дві довжини на два X і Y ставки, щоб зробити це 2px wide by 2px tall.

   При "3x" резолюції (@3x), 1pt = 9px (3px x 3px) and so on.

   Принцип 10Сітка - допомагає керувати цілісним сприйняттям

   Сітка автоматично задіює відразу кілька гештальт-принципів: схожість, близькість, замкнутість. З нею дизайн виходить узгодженим та приємним оку.

   Сітка задає набір правил, які створюють ієрархію дизайну та впорядковують елементи.

   Принцип 11. Сітка – стандарт передачі дизайну у розробку: про готові програмні сітки

   За макетом із сіткою розробник швидше розбереться із системою пропорцій та відступів у макеті та налаштує поведінку контенту сторінки для різних розмірів екрана та збере адаптивну версію сторінки.

   Принципи сітки від Кімберлі Елам та інших сучасників та класиків

   Графічний дизайн. Принцип сітки, Кімберлі Елам

   Чудова книга від Кімберлі Елам з наочним розбором робіт з композиції та модульних сіток. Дуже просто і зрозуміло пояснює принципи гармонійного розташування елементів на макеті. Головні плюси книги: наявність практично поданих правил і принципів, пояснення чому той чи інший варіант розташування кращий чи не такий гарний; пристойна кількість прикладів.

   «Модульні системи у графічному дизайні. Посібник для графіків, типографів та оформлювачів виставок», Йозеф Мюллер-Брокманн

   Книга від першопрохідника по сітках у графічному дизайні та оформлювальній роботі. Йозеф з вогником і в прикладах розповідає про застосування модульної сітки в дизайні книг, періодичних видань, корпоративної поліграфії, виставкових просторів через зразки архітектури, друкарні та дизайну та переконливо доводить універсальність та ефективність модульного методу проектування. Найбільш фундаментальна праця по сітках. Книжка все ще актуальна. Must-have.

   Бібліотека популярних систем сіток для iOS, Android та Bootstrap (.xd, .psd, .ai, .sketch, .fig)

   Величезна безкоштовна бібліотека систем сіток для iOS, Android та Bootstrap. Тут можна завантажити 26 сіток з 6 і 12 колонками для 15 різних пристроїв, у файлах сумісних з популярними графічними інструментами: Adobe XD, Photoshop, Illustrator, Sketch і Figma. Цілі бібліотеки – прискорити запуск ваших дизайн-проектів. Завантажити безкоштовно →

   Grid System Library - Bootstrap, iOS & Android Grids for Sketch, Figma & Adobe XD

   Що ще почитати на тему сіток у графічному та веб-дизайні

   Книга про смак та культуру роботи з простором. Детальний практичний екскурс з використання модульної системи у графічному дизайні та оформлювальній роботі. За форматом нагадує майстер-класи. 👌

   Модульні системи у графічному дизайні. Посібник для графічних дизайнерів, типографів та оформлювачів виставок. Детальніше →

   Висновок та рекомендації

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

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