---
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. Это наш разрыв.