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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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