Initial commit: 79+ design patterns, LLM prompts, and assets

concepts/visual-hierarchy.md

@@ -0,0 +1,36 @@
+---
+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. Изображение/видео — визуальная поддержка