---
title: Visual Hierarchy
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, visual-hierarchy]
sources:
  - raw/articles/crawford-20-principles.md
  - raw/articles/crawford-15-tips.md
  - raw/articles/web-design-research.md
confidence: high
---

# Visual Hierarchy — Визуальная иерархия в веб-дизайне

## Как управляется
- **Размер** — крупные элементы привлекают внимание первыми
- **Цвет и контраст** — яркий/контрастный выделяется на фоне
- **Расстояние (white space)** — больше пространства = больше фокуса
- **Расположение** — слева направо, сверху вниз (Z-паттерн)
- **Вес шрифта** — bold = важное, regular = менее важное

## Правило из Crawford
> Если всё выглядит одинаково важным — ничто не выделяется.

## Gestalt-принципы
- **Proximity** (близость) — элементы рядом воспринимаются как группа
- **Similarity** (сходство) — похожие элементы = одна группа
- **Figure/Ground** (фигура/фон) — контраст между элементом и фоном
- **Closure** (замыкание) — мозг достраивает незавершённые формы

## Применение в Hero Section
1. Заголовок H1 — самый крупный
2. Подзаголовок — меньше, цвет серый
3. CTA-кнопка — контрастный цвет
4. Изображение/видео — визуальная поддержка