Иерархия, сетка и пустое место

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

Куда посмотрит человек

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

Чем управляется порядок:

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

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

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

Заголовок: 2.4 rem Расстояние между секциями: 24 px (3 × 8) Колонок в сетке: 3

Действие как все ссылки Цветом Цветом и размером

Прищуриться (размыть)

Ваш проект

Ваш проект

Короткое описание: что это и для кого. Подробнее Ещё

Главное действие

Первый раздел

Несколько строк обычного текста раздела.

Второй раздел

Несколько строк обычного текста раздела.

Третий раздел

Несколько строк обычного текста раздела.

Первым глаз заметит: Заголовок.

1. Заголовок
2. Заголовки разделов
3. Обычный текст
4. Главное действие

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

Проверьте себя: чем создают визуальную иерархию?

Размером, весом, цветом и контрастом, положением и пустым местом вокруг. Главное отличается, остальное спокойнее.

Тест прищуривания

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

Группировка: близость и сходство

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

• Близость. Что стоит рядом, то воспринимается как одно целое. Заголовок раздела должен быть ближе к своему тексту, чем к предыдущему разделу. Это самая частая ошибка: пустое место между заголовком и абзацем такое же, как между абзацем и следующим заголовком, и заголовок «плавает».
• Сходство. Одинаково оформленное воспринимается как однотипное: все карточки услуг должны быть оформлены одинаково, а главная кнопка ничем не должна напоминать остальные.
• Выравнивание. То, что стоит по одной линии, кажется связанным. Поэтому выравнивание по левому краю и по сетке сразу делает страницу «собранной».
• Контраст. Отличающийся элемент притягивает взгляд.

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

Проверьте себя: что делает близость?

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

Сетка и пустое место

Сетка это невидимая разметка страницы: столбцы одинаковой ширины и промежутки между ними. Все блоки встают по линиям сетки, и поэтому страница выглядит собранной. В CSS сетка делается свойством display: grid, которое вы изучали в предыдущей части.

Почему именно 12 колонок? Число 12 делится на 2, 3, 4 и 6, поэтому из 12 колонок складываются полосы на половину, на треть, на четверть и на шестую часть. На телефоне колонок обычно четыре: больше просто не поместится.

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.card {
  grid-column: span 4; /* три карточки в ряд */
}

Пустое место делят на два вида. Малое это отступы внутри компонента и между строками. Большое это промежутки между секциями и поля вокруг страницы. Новички экономят и сжимают всё: кажется, что пустота пропадает зря. На деле пустота это то, что делает остальное читаемым и «дорогим». Многие лучшие страницы почти целиком из воздуха.

Базовый шаг. Чтобы отступы не придумывать заново, берут один шаг, например 8 пикселей, и все отступы делают кратными ему: 8, 16, 24, 32, 48, 64. Material Design, Carbon от IBM и дизайн-система Atlassian используют шаг в 8 пикселей (или в 4 для мелочи). Одно значение хранят в переменной, а остальные считают от него:

:root {
  --space: 8px;
}
.section {
  padding: calc(var(--space) * 6);
}

А ещё важна ширина строки. Текст, который тянется на всю ширину монитора, тяжело читать: глаз теряет начало следующей строки. Удобная длина от 45 до 75 знаков, около 65. В CSS её задают единицей ch (ширина цифры «0» в текущем шрифте): max-width: 65ch.

Проверьте себя: зачем нужен базовый шаг отступов?

Чтобы все отступы были кратны одному числу: ритм ровный, а выбор проще. Цифру хранят в одной переменной.

Практика

Постройте страницу вашего проекта так, чтобы иерархия работала. В index.html расставьте уровни: название в h1, каждый раздел карточкой с h2, главное действие ссылкой с классом cta. В styles.css опишите два значения на :root (шаг отступов и ширину строки) и сетку.

Когда проверки пройдут, сделайте ещё одно, уже без проверок: прищурьтесь на предпросмотр. Если заметнее всего главное действие, вы справились. Если нет, увеличьте его вес или уберите яркость у соседей.

Что было не так с 2014 годом

В 2014 году сетки считали вручную и жёстко: 12 колонок по 60 пикселей и поля по 20, всего 960. Такая сетка не растягивалась, и для телефонов приходилось делать вторую. Сегодняшний grid сам делит доступную ширину, поэтому сетка стала гибкой, а принцип остался прежним.