neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
37 lines
1.8 KiB
Markdown
37 lines
1.8 KiB
Markdown
---
|
|
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. Изображение/видео — визуальная поддержка
|