wow-design-wiki/concepts/market-leader-design-algorithm.md

title, created, updated, type, tags, sources, confidence

title	created	updated	type	tags	sources	confidence
Market Leader Web Design Algorithm	2026-06-02	2026-06-02	concept	web-design design-system web-design	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	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)

/* ===== ЦВЕТА ===== */
--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. Тёмная тема (обязательно для лидера)

@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)

---
// 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)

<!-- 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 с РФ-реквизитами

---
// 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

---
// 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)

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