Композиция, сетка и типографика

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

В редакционной сетке из Refframe структура намеренно видима. Фотографии и текст занимают разные ячейки, контуры подчёркивают систему, пустые блоки участвуют в ритме. Макет остаётся выразительным, потому что отношения между частями понятны.

Правило 1. Первый взгляд должен иметь точку назначения

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

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

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

Правило 2. Интервалы должны показывать отношения

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

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

Вопрос для проверки: если убрать границы и фоновые плашки, группировка останется понятной?

Правило 3. Выравнивайте решения, а не каждый объект

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

Выразительный объект может выходить за колонку. Изображение может bleed за контейнер, а заголовок - занимать несколько треков. Исключение работает, когда базовое выравнивание остаётся заметным в других элементах.

Вопрос для проверки: проведите вертикали через основные края. Какие линии повторяются, а какие смещения имеют причину?

Правило 4. Сетка должна описывать промежуточное поведение

Десктопная и мобильная сетки не объясняют переход между ними. Зафиксируйте максимальную ширину контейнера, поля, количество колонок, минимальную ширину карточек, перенос, порядок и точку смены режима.

Auto Layout в Figma управляет направлением, интервалами, padding, выравниванием, переносом и пределами размеров. Используйте эти свойства для моделирования отношений, а затем проверяйте реализацию в браузере между заданными фреймами.

WCAG 2.2 требует reflow без потери информации и двумерного скролла на ширине, эквивалентной 320 CSS-пикселям, кроме сценариев, где двумерная раскладка действительно необходима. Наличие мобильного скриншота ещё не делает композицию адаптивной.

Правило 5. Типографические роли должны различаться

Сначала определите функции: display, заголовок страницы, секции и карточки, основной текст, метка и подпись. У каждой роли есть назначение и устойчивое сочетание семейства, начертания, размера и межстрочного интервала.

Не стройте иерархию только размером. Её поддерживают вес, интервалы, положение, ширина и цвет. Но и не делайте каждую роль уникальной: избыток стилей разрушает ритм.

Для длинного текста задайте удобную меру строки. Универсального числа нет: результат зависит от шрифта, языка, размера и сценария. USWDS рассматривает measure как токенизированное решение. Это полезная модель: основной текст, компактная карточка и дисплейный заголовок получают осознанные роли ширины.

Вопрос для проверки: можете ли вы назвать каждый текстовый стиль по функции, не ссылаясь на числовой размер?

Правило 6. Контраст и масштаб должны выдерживать реальность

Бледная подпись может выглядеть тонко на дизайнерском мониторе и исчезнуть на ноутбуке при дневном свете. WCAG 2.2 требует контраст не менее 4,5:1 для обычного текста и 3:1 для крупного, с оговорёнными исключениями. Текст также должен увеличиваться до 200 процентов без потери содержания и функций.

Проверяйте состояния: placeholder, disabled, error, hover, focus и текст поверх изображения. Не используйте только цвет для передачи статуса. Увеличьте текст и интервалы во время ревью; компоненты должны расти или перестраиваться, а не обрезать содержимое.

Используйте референсы для проверки решения

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

Перед сдачей макета спросите:

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

Золотое правило заслуживает места только тогда, когда помогает заметить поломку раньше пользователя.