Стратегия разработки сайта: четыре этапа от смысла к впечатлению

Классический порядок работы над маркетинговым сайтом — «сначала дизайн, потом тексты, потом вёрстка» — приводит к тому, что любое изменение смысла тянет за собой переделку макета. Меняется оффер — рассыпается первый экран. Добавляется блок возражений — ломается ритм страницы.

Рабочий порядок обратный: от смысла и структуры к визуалу и только потом к движению. Сайт собирается слоями, каждый следующий слой опирается на уже утверждённый предыдущий. Этот подход особенно уместен при работе с ИИ-агентами: он даёт им узкую задачу на каждом шаге вместо расплывчатого «сделай красиво».

Этап 1. Скелет: структура и тексты

Цель. Получить версию сайта, на которой уже можно запускать трафик и согласовывать содержание.

Что делаем

• Фиксируем информационную архитектуру: что на первом экране, какие возражения закрываем ниже, где стоят целевые действия.
• Пишем и утверждаем заголовки, тексты и микрокопию. Здесь ИИ-агенты дают наибольшую отдачу: варианты формулировок генерируются десятками, отбор остаётся за человеком.
• Собираем семантичный HTML/CSS-скелет с правильной иерархией заголовков, отступами и типографикой. Без декора.
• Сразу закладываем мобильную вёрстку и базовую доступность: контраст, фокус, размеры кликабельных зон.
• Ставим аналитику и цели по формам до запуска трафика, а не после.

Критерий готовности этапа

• Структура и все тексты утверждены заказчиком письменно.
• Формы отправляются и заявка доходит до адресата.
• Аналитика пишет события: просмотры, скролл, отправки форм.
• Страница проходит Core Web Vitals с запасом: LCP до 2,5 с, CLS до 0,1, INP до 200 мс на мобильном соединении.

Пока эти четыре пункта не закрыты, переходить к дизайну рано — любая правка структуры обесценит уже сделанную визуальную работу.

Типичная ошибка. Уходить в креатив и анимации на этом этапе. Декор здесь маскирует слабость текста: непонятный оффер под красивой анимацией выглядит убедительно на демонстрации и не конвертирует на трафике.

Этап 2. Дизайн-система

Цель. Перейти от «читаемо» к «профессионально и узнаваемо», не потеряв ясность.

Что делаем

• Определяем визуальный язык: типографическая шкала, палитра, шкала отступов, стиль карточек и секций, подход к изображениям.
• Оформляем это как систему — набор повторно используемых решений, а не набор одноразовых макетов. Даже маленькая система лучше её отсутствия.
• Применяем систему ко всем секциям сразу, сохраняя единый ритм.
• Усиливаем ключевые места — первый экран, блок преимуществ, социальное доказательство, финальный призыв — в рамках системы, без исключений.

Критерий готовности этапа

• Все секции построены из элементов системы; уникальных, ни на что не похожих блоков нет.
• Новую секцию можно собрать из существующих компонентов, не рисуя её с нуля.
• Скорость не просела относительно первого этапа.

Важный принцип. Сначала система, потом исключения. Свободные эксперименты с паттернами без системы дают визуальный хаос, который потом дороже разбирать, чем было собрать.

Этап 3. Акценты

Цель. Сделать отдельные секции выразительнее и запоминающимися, сохранив целостность.

От предыдущего этапа он отличается не временем, а разрешением: здесь впервые допустимо отступить от системы — осознанно, точечно и с обоснованием.

Что делаем

• Выбираем 2–4 секции, которые сильнее всего влияют на восприятие и конверсию. Не больше: акцент на всём — это отсутствие акцента.
• Для каждой ставим измеримую задачу. Не «сделай красиво», а «усилить ощущение надёжности», «ускорить сканирование списка преимуществ», «сделать оффер эмоциональнее».
• Пробуем визуальные паттерны, при необходимости выходя за рамки системы — но фиксируем исключение в системе, чтобы оно не расползлось.
• После каждой правки проверяем читаемость и мобильную версию.

Критерий готовности этапа. Каждое отступление от системы можно объяснить одной фразой: зачем оно здесь. Необъяснимое отступление — это не акцент, а случайность.

Этап 4. Движение и полировка

Цель. Добавить анимацию там, где она усиливает восприятие, и нигде больше.

Что делаем

• Заранее выбираем 1–3 точки максимального эффекта: обычно первый экран, переход к офферу и ключевые микровзаимодействия.
• Добавляем анимацию точечно: появление блоков при скролле, лёгкие состояния наведения, отклик на нажатие.
• Анимируем только transform и opacity — остальные свойства заставляют браузер пересчитывать раскладку и дают заметные подтормаживания на слабых устройствах.
• Уважаем системную настройку prefers-reduced-motion: часть пользователей отключает анимации не из вкуса, а по медицинским причинам.
• Финальная полировка: выравниваем ритм, убираем визуальный шум, проверяем все состояния — загрузка, пустые данные, ошибки форм — на реальных устройствах.

Критерий готовности этапа. Core Web Vitals остались в тех же порогах, что и на первом этапе. Если анимация вытолкнула метрики за границы — это не украшение, а регресс.

Правило. Движение — усилитель, а не основа. Если сайт не работает после первых двух этапов, анимации его не спасут: они увеличат впечатление от демонстрации и не изменят конверсию.

Как отвечать на «хочу вау сразу»

Возражение возникает почти всегда, и оно разумное: заказчик платит за результат, а на первом этапе видит подчёркнуто скромную страницу и справедливо принимает её за недоделку.

Работает не спор о вкусах, а три аргумента:

1. Порядок не меняет объём работ, он меняет порядок рисков. Вау никуда не девается — оно переносится на этап, где под ним уже есть проверенная структура.
2. Переделка визуала стоит дороже переделки текста. Если оффер меняется после отрисовки макетов, оплачивается вторая итерация дизайна. Если до — только вторая итерация текста.
3. Ранний запуск даёт данные. Пока обсуждается палитра, работающий скелет уже собирает заявки и показывает, какой заголовок сильнее.

Помогает и формальность: показывать промежуточный результат как «скелет на согласование», а не как «первую версию сайта». Название задаёт ожидание.

Что делать, если гипотеза не подтвердилась

Ранний запуск нужен именно ради этого сценария — данные приходят до того, как в проект вложен дизайн.

• Трафик есть, заявок нет. Проблема в оффере или в структуре. Переписываем первый экран и блок возражений, дизайн не трогаем.
• Скролл обрывается на середине. Секция ниже точки обрыва не отвечает на вопрос, который возник у пользователя выше. Меняем порядок секций.
• Формы открывают, но не отправляют. Дело в самой форме: слишком много полей, непонятно, что будет после отправки, или она сломана на конкретном устройстве.
• Данных слишком мало для выводов. Не додумываем — продлеваем сбор. Решение по десяти визитам хуже отсутствия решения.

Смена гипотезы на первом этапе стоит переписывания текстов. Та же смена после отрисовки макетов стоит переделки всего сайта.

Работа с ИИ-агентами

• Давайте жёсткий контекст: цель страницы, аудитория, ключевые сообщения, ограничения по стилю и производительности. Без рамок агент выдаёт усреднённый шаблон.
• Разделяйте задачи по этапам. Запрос «сделай красивый современный сайт» даёт результат, который невозможно ни принять, ни отклонить аргументированно.
• Ревью после каждого этапа проводите не по критерию «нравится», а по критериям готовности этапа и по поведению пользователей.
• Держите под контролем технический долг: агенты уверенно генерируют код, который выглядит хорошо и плохо поддерживается. Лимит на вес страницы и запрет на лишние зависимости стоит задать заранее.

Когда этот порядок не подходит

• Редизайн работающего сайта с трафиком. Структура и офферы уже проверены данными; начинать с чистого скелета значит выбрасывать знание. Начинайте со второго этапа.
• Жёсткий брендбук. Визуальный язык задан заранее — первый и второй этапы сливаются.
• Имиджевый проект без лидогенерации. Промостраница, портфолио, анонс мероприятия: измеримой конверсии нет, впечатление и есть продукт. Здесь визуал справедливо идёт первым.

Во всех остальных случаях порядок «смысл → система → акценты → движение» экономит итерации.

Коротко

1. Скелет — структура, тексты, работающие формы, аналитика, скорость в пороге.
2. Дизайн-система — единый визуальный язык, применённый ко всем секциям.
3. Акценты — 2–4 секции с обоснованным отступлением от системы.
4. Движение и полировка — анимация в точках максимального эффекта без потери скорости.

Главный принцип: сначала заставить сайт работать, потом сделать его красивым, и только в конце добавить впечатление.