Выстраивай визуальную иерархию

Визуальная иерархия

Язык

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

Масштаб заголовка, подзаголовка и текста
Размер типа выражает важность.
Иерархия героя и сайдбара
Контраст несёт больше, чем рамки.

Один фокус на вид

Если всё кричит — ничего не слышно. Цепочка: заголовок → деталь → действия. Приглушайте второстепенное.

Типографика как система

Ограничьте ступени размера и насыщенности; ровные интерлиньяжи; сетка. Скачки гарнитур без причины дают шум.

Дисциплина цвета

Яркий цвет — для CTA и статусов; тело нейтрально. Много акцентов выравнивают иерархию.

Практики

  • Масштаб типа с токенами (display, title, body).
  • Метаданные тише основных подписей.
  • Кадрируйте изображения так, чтобы взгляд вёл к CTA.

Типичные ошибки

  • Капс-абзацы (плохо читаются).
  • Несколько «главных» кнопок подряд.
  • Подчёркивание не у ссылки ради акцента.