Композиция: якорные объекты и управление вниманием пользователя

Это система правил, которая помогает организовать элементы страницы так, чтобы информация воспринималась быстро, последовательно и понятно.

Это элемент композиции (как точка, так и линия), который первым или одним из первых привлекает внимание.

Это свободная область вокруг элемента.

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

Хорошая композиция не просто делает интерфейс визуально привлекательным. Она показывает пользователю, куда смотреть, что является главным и в какой последовательности изучать контент.

Одними из инструментов управления вниманием являются якорные объекты и контрпространство.

Композиционные правила можно условно разделить на три группы.

Для этого используются:

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

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

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

Далее нужно убрать хаос и визуальный шум. Для этого используются:

• модульная сетка;
• силовые линии;
• повторяющиеся модули;
• пропорции;
• единая система расположения контента.

Все три группы работают вместе.

Якорным объектом может стать:

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

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

Если каждый элемент страницы:

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

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

Один объект может быть главным, несколько — поддерживающими, остальные — более спокойными.

Чем меньше визуальных конкурентов находится рядом с объектом, тем легче его заметить. Простейший пример — маленькая точка на большом однотонном листе. Несмотря на её размер, взгляд практически сразу обнаруживает точку именно благодаря огромному количеству свободного пространства вокруг.

Этот же принцип работает в интерфейсах.

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

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

Поэтому свободное пространство следует воспринимать как полноценный элемент дизайна.

Один из способов организовать якорные объекты — мысленно вписать композицию в прямоугольник. Такой принцип естественен для цифровых интерфейсов. Большинство окружающих пользователя экранных форм прямоугольные:

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

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

• логотип;
• меню;
• кнопка;
• заголовок;
• изображение.

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

Сам прямоугольник при этом не рисуется — пользователь воспринимает его благодаря расположению элементов.

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

Это позволяет сохранить воздух и не перегружать страницу декоративными элементами.

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

• дать контенту больше воздуха;
• усилить главный объект;
• избежать перегруженности;
• сохранить визуальный баланс.

Поэтому не нужно автоматически воспринимать пустоту как проблему, которую необходимо чем-то заполнить.

Границы композиции могут задаваться разными способами.

Это отдельный заметный объект:

• логотип;
• кнопка;
• иконка;
• небольшой графический элемент.

Это протяжённый объект:

• подчёркивание;
• линия;
• край изображения;
• граница цветовой плашки.

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

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

• страница содержит прямоугольные блоки;
• блок содержит несколько карточек;
• карточка содержит иконку, текст и кнопку.

На каждом уровне можно создать собственную устойчивую композицию. Поэтому интерфейс можно представить как систему вложенных модулей — своеобразную матрёшку.

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

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

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

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

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

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

При создании главного экрана или отдельного блока сначала стоит определить основные точки внимания, например:

• логотип;
• главный заголовок;
• ключевой визуал;
• CTA;
• дополнительный навигационный элемент.

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

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

Якорные объекты и принцип прямоугольника — только часть общей системы. При создании макета одновременно используются:

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

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

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

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

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