Самая простая в использовании система отступов

У вас есть вопрос: как не запутаться в системе отступов самому и не дать в них запутаться фронтендеру? А если такого вопроса нет, то скорее всего вы уже запутались, просто не осознаете этого.

В этом тексте поделюсь тем как я пришел к системе отступов, которую использую на крупных проектах и на чем она основана. А в конце текста будет дизайнхак, который ускорит время работы над каждым проектом в разы.

Для чего нужны фиксированные размеры в макете интерфейса.

Мы задаем фиксированные размеры в макете, так как не хотим каждый раз придумывать новые числа. Нужно от чего-то отталкиваться. На данный момент идеальное число — это 4 пикселя. Оно лучше чем 5, ведь оно делится на 2 до получения отступа даже в 1 пиксель.

4х4 делится на 2 до 1 пикселя, а 5 на 5 — нет.
4х4 делится на 2 до 1 пикселя, а 5 на 5 — нет.

Мы не хотим, каждый раз думать какое число задать в отступе. И макет станет гораздо приятнее если все отступы кратны одному числу — получается некий ритм и повторяемость пропорций.

Второе требование приходит со стороны разработки. Если все отступы заранее заданы и есть система, то даже если дизайнер ошибется в макете и поставит вместо 16px 15.5 — фронтендер сверстает по гайдлайну 16 пикселей, так как он работает в заданной системе отступов.

Получается, что отступы в первую очередь вносят определенность в работу дизайнера и верстальщика. Но тут есть проблема — все числа кратные 4 это все равно очень много.

Ряд отступов кратный 4. И это ещё мало, отступов может быть гораздо больше.
Ряд отступов кратный 4. И это ещё мало, отступов может быть гораздо больше.

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

Первые 2 группы которые нам предстоит определить берутся опять из терминологии фронтенд разработки. Есть внутренние отступы — padding и внешние — margin.

Paddings. Отступы внутри контейнера.

Для паддингов я обычно выбираю нижние значения.
Для паддингов я обычно выбираю нижние значения.

С паддингами все достаточно просто. Это отступы внутри любого контейнера от его границ. Возможно вам потребуется несколько, так как контейнеры бывают разных размеров и с разным наполнением. На картинке выше я взял 4 числа, которые буду использовать для паддингов (4,8,16,24)

Не путайте паддинги с правилом внутреннего и внешнего отступа. Паддинги это именно отступы от границ контейнера, а не все отступы внутри группы.

Margins. Внешние отступы.

Для разработчика отступы в списке задаются марджинами — свойствами объекта. Дизайнер видит отступы скорее как пустое пространство между объектами.
Для разработчика отступы в списке задаются марджинами — свойствами объекта. Дизайнер видит отступы скорее как пустое пространство между объектами.

Как же быть с этими внешними отступами? Просто помнить, что в итоге они будут не отдельными объектами в макете, а частью соседних контейнеров.

И так, у нас сейчас есть 2 группы отступов.

Самая простая в использовании система отступов

Паддинги — отступы внутри от границ контейнера

Марджины — отступы между элементами

Но этого не достаточно, так как марджины можно разделить на 2 группы. Одно дело отступы между блоками — они могут быть достаточно крупными, другое дело отступы внутри карточки или между пунктами меню.

Поэтому их стоит разбить на подгруппы и это снова поможет нам при разработке макета и верстке.

Самая простая в использовании система отступов

Теперь у нас есть:

  • Паддинги
  • Внешние марджины
  • Внутренние марджины

Эта группировка помогает по типу объекта в макете сразу задать тип отступа. Например если нужно задать отступ от границы карточки — беру паддинг не думая. Если между секциями — беру внешний марджин.

Дизайнхак, который ускоряет работу.

Мы так заморачиваемся для того, чтобы помочь себе в выборе нужных отступов и в дальнейшем тратить меньше времени. Чтобы не думать каждый раз какой из отступов выбрать — можно задать в каждой категории название «base» или «default» который можно брать не думая.

В каждой категории задано значение «Base», это отступ который я буду брать по умолчанию. Также для удобства называю остальные значения, так как в названиях ориентируюсь проще, чем в цифрах
В каждой категории задано значение «Base», это отступ который я буду брать по умолчанию. Также для удобства называю остальные значения, так как в названиях ориентируюсь проще, чем в цифрах

Теперь работа над отступами в макете будет выглядеть следующим образом: понимаем какая требуется категория, ставим дефолтный отступ. Если это плохо работает — ставим значение выше или ниже. Всё — вы гений. Казалось бы. Но нет!

Мы забыли про один параметр. Это межколонник (Gutter). Когда нужно расставить элементы в ряд нам не обойтись без этого отступа. Его нужно выделить в отдельную категорию, чтобы не искать среди прочих.

Размер межколонника зависит от колонок, которыми вы пользуетесь в макете
Размер межколонника зависит от колонок, которыми вы пользуетесь в макете

Вот теперь точно все готово, можно наслаждаться тем как просто стало работать. Ещё проще будет, если забить эту систему отступов в переменные, которые добавили в фигму и не вспоминать каждый раз какой отступ у вас базовый.

Спасибо, что уделили время этому материалу! Если понравился этот текст, то присоединяйтесь к телеграм каналу «Прагматичный дизайнер», там будет много авторской информации от дизайнера, который старается упростить и автоматизировать как можно больше в своей работе.

7373
16 комментариев

я, как дизайнер, ваще не понял — зачем мне все это нужно?

4
Ответить

Первое, что хочется спросить – а ты точно дизайнер? хаха
А если серьезно – это помогает делать отступы между элементами предсказуемыми. Что ты используешь если не систему отступов?

8
Ответить

В вебе так и хочется поставить сетку кратную 5, но логику ломают мелкие UI элементы.

Интересно услышать мнение, не зазорно ли использовать 2 сетки? х4 для паддингов внутри UI компонентов, другую х5 - для margin

Ответить

Привет, вообще нет смысла использовать 2 разные системы. Визуально разницы особой нет, но если 2 разные для особых случаев, то легко запутаться и тебе и разрабу)

1
Ответить

Зачем использовать две разных, когда можно использовать одну на все? Например, кратную 8

Ответить

Кажется если поставить лайк, запись действительно поднимется в топ :)

Ответить

Это будет превосходно. Хахах, спасибо!

Ответить