title, created, updated, type, tags, sources, confidence
| title |
created |
updated |
type |
tags |
sources |
confidence |
| Visual Hierarchy |
2026-06-02 |
2026-06-02 |
concept |
| web-design |
| visual-hierarchy |
|
| raw/articles/crawford-20-principles.md |
| raw/articles/crawford-15-tips.md |
| raw/articles/web-design-research.md |
|
high |
Visual Hierarchy — Визуальная иерархия в веб-дизайне
Как управляется
- Размер — крупные элементы привлекают внимание первыми
- Цвет и контраст — яркий/контрастный выделяется на фоне
- Расстояние (white space) — больше пространства = больше фокуса
- Расположение — слева направо, сверху вниз (Z-паттерн)
- Вес шрифта — bold = важное, regular = менее важное
Правило из Crawford
Если всё выглядит одинаково важным — ничто не выделяется.
Gestalt-принципы
- Proximity (близость) — элементы рядом воспринимаются как группа
- Similarity (сходство) — похожие элементы = одна группа
- Figure/Ground (фигура/фон) — контраст между элементом и фоном
- Closure (замыкание) — мозг достраивает незавершённые формы
Применение в Hero Section
- Заголовок H1 — самый крупный
- Подзаголовок — меньше, цвет серый
- CTA-кнопка — контрастный цвет
- Изображение/видео — визуальная поддержка
neo
76c4c5b4fe