Визуальная иерархия в веб-дизайне:

Пользователь решает за 0,05 секунды, стоит ли ему остаться на сайте. За это время он оценивает:
Контраст (что выделяется?),
Размер (где главный заголовок?),
Расположение (куда смотреть?).
Если элементы «кричат» одновременно, пользователь теряется. Пример из книги: на странице с текстом разного размера («Yоu will read this first») глаз сам находит крупный заголовок. Это работает, потому что мозг ищет упорядоченность.

Реальный пример : На сайте Apple заголовок «iPhone 15 Pro» занимает 40% экрана, фон — нейтральный, CTA-кнопка «Купить» — яркая, но не кричащая. Это сочетание размера, контраста и пространства направляет взгляд к действию.

Чем крупнее элемент, тем выше его приоритет. Но важно не переборщить:

• Заголовок (h1) : 48−64 px,
• Подзаголовок (h2) : 24−32 px,
• Текст (body) : 16−20 px.

Совет : Используйте соотношение 2:1 для заголовков и подзаголовков. Например, если h1 = 48 px, h2 = 24 px. Это создает четкую структуру.

Пример из книги : В примере с текстом разного размера (с. 89) пользователь читает в порядке убывания размера. Это работает, потому что мозг автоматически фокусируется на самом большом элементе.

Цвет — мощный инструмент, но его нужно использовать стратегически.
Правило 60/30/10 :

• 60% — основной цвет (фон, крупные блоки),
• 30% — второстепенный (текст, иконки),
• 10% — акцентный (CTA, кнопки).

Пример : На сайте Spotify фон — темно-зеленый (60%), текст — белый (30%), кнопка «Попробовать бесплатно» — ярко-зеленая (10%). Это создает фокус на действии.
Ошибка новичков : Использование 5+ акцентных цветов. Пользователь теряет ориентиры.

Глаз пользователя движется по странице в форме буквы «F»:

1. Слева направо, сверху вниз,
2. Останавливается на крупных блоках,
3. Следует за направляющими линиями (например, по диагонали).

Советы :

• Размещайте логотип и навигацию в верхнем левом углу,
• CTA-кнопки — в центре экрана или в правом верхнем углу,
• Используйте «закон близости»: связанные элементы (например, заголовок и текст) группируйте близко друг к другу.

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

Шрифты влияют на восприятие информации:

• Жирный начертание для заголовков,
• Курсив для акцентов,
• Моноширинные шрифты для кода или технического контента.

Совет : Используйте 1–2 шрифта максимум. Например, Cartloop.io использует одну гарнитуру с разными начертаниями. Это создает консистентность без хаоса.