Силовые линии: как выстраивать и выравнивать контент в макете

Это невидимая линия, относительно которой располагаются элементы интерфейса.

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

Она не является частью готового дизайна, но её можно мысленно провести через:

• заголовки;
• тексты;
• кнопки;
• изображения;
• карточки;
• иконки;
• другие элементы.

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

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

• по левому краю;
• по правому краю;
• по центру.

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

Получается вертикальная силовая линия, которая удерживает всю группу элементов.

Если каждый объект в макете имеет собственное выравнивание, появляется слишком много случайных направлений, например:

• один заголовок начинается от одной точки;
• следующий текст немного правее;
• кнопка ещё правее;
• карточка использует совсем другую линию.

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

Вертикальная силовая линия часто появляется при выравнивании контента по левому краю.

Например: заголовок → текст → кнопка могут иметь одинаковую левую границу.

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

Элементы можно связывать не только вертикально. Горизонтальные линии помогают выравнивать объекты:

• по верхнему краю;
• по центру;
• по нижнему краю.

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

Принцип особенно важен при работе с повторяющимися элементами. Если в блоке расположены три карточки, одинаковые части карточек желательно выстраивать системно.

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

В дизайне может одновременно существовать несколько уровней выравнивания.

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

В этом случае у всего блока появляется ещё одна — глобальная центральная линия. Поэтому при анализе композиции важно понимать, что именно рассматривается:

• отдельный элемент;
• карточка;
• группа;
• весь блок;
• страница целиком.

Силовые линии могут изменяться от блока к блоку, например:

• Главный экран — выравнивание по левому краю.
• Следующий блок — по центру.
• Карточки — локально по левому краю.
• Следующий раздел — новая вертикальная линия.

Это не ошибка, так как важно не количество изменений само по себе, а наличие понятной логики.

Иногда нарушение установленного выравнивания становится композиционным приёмом. Например, несколько блоков подряд поддерживают одну вертикальную линию. Затем важный заголовок смещается в сторону.

Такое изменение сразу привлекает внимание. «Сломанная» линия может использоваться для:

• акцента;
• изменения ритма;
• выделения новой смысловой части;
• создания более динамичной композиции.

После этого следующие элементы могут уже поддерживать новую линию. Главное — чтобы нарушение было намеренным. Если объект случайно смещён на несколько пикселей и никак не связан с другими элементами, это выглядит скорее как ошибка.

Модульная сетка и силовые линии помогают решать похожую задачу — создавать порядок, — но работают по-разному.

Модульная сетка задаёт основной каркас страницы. Она помогает определить расположение крупных блоков и групп контента.

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

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

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

• модульной сетки;
• внутренних отступов;
• внешних расстояний;
• общей композиционной логики.

Дополнительные силовые линии стоит создавать только тогда, когда они действительно помогают контролировать макет.

Выбор во многом зависит от визуальной стилистики проекта.

Можно использовать небольшое количество ярко выраженных силовых линий и строить вокруг них большую часть композиции.

Это усиливает ощущение порядка и большого количества свободного пространства.

Если в макете много разных блоков и графических решений, основным инструментом удобнее сделать модульную сетку, а силовые линии использовать локально.

Так дизайнер получает достаточно свободы и при этом сохраняет систему.

Если несколько элементов можно расположить относительно одной линии, лучше использовать это решение.

Каждая новая линия должна иметь понятную функцию.

Выравнивание работает в обоих направлениях.

Внутри карточки может быть одна линия, а у всего блока — другая.

Главное — делать это осознанно.

Смещение может создавать акцент, но случайное нарушение выравнивания делает макет неаккуратным.

Они должны дополнять модульную сетку, а не полностью заменять её.

Благодаря им элементы не просто располагаются рядом, а начинают визуально взаимодействовать друг с другом. Правильно используемые силовые линии помогают:

• сделать макет аккуратнее;
• уменьшить количество случайных выравниваний;
• связать разные блоки;
• создать понятную визуальную систему;
• управлять ритмом и акцентами.

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

Перейти к следующему уроку