Система отступов в дизайне: основы и лучшие практики

Отступы в дизайне вашего портала – это нечто большее, чем просто пустое расстояние между отдельными блоками контента и элементами оформления страницы. Это настоящий профессиональный инструмент, который в руках умелого специалиста превращает хаотичный набор отдельных составляющих в логичную, удобную и эстетичную композицию.

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

Зачем нужна система отступов в веб–дизайне?

Свободное пространство между блоками и элементами решает три ключевые задачи:

Создает визуальную иерархию. Разный размер расстояния между элементами демонстрирует их взаимосвязь. Например, заголовок и подзаголовок статьи могут располагаться ближе друг к другу, чем к следующему разделу или другим компонентам дизайна.
Улучшает юзабилити. Пользователь не должен «заблудиться» в интерфейсе ресурса, даже если разделов на сайте много. Четкие отступы позволяют с легкостью находить нужные кнопки, формы или тексты.
Делает дизайн «воздушным». Перегруженность элементами вызывает у пользователя чрезмерную когнитивную нагрузку и желание как можно быстрее закрыть вкладку. Отступы между блоками в веб–дизайне дают контенту «дышать»: это особенно важно для взаимодействия с ресурсом на небольших экранах мобильных устройств.

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

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

Технические инструменты для создания «воздуха» в макете

Верстка отступов осуществляется с помощью работы с CSS–свойствами элементов:

Margin – пространство между блоками или внешние отступы;
Padding – пространство между содержимым элемента и его границей, или внутренние отступы;
Gap – расстояние между элементами внутри контейнера.

Чтобы отступы адаптировались под разные диагонали экранов, важно использовать относительные единицы (например, %). Если дизайном это не оправдано, то применения фиксированных значений (например, margin: 20 px) стоит избегать.

5 правил отступов в веб–дизайне

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

Правило 8–ми пикселей

Большинство современных дизайн–систем (Material Design, Apple Human Interface) основаны именно на 8–ми пиксельной сетке. Это значит, что все отступы и размеры отдельных компонентов дизайна на странице кратны 8: 8,16,24 пикселя и так далее. Придерживайтесь этих размеров при создании своих макетов, ведь 8 px – это минимальный шаг отступов, который заметен на любом экране. Его применение создает визуальную гармонию и упрощает адаптацию сайта под мобильные устройства.

Правило вертикального ритма

Чтобы создать так называемый вертикальный ритм, нужно использовать расстояния между строками текста и основными блоками контента, кратные одному значению – например, 1,5 Х высота строки.

Для того чтобы добиться вертикального ритма, необходимо установить межстрочный интервал (line–height в CSS–свойствах) 1,5–1,7, а затем – использовать верхний и нижний отступ (margin-top/margin-bottom), кратный этому значению.

Правило близости

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

Большой ошибкой будет расположить связанные элементы на расстоянии 40 px, а несвязанные – на 20 px. Так вы не только убьете логику, но и вызовете диссонанс у посетителя ресурса.

Правило консистентности дизайна

Отступы не должны меняться от страницы к странице проекта: определив единые значения, необходимо придерживаться их на всем портале. Чтобы упростить верстку, можно создать таблицу отступов в Figma или использовать CSS-переменные.

Правило адаптивности

Выбирая размер отступов для своего макета, учитывайте, что в мобильной версии они будут уменьшены примерно в 2 раза. Важно, чтобы сайт было одинаково удобно просматривать как на ПК, так и со смартфона, а близкое расположение элементов не мешало взаимодействовать с порталом: нажимать кнопки, переходить в разделы, заполнять формы.

Ловушки отступов: ошибки, которые следует избегать дизайнерам

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

Избегать мешанины из разных значений. Использование 5 px, 13 px и 24 px в одном дизайне приведет к тому, что вы разрушите визуальную иерархию сайта;
Учитывать вертикальный ритм. Если игнорировать это правило, заголовки «повиснут в воздухе», а подписи к изображениям «прилипнут» к идущим за ними блокам;
Забыть об отступах через тег <br> или пробелы. Новички часто прибегают к такой хитрости, чтобы избавить себя от неприятного взаимодействия с CSS–стилями и работы с кодом. Однако управлять размером таких отступов сложно, а в мобильных версиях такая верстка ломается;
Не пренебрегать тестированием. Отступы, которые идеально выглядят на десктопе, могут «разъехаться» на экране смартфона. Проверьте, как макет выглядит на разных устройствах и покажите его фокус–группе: до запуска можно найти не самые очевидные проблемы дизайна, напрямую влияющие на конверсию.

Чем чревато неправильное использование отступов в веб–дизайне? В зависимости от специфики проекта, над которым вы работаете, проблем может «всплыть» масса. Так, небольшое расстояние между карточками товаров на сайте интернет–магазина негативно влияет на продажи: товары сливаются, и пользователи попросту не могут ничего выбрать в мешанине из фото и описаний.

Маленькие отступы «убивают» читаемость блогов, особенно если речь идет о лонгридах: длинные абзацы утомляют глаза, а простое увеличение интерлиньяжа и поля вокруг текста способны сфокусировать внимание посетителя ресурса на контенте и повысить время, проведенное на странице, на 20%.

Губительны неправильно подобранные отступы и для корпоративных порталов: пользователи не замечают форм и кнопок с призывом к действию и попросту их игнорируют, ведь из-за небольшого расстояния до других элементов они сливаются с дизайном. Система отступов – это незаметный, но такой важный фундамент, на котором строится вся концепция ресурса. В отличие от фасада – дизайна, он не так бросается в глаза, однако отсутствие этого компонента бросается в глаза сразу.

Визуальный редактор кода Taptop позволяет легко и просто настраивать отступы, добавляя в ваш макет воздуха, даже если вы совсем не умеете работать с кодом и CSS-стилями.

Расстояние между элементами и размер полей можно менять непосредственно на Холсте или работая с вкладкой Стилей. В первом случае, вы устанавливаете расстояния вручную, а во втором – система автоматически расставляет элементы, учитывая указанный вами размер в пикселях. При этом на Холсте можно одновременно менять как внешние, так и внутренние отступы со всех сторон элемента всего парой кликов мыши. Подробнее о настройке отступов мы рассказали в Базе знаний. Кроме того, в Taptop есть классы: настроив расстояние между элементами на одной странице, вы с легкостью сделаете дизайн консистентным, перенеся заданные параметры на весь проект.

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