Блог Тильды

Как работать с отступами в дизайне сайтов

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

Принцип близости

Расположенные рядом друг с другом объекты мы воспринимаем как одну группу. Это значит, что связи между элементами создаются с помощью расстояний.

Как применить в создании сайтов

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

В Тильде отступы между блоками удобнее всего задавать в Настройках. Вы можете выбрать, где задать отступ — сверху или снизу — и выбрать нужное значение.

Как это работает внутри блока

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

Как применить в типографике

В типографике тоже работает правило внутреннего и внешнего. Так для абзаца текста расстояние между словами будет внутренним, между строками — внешним. Значит, интерлиньяж должен быть визуально больше пробела. Если к этому тексту добавить заголовок, он станет внешним для абзаца. А значит, отступ до него нужно сделать больше интерлиньяжа.
Made on
Tilda