Яку відстань для відступів обирати?

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

1. Базовий відступ:

   • Для карток продуктів на вебсайті електронної комерції: маржа між картками - 16px, що дозволяє зберегти чистоту дизайну та забезпечує достатнє простір між елементами.
   • Внутрішній відступ (padding) у кнопках - 16px зліва та справа, що робить текст легшим для читання і кнопку зручнішою для натискання.

2. Відступи між текстовими блоками:

   • В блозі або статті: маржа між параграфами - 24px, поліпшує читабельність, дозволяючи тексту "дихати".

3. Відступи в меню та списках:

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

4. Границі секцій:

   • Відступ між різними секціями на головній сторінці - 64px, створює чітке розділення контенту, сприяючи кращій навігації та розумінню користувачем структури сайту.

5. Робота з модульною сіткою:

   • На дашборді користувача, де відображається інформація в картах: якщо карти організовані в сітку з 3 колонками, використовується відступ між колонками в 20px і маржа між рядами карт - 20px, що допомагає утримувати контент організованим та легким для сприйняття.

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

Кратну) Чому? В інтернеті є купа статтей на тему 8px.

Наприклад, 1920/8=240 | 1024/8=128, тобто немає "недопікселів", типу 8.11px. Це якщого говорити за сітку.

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

З власного досвіду скажу, що кратні відступи легше запамятати та використовувати.

Аби кратні були. 4, 8, 12, 16, 20...

Ось це почитайте, має допомогти зрозуміти

Організація простору в дизайні. Відступи, сітки та лейаути

Редакція ・ Серп 18 '23

#designsystem