444 lines
19 KiB
Markdown
444 lines
19 KiB
Markdown
---
|
||
title: Market Leader Web Design Algorithm
|
||
created: 2026-06-02
|
||
updated: 2026-06-02
|
||
type: concept
|
||
tags: [web-design, design-system, web-design]
|
||
sources:
|
||
- concepts/ux-principles.md
|
||
- concepts/apple-hig-principles.md
|
||
- concepts/material-design-3-guide.md
|
||
- concepts/russian-user-psychology.md
|
||
- concepts/russian-ui-patterns.md
|
||
- concepts/russian-market-leaders.md
|
||
- concepts/russian-top-landings-analysis.md
|
||
- concepts/web-conversion-optimization.md
|
||
- concepts/clarity-vs-creativity.md
|
||
- concepts/web-performance-core-web-vitals.md
|
||
confidence: high
|
||
---
|
||
|
||
# Market Leader Web Design Algorithm — Алгоритм создания дизайна сайта-лидера рынка в РФ на Astro
|
||
|
||
> **Формула:** Мировой дизайн + РФ-специфика + производительность Astro = лидер рынка
|
||
>
|
||
> *Основано на синтезе 25 страниц wiki по веб-дизайну, UX, психологии и РФ-рынку.*
|
||
|
||
---
|
||
|
||
## Фаза 0: Стратегия (до любого кода)
|
||
|
||
### 0.1. Определить нишу и конкурентов
|
||
- **Какой рынок?** (недвижимость, услуги, e-commerce, B2B, образование)
|
||
- **Кто лидеры в РФ?** (посмотреть [[russian-market-leaders]] для референса)
|
||
- **Что у них плохо?** (обычно: перегруженность, скорость, отсутствие доступности, слабая персонализация)
|
||
- **Чья аудитория?** B2C или B2B? Регион? Платёжеспособность?
|
||
|
||
### 0.2. Определить 1 главную цель (Crawford: one clear CTA)
|
||
Не "красивый сайт", а:
|
||
- "Получить заявку на оценку недвижимости"
|
||
- "Оформить подписку на сервис"
|
||
- "Заказать звонок по услуге"
|
||
|
||
**Всё остальное подчинено этой цели.** ([[clarity-vs-creativity]])
|
||
|
||
### 0.3. Выбрать цветовую схему (с учётом РФ-психологии)
|
||
- **Финансы / B2B** → синий (доверие, стабильность) + белый
|
||
- **E-commerce / Скидки** → красный (победа, праздник) + белый
|
||
- **Beauty / Премиум** → чёрный + золотой/бордовый
|
||
- **Технологии / Инновации** → тёмная тема + неоновый акцент
|
||
- **Услуги / Медицина** → белый + бирюзовый/зелёный
|
||
|
||
*Правило 60-30-10: 60% фоновый, 30% вторичный, 10% акцентный. ([[web-color-theory]])*
|
||
|
||
### 0.4. Определить тон коммуникации
|
||
- **B2C** → «ты», прямой, честный, без «синергии» ([[russian-user-psychology]])
|
||
- **B2B / Премиум** → «Вы», сдержанный, факты и цифры
|
||
- **Молодёжь** → дерзкий, как Tinkoff
|
||
- **Консервативный** → надёжный, как Сбер
|
||
|
||
---
|
||
|
||
## Фаза 1: Архитектура
|
||
|
||
### 1.1. Sitemap (минимум страниц)
|
||
По Crawford: *«Fewer pages, stronger pages. Каждый лишний клик теряет пользователя.»*
|
||
|
||
Для типового сайта:
|
||
```
|
||
/ → Hero + преимущества + соцдоказательство + CTA
|
||
/uslugi/ → Карточки услуг (Bento Grid)
|
||
/usluga-1/ → Детально: проблема → решение → цена → CTA
|
||
/o-nas/ → Команда, цифры, кейсы (НЕ резюме!)
|
||
/otzyvy/ → Яндекс.Отзывы + видеоотзывы (обязательно)
|
||
/kontakty/ → Карта (Яндекс.Карты), реквизиты ИНН/ОГРН, телефон
|
||
/blog/ → SEO-контент, экспертные статьи
|
||
/politika/ → 152-ФЗ, оферта, возврат (юридический минимум)
|
||
```
|
||
|
||
### 1.2. User Flow (пользовательский путь)
|
||
```
|
||
Главная → за 2 секунды понять "что/кому/зачем" → CTA
|
||
↓ если не готов
|
||
Услуги → сравнительная таблица → CTA
|
||
↓ если не готов
|
||
Отзывы → кейсы → CTA
|
||
↓ если не готов
|
||
Блог → экспертность → CTA
|
||
```
|
||
|
||
**Правило: после каждого блока — CTA.** Не только вверху и внизу.
|
||
|
||
### 1.3. Определить сигналы доверия (РФ-специфика)
|
||
**Обязательно для РФ:**
|
||
- **ИНН/ОГРН в подвале** — без них сайт = мошеннический в глазах РФ-пользователя
|
||
- **Telegram / WhatsApp** — плавающая кнопка чата на всех страницах
|
||
- **Яндекс.Отзывы** — виджет с рейтингом
|
||
- **Способы оплаты** — логотипы (Visa, MC, Мир, SBP, Tinkoff Pay)
|
||
- **8-800 телефон** — если бюджет позволяет
|
||
- **Фото реальной команды** — не сток ([[social-proof-trust]])
|
||
|
||
---
|
||
|
||
## Фаза 2: Дизайн-система (Astro tokens)
|
||
|
||
### 2.1. Design Tokens (в CSS custom properties)
|
||
```css
|
||
/* ===== ЦВЕТА ===== */
|
||
--color-primary: #...; /* основной бренда */
|
||
--color-on-primary: #...; /* текст на primary */
|
||
--color-surface: #...; /* фон страницы */
|
||
--color-surface-alt: #...; /* альтернативный фон (секции) */
|
||
--color-text: #...; /* основной текст (≥4.5:1 контраст) */
|
||
--color-text-secondary: #...; /* второстепенный */
|
||
--color-accent: #...; /* CTA-кнопки, ссылки */
|
||
--color-error: #...; /* ошибки */
|
||
--color-success: #...; /* успех */
|
||
|
||
/* ===== ТИПОГРАФИКА ===== */
|
||
--font-heading: 'Inter', sans-serif;
|
||
--font-body: 'Inter', sans-serif;
|
||
--font-mono: 'JetBrains Mono', monospace;
|
||
--fs-h1: clamp(2.5rem, 5vw, 4.5rem);
|
||
--fs-h2: clamp(1.75rem, 3vw, 2.5rem);
|
||
--fs-body: clamp(1rem, 1.2vw, 1.125rem);
|
||
--fs-small: 0.875rem;
|
||
--line-height: 1.6;
|
||
--line-height-heading: 1.15;
|
||
|
||
/* ===== ОТСТУПЫ ===== */
|
||
--space-xs: 0.25rem;
|
||
--space-sm: 0.5rem;
|
||
--space-md: 1rem;
|
||
--space-lg: 2rem;
|
||
--space-xl: 4rem;
|
||
--space-2xl: 8rem;
|
||
--section-padding: clamp(4rem, 8vw, 8rem);
|
||
|
||
/* ===== СКРУГЛЕНИЯ ===== */
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 16px;
|
||
--radius-full: 9999px;
|
||
|
||
/* ===== ТЕНИ ===== */
|
||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
|
||
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
|
||
--shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
|
||
|
||
/* ===== ПРОЧЕЕ ===== */
|
||
--max-width: 1280px;
|
||
--header-height: 72px;
|
||
--transition: 200ms ease;
|
||
```
|
||
|
||
*Источник: [[material-design-3-guide]] — 40+ color tokens, Design Tokens system*
|
||
|
||
### 2.2. Кириллическая типографика
|
||
- **Длина текста**: русский текст на 30% длиннее английского. Кнопки шире, заголовки короче.
|
||
- **Шрифты**: Inter, Golos Text, PT Root UI, SF Pro Display (с кириллицей). Не Montserrat (перекос).
|
||
- **Кавычки**: «ёлочки» (`«` `»`), не "лапки", если внутри кавычек — „лапки“.
|
||
- **Тире**: длинное `—` (U+2014). Между цифрами — короткое `–` (U+2013).
|
||
- **Межстрочный**: для кириллицы 1.5–1.7 (из-за высоты букв).
|
||
- **Размер body**: 16px минимум, 18px для блогов.
|
||
|
||
*Источник: [[web-typography]]*
|
||
|
||
### 2.3. Тёмная тема (обязательно для лидера)
|
||
```css
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--color-surface: #121212; /* не #000 — меньше усталости глаз */
|
||
--color-surface-alt: #1E1E1E;
|
||
--color-text: #E0E0E0;
|
||
--color-text-secondary: #A0A0A0;
|
||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
|
||
/* elevation: каждый уровень ярче на ~5% */
|
||
}
|
||
}
|
||
```
|
||
|
||
**Почему важно для РФ:** 70% топ-сайтов РФ 2025 используют тёмный фон. Тёмная тема — признак премиальности.
|
||
|
||
### 2.4. Bento Grid для layout ([[responsive-grid-layout]])
|
||
```astro
|
||
---
|
||
// Bento-сетка: разные размеры карточек для разной важности
|
||
const bentoItems = [
|
||
{ size: 'large', cols: 2, rows: 2 }, // главная услуга
|
||
{ size: 'small', cols: 1, rows: 1 }, // доп. услуга
|
||
{ size: 'wide', cols: 2, rows: 1 }, // отзыв
|
||
{ size: 'tall', cols: 1, rows: 2 }, // CTA-блок
|
||
];
|
||
---
|
||
<style>
|
||
.bento-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--space-md);
|
||
}
|
||
.bento-item { border-radius: var(--radius-lg); }
|
||
.bento-item--large { grid-column: span 2; grid-row: span 2; }
|
||
.bento-item--wide { grid-column: span 2; }
|
||
.bento-item--tall { grid-row: span 2; }
|
||
</style>
|
||
```
|
||
|
||
---
|
||
|
||
## Фаза 3: Компоненты Astro (сборка сайта)
|
||
|
||
### 3.1. Atomic Design для Astro (как у Tinkoff — [[russian-market-leaders]])
|
||
```
|
||
src/
|
||
components/
|
||
atoms/ # Кнопки, иконки, заголовки, текстовые блоки
|
||
Button.astro
|
||
Heading.astro
|
||
Icon.astro
|
||
Tag.astro
|
||
molecules/ # Поиск, карточка, форма, навигация
|
||
SearchBar.astro
|
||
Card.astro
|
||
Form.astro
|
||
NavItem.astro
|
||
organisms/ # Герой-секция, подвал, отзывы, каталог
|
||
HeroSection.astro
|
||
Footer.astro # ← РФ-подвал с реквизитами
|
||
Testimonials.astro # ← Виджет Яндекс.Отзывов
|
||
CatalogGrid.astro # ← Bento Grid
|
||
ChatButton.astro # ← Telegram/WhatsApp плавающая кнопка
|
||
templates/ # Макеты страниц
|
||
PageLayout.astro
|
||
BlogPost.astro
|
||
LandingPage.astro
|
||
```
|
||
|
||
### 3.2. Hero Section (правила Apple HIG + Crawford)
|
||
```astro
|
||
<!-- HeroSection.astro: Clarity + Deference + Depth -->
|
||
<header class="hero">
|
||
<div class="hero__content">
|
||
<h1>Заголовок: что, кому, зачем (за 2 сек)</h1>
|
||
<p class="hero__subtitle">Подзаголовок: конкретика, выгода</p>
|
||
<Button variant="primary" size="large">
|
||
Получить консультацию → <!-- сильный CTA, не "Узнать больше" -->
|
||
</Button>
|
||
</div>
|
||
<div class="hero__visual">
|
||
<!-- 3D/WebGL или качественное фото. Не сток -->
|
||
</div>
|
||
</header>
|
||
<style>
|
||
.hero {
|
||
min-height: 90vh; /* full screen */
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
align-items: center;
|
||
gap: var(--space-xl);
|
||
padding: var(--section-padding) var(--space-lg);
|
||
}
|
||
.hero__content { max-width: 600px; }
|
||
.hero h1 {
|
||
font-size: var(--fs-h1);
|
||
font-weight: 800;
|
||
line-height: var(--line-height-heading);
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
.hero__subtitle {
|
||
font-size: var(--fs-h2);
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: var(--space-xl);
|
||
}
|
||
@media (max-width: 768px) {
|
||
.hero {
|
||
grid-template-columns: 1fr;
|
||
min-height: auto;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|
||
```
|
||
|
||
### 3.3. Footer с РФ-реквизитами
|
||
```astro
|
||
---
|
||
// Footer.astro — обязателен для РФ ([[russian-ui-patterns]])
|
||
const props = {
|
||
inn: "XXXXXXXXXXXX",
|
||
ogrn: "XXXXXXXXXXXX",
|
||
phone: "8-800-XXX-XX-XX",
|
||
email: "info@example.ru",
|
||
address: "г. Уфа, ул. Ленина, д. 1"
|
||
};
|
||
---
|
||
<footer class="footer">
|
||
<div class="footer__grid">
|
||
<div>...навигация...</div>
|
||
<div>...услуги...</div>
|
||
<div>...контакты, соцсети...</div>
|
||
<div class="footer__legal">
|
||
<p>ИНН {props.inn} / ОГРН {props.ogrn}</p>
|
||
<p><a href="/politika/">Политика конфиденциальности</a></p>
|
||
<p><a href="/ofert/">Договор-оферта</a></p>
|
||
</div>
|
||
</div>
|
||
<!-- Яндекс.Карта в подвале (!) — РФ-паттерн -->
|
||
<div class="footer__map">
|
||
<iframe src="https://yandex.ru/maps/..." loading="lazy"></iframe>
|
||
</div>
|
||
</footer>
|
||
```
|
||
|
||
### 3.4. ChatButton — плавающая кнопка Telegram/WhatsApp
|
||
```astro
|
||
---
|
||
// ChatButton.astro — обязателен для РФ
|
||
---
|
||
<a href="https://t.me/username" class="chat-btn" target="_blank" rel="noopener">
|
||
<svg><!-- иконка Telegram --></svg>
|
||
<span>Напишите нам</span>
|
||
</a>
|
||
<style>
|
||
.chat-btn {
|
||
position: fixed;
|
||
bottom: 24px;
|
||
right: 24px;
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 20px;
|
||
background: #24A1DE; /* Telegram blue */
|
||
color: white;
|
||
border-radius: var(--radius-full);
|
||
box-shadow: var(--shadow-lg);
|
||
font-weight: 600;
|
||
transition: transform var(--transition);
|
||
}
|
||
.chat-btn:hover { transform: scale(1.05); }
|
||
</style>
|
||
```
|
||
|
||
---
|
||
|
||
## Фаза 4: Контент (SEO + РФ-психология)
|
||
|
||
### 4.1. Написание для России
|
||
- **Честно и прямо**: не «мы лидеры рынка», а «работаем с 2018 года, 500+ клиентов»
|
||
- **Цифры и факты**: 2 года, 500 клиентов, 98% довольных
|
||
- **Без жаргона**: «синергия», «левериджинг» → в мусор
|
||
- **Ты/Вы**: B2C = ты, B2B = Вы. Строго
|
||
- **Гарантии**: «Вернём деньги, если не понравится» — мощнее любого описания
|
||
- **Цены**: показывать. «от 5 000 ₽» лучше, чем «цена по запросу»
|
||
|
||
### 4.2. SEO-контент под Яндекс
|
||
- **Региональная привязка**: «купить в Уфе», «ремонт квартир в Москве»
|
||
- **LSI-слова**: Яндекс хуже понимает NLP, нужны точные вхождения
|
||
- **E-E-A-T**: реквизиты, схема, отзывы — факторы доверия Яндекса
|
||
- **Семантическое ядро**: не перевод с английского, свой поисковый интент
|
||
- **Коммерческие факторы**: ИНН, Яндекс.Карты, Яндекс.Отзывы — влияют на ранжирование
|
||
|
||
### 4.3. Schema.org (через Astro)
|
||
```astro
|
||
---
|
||
// Structured Data для РФ
|
||
const localBusiness = {
|
||
"@context": "https://schema.org",
|
||
"@type": "LocalBusiness",
|
||
"name": "Название",
|
||
"address": { "@type": "PostalAddress", "addressLocality": "Уфа", ... },
|
||
"aggregateRating": {
|
||
"@type": "AggregateRating",
|
||
"ratingValue": "4.8",
|
||
"reviewCount": "127"
|
||
},
|
||
"priceRange": "₽₽"
|
||
};
|
||
---
|
||
<script type="application/ld+json" set:html={JSON.stringify(localBusiness)} />
|
||
```
|
||
|
||
---
|
||
|
||
## Фаза 5: Производительность (Core Web Vitals)
|
||
|
||
### 5.1. Критические настройки Astro
|
||
- `astro.config.mjs`: `compressHTML: true`, `scopedStyleStrategy: "attribute"`
|
||
- Изображения: `@astrojs/image` + WebP/AVIF + lazy loading
|
||
- Шрифты: `@fontsource/inter` (self-hosted), subset только кириллица
|
||
- Скрипты: Astro Islands — только интерактивные части как клиентские компоненты
|
||
- Никаких тяжелых библиотек (jQuery, GSAP full) — только micro-библиотеки
|
||
|
||
### 5.2. Цели производительности
|
||
```
|
||
LCP < 1.5s (Google норм: < 2.5s, мы жмём в полтора раза)
|
||
INP < 100ms (Google норм: < 200ms)
|
||
CLS < 0.05 (Google норм: < 0.1)
|
||
```
|
||
|
||
### 5.3. Container Queries (не просто media queries)
|
||
Адаптивность на уровне компонентов: одна и та же карточка подстраивается под ширину контейнера, а не viewport. Критично для Bento Grid. ([[modern-css-techniques]])
|
||
|
||
---
|
||
|
||
## Фаза 6: Запуск и итерации
|
||
|
||
### 6.1. Предзапуск (чек-лист)
|
||
- [ ] ИНН/ОГРН в подвале
|
||
- [ ] Политика 152-ФЗ
|
||
- [ ] Яндекс.Метрика (не Google Analytics)
|
||
- [ ] Яндекс.Вебмастер (не Google Search Console как primary)
|
||
- [ ] Яндекс.Карты на странице контактов
|
||
- [ ] Telegram/WhatsApp кнопка работает
|
||
- [ ] Core Web Vitals pass (LCP <1.5, INP <100, CLS <0.05)
|
||
- [ ] WCAG AA (контраст, фокус, семантика)
|
||
- [ ] Schema.org LocalBusiness
|
||
- [ ] Мобильная версия не «упрощённая», а полнофункциональная
|
||
|
||
### 6.2. Пост-запуск (Crawford: launch is just the start)
|
||
- **A/B тестирование** hero-секции: текст → заголовок → CTA
|
||
- **Трекинг** Яндекс.Метрика: карта кликов, вебвизор
|
||
- **Оптимизация bounce rate**: смотреть где уходят, менять
|
||
- **SEO-корректировка**: добавлять статьи, наращивать ссылочную массу
|
||
- **Отзывы**: собирать Яндекс.Отзывы, 2ГИС
|
||
|
||
---
|
||
|
||
## Итоговая формула (для каждого нового сайта)
|
||
|
||
```
|
||
1. Ниша + конкуренты (из [[russian-market-leaders]])
|
||
2. 1 цель, 1 CTA (из [[clarity-vs-creativity]])
|
||
3. РФ-токены цвета + кириллическая типографика (из [[web-typography]], [[web-color-theory]])
|
||
4. Bento Grid + Hero + Footer с реквизитами (из [[russian-ui-patterns]])
|
||
5. Telegram/WhatsApp плавающая кнопка (из [[russian-user-psychology]])
|
||
6. Тёмная тема с elevation (из [[material-design-3-guide]])
|
||
7. Core Web Vitals: LCP <1.5s, INP <100ms, CLS <0.05
|
||
8. WCAG AA (отрыв от 99% конкурентов РФ)
|
||
9. Container Queries для адаптивности
|
||
10. A/B тестирование и итерации
|
||
```
|
||
|
||
**Ключевое отличие от конкурентов РФ:** ни Wildberries, ни Ozon, ни Сбер, ни даже Tinkoff не делают пункты 6–9. Это наш разрыв.
|