Бывает такое: вроде и цвета подобраны по всем правилам, и шрифты использованы премиальные, и картинки качественные, а смотришь на макет - и что-то не так. Глаз цепляется за пустоту, взгляд мечется, нет ощущения целостности.
Это композиция. Или её отсутствие.
Композиция - это скелет любого визуального произведения. Можно навесить на скелет самую красивую «одежду» (цвета, шрифты, иллюстрации), но если кости сломаны, ничего не спасет.
В этой статье разбираем базовые законы композиции. Это не абстрактное «искусство», а конкретные правила, которые работают всегда.
Что такое композиция и зачем она нужна
Если максимально просто: композиция - это то, как элементы расположены относительно друг друга и как глаз по ним движется.
Хорошая композиция = глаз скользит легко, взгляд попадает туда, куда нужно, информация усваивается без усилий. Макет не утомляет.
Плохая композиция = глаза разбегаются, непонятно, на что смотреть первым, возникает подсознательное желание закрыть вкладку.
Законы композиции не придуманы художниками ради занудства. Они основаны на том, как устроено человеческое восприятие - как наш мозг группирует объекты, ищет смысл и экономит ресурсы. В психологии это называется гештальт-принципами.
Пять фундаментальных законов композиции
1. Закон целостности
Макет должен восприниматься как единое целое, а не как случайный набор элементов, которые оказались в одном файле.
Как этого добиться:
Используйте ограниченную цветовую палитру (3-4 цвета, не больше).
Повторяйте формы и линии. Если в дизайне есть скругленные углы, пусть они повторяются в кнопках, карточках и иллюстрациях.
Создавайте визуальные связи. Элементы должны «дружить» друг с другом, а не враждовать.
Пример: Представьте, что вы смотрите на стаю птиц. Даже если птицы разные, движение и общее направление создают ощущение целого. Так и в дизайне.
2. Закон контраста
Если всё одинаковое - это скучно. Глазу нужны перепады, чтобы цепляться за важное.
Контраст бывает разным:
Размер: Огромный заголовок рядом с мелким подзаголовком.
Цвет: Яркий акцент на нейтральном фоне.
Форма: Острые углы рядом с плавными округлостями.
Фактура: Гладкая поверхность на шероховатой.
Насыщенность: Яркий объект среди приглушенных.
Важно: Контраст работает только тогда, когда разница очевидна. Если вы делаете разницу в размере шрифта 2 пункта - это не контраст, это опечатка. Либо четко, либо никак.
3. Закон акцента
У каждого макета должен быть один главный герой. Один элемент, который притягивает взгляд в первую очередь. Всё остальное - окружение.
Если главных героев несколько:
Глаз не знает, на что смотреть, начинает метаться. В результате не запоминается ничего. Это как на вечеринке, где все одновременно кричат, - невозможно разобрать ни одного голоса.
Как сделать акцент:
Самый крупный элемент на странице.
Самый яркий (насыщенный) цвет.
Необычная форма, которая выделяется на фоне других.
Обилие пустого пространства вокруг (воздух сам по себе создает акцент).
4. Закон баланса
Макет не должен заваливаться на один бок. Баланс - это ощущение устойчивости. Даже если дизайн динамичный, он должен оставаться уравновешенным.
Два типа баланса:
Симметричный баланс - левая часть зеркально повторяет правую (или верхняя - нижнюю).
Ощущение: Надежность, стабильность, официальность, классика.
Где используют: Сайты премиальных брендов, банки, юридические фирмы, свадебные приглашения.
Минус: Может быть скучноват, если не добавить небольшие нюансы.
Асимметричный баланс - слева большой объект, справа несколько маленьких, которые уравновешивают его визуальный вес.
Ощущение: Динамика, современность, движение, креативность.
Где используют: Стартапы, креативные агентства, журналы, молодежные бренды.
Сложность: Требует насмотренности. Новички часто вместо баланса получают хаос.
Как работает визуальный вес:
Крупные объекты весят больше мелких.
Темные объекты весят больше светлых.
Яркие объекты весят больше приглушенных.
Сложные формы весят больше простых.
5. Закон ритма
Глаз любит двигаться по макету. Ритм задает направление этого движения и делает просмотр предсказуемым и комфортным.
Что создает ритм:
Чередование: Большой элемент - маленький - большой. Квадрат - круг - квадрат.
Линии: Любые направляющие (края объектов, взгляды людей на фото) ведут взгляд туда, куда нужно.
Повторы: Одинаковые интервалы между карточками товаров, повторяющиеся формы.
Пример: Полка с книгами, где книги стоят ровно через равные промежутки, - это ритм. Беспорядочная куча книг - отсутствие ритма.
Приемы управления вниманием
Помимо законов, есть конкретные техники, которые работают на уровне физиологии.
Правило третей
Делим макет на 9 равных частей (3 по горизонтали, 3 по вертикали). Важные элементы располагаем на пересечениях линий или вдоль них.
Почему работает: Глаз естественным образом тяготеет к этим точкам, а не к центру.
F-паттерн
В западной культуре (и в России тоже) мы читаем слева направо, сверху вниз. Глаз движется по траектории буквы F:
Сначала читаем верхнюю строку целиком.
Потом опускаемся чуть ниже и читаем вторую строку - но уже не до конца.
Дальше скользим вниз по левому краю.
Как использовать: Самую важную информацию - в верхний левый угол. Там должно быть название, главный заголовок, ключевое предложение.
Z-паттерн
Для макетов с меньшим количеством текста (лендинги, постеры) взгляд движется по букве Z:
Левый верхний угол (вход)
Правый верхний угол (основная информация)
Левый нижний угол (второстепенное)
Правый нижний угол (призыв к действию)
5 ошибок новичков, которые убивают композицию
1. Всё в кучу
Элементы лепятся друг к другу, нет воздуха, нет полей. Глазам тесно, информация не читается, возникает клаустрофобия.
2. Всё порознь
Обратная крайность. Огромные отступы, элементы разбросаны по углам, нет визуальной связи. Макет рассыпается на отдельные фрагменты.
3. Нет иерархии
Заголовок, подзаголовок, основной текст и сноска набраны одним размером и одним начертанием. Глаз не понимает, что важно, и пытается прочитать всё подряд.
4. Центрирование всего подряд
Текст по центру, картинка по центру, кнопка по центру. Это самый простой способ, но он работает только в двух случаях: в школе (когда не знаешь, как сделать иначе) и в похоронных бюро (где требуется формальность).
5. Забыли про края
Элементы прилипают к границам макета. В типографике это называется «отсутствие полей». Выглядит непрофессионально и создает ощущение, что дизайн обрезали случайно.
Лайфхаки для повседневной работы
Используйте сетки
Сетка - это невидимый скелет, который держит всю композицию. В Figma она включается одним нажатием (Shift + R). Научитесь работать с сеткой, и макеты перестанут «плыть».
Правило близости
Связанные элементы должны быть рядом. Заголовок - сразу над текстом, а не через полсантиметра. Товар - рядом с ценой, а не в противоположном углу. Глаз автоматически группирует близкие объекты.
Воздух - это не пустота
Пустое пространство (negative space) - это не ошибка и не признак того, что «надо чем-то заполнить». Воздух дает глазу отдохнуть, выделяет важные элементы и создает ощущение дороговизны. Премиальные бренды используют воздух как один из главных инструментов.
Проверяйте «сощуркой»
Самый быстрый способ оценить композицию: прищурьте глаза (или снимите очки) и посмотрите на макет. Видны только крупные пятна и общая структура. Сразу понятно:
- Есть ли баланс или всё заваливается в угол.
- Есть ли акцент или всё сливается в серую массу.
- Есть ли иерархия или все блоки одинаковые.
Композиция – это про систему. Освойте эти пять законов, перестанете совершать типичные ошибки и начнете проверять работы «сощуркой» - ваши макеты перестанут распадаться.
А главное, вы сможете объяснять клиентам и коллегам почему одно расположение работает, а другое - нет. А это уже уровень профессионала, которому доверяют.