ПРОЦЕСС · 2026 · 11 ЭТАПОВ · ОТ ТЗ ДО ЗАПУСКА
Полный процесс на коде в 2026: 11 этапов с точными сроками, deliverables и зонами ответственности. Чем каждый этап заканчивается, кто что делает, где обычно ломаются проекты — и два реальных таймлайна из Челябинска.
КОРОТКИЙ ОТВЕТ
Разработка сайта на коде проходит 11 последовательных этапов: бриф и discovery, стратегия, UX-прототип, дизайн-концепт, финальный UI, контент, фронтенд, бэкенд, SEO/AEO setup, QA и запуск с пострелизным сопровождением. Лендинг — 3–4 недели, корпоративный — 8–10 недель, премиум с 3D — 10–14 недель.
11 ЭТАПОВ · СВОДНАЯ ТАБЛИЦА
Каждый этап заканчивается конкретным deliverable, который можно открыть, прочитать или запустить. Без deliverable этап не считается закрытым — это правило защищает от «мы всё уже сделали, не помню что именно».
| № | Этап | Срок | Deliverable | Ответственный |
|---|---|---|---|---|
| 01 | Бриф и discovery | 2–4 дня | Бриф-документ + протокол интервью | Совместно |
| 02 | Стратегия и информационная архитектура | 3–5 дней | Sitemap + пользовательские сценарии | Студия |
| 03 | UX-прототипирование и каркасы экранов | 1 неделя | Wireframes в Figma + интерактивный прототип | Студия |
| 04 | Дизайн-концепт и UI-кит | 1 неделя | Moodboard + типографика + палитра + 1–2 ключевых экрана | Студия |
| 05 | Финальный UI-дизайн всех экранов | 2–3 недели | Готовые макеты Figma — десктоп + мобилка | Студия |
| 06 | Контент: тексты, фото, видео | 1–2 недели (параллельно с дизайном) | Тексты в Google Docs + папка с медиа | Совместно |
| 07 | Фронтенд-разработка | 3–6 недель | Staging-сборка сайта на тестовом домене | Студия |
| 08 | Бэкенд и интеграции с внешними системами | 1–4 недели (параллельно с фронтом с 3-й недели) | API + интеграции на staging + документация | Студия |
| 09 | SEO/AEO setup и Schema.org | 2–3 дня | Sitemap + robots.txt + Schema.org JSON-LD + метаданные | Студия |
| 10 | QA, тестирование, замеры производительности | 1 неделя | Чек-лист пройденных тестов + Lighthouse-отчёты | Студия |
| 11 | Запуск и пострелизное сопровождение | 1 неделя (запуск) + год сопровождения | Боевой сайт + Метрика + GSC + 6–12 мес гарантии | Совместно |
Итого: лендинг — 3–4 недели, корпоративный сайт — 8–10 недель, премиум с 3D — 10–14 недель, интернет-магазин или маркетплейс — 12–16 недель. Часть этапов параллелится (контент с дизайном, бэкенд с фронтом), что экономит 2–4 недели на корпоративном проекте.
ЦИФРЫ И ФАКТЫ
Объективно проверяемые показатели — не маркетинговые эпитеты. Lighthouse-отчёт, Core Web Vitals в Search Console, исходники в Git.
LIGHTHOUSE
Performance · Accessibility · Best Practices · SEO на сдаче
LARGEST CONTENTFUL PAINT
Core Web Vitals в зелёной зоне — проверяется в Search Console
TYPESCRIPT STRICT
Без any и js-файлов в продакшен-коде — type safety на каждом проекте
JQUERY · 0 LEGACY
Только современный стек: Next.js 16, React 19, Three.js, GSAP
STATIC EXPORT
Деплой без runtime и серверной зависимости — никаких уязвимостей на стороне приложения
OPEN CODE
Клиент владеет всеми исходниками в Git — без vendor lock-in и платы за миграцию
11 ЭТАПОВ · РАСШИРЕННЫЕ ПОЯСНЕНИЯ
Описание каждого этапа с deliverable, ролями, типичными артефактами и границами с соседними этапами. Если студия не может объяснить, чем этап заканчивается — этого этапа в её процессе на самом деле нет.
Встреча 1.5–2 часа с продакт-менеджером студии. Обсуждаем бизнес-модель, конкурентов, целевую аудиторию, текущий сайт (если есть), брендовые ограничения, амбиции по сравнению с лидерами рынка. Изучаем 5–10 эталонных сайтов в нише, замеряем их Lighthouse, Schema.org, индексацию. На выходе — бриф-документ на 8–15 страниц, который становится приложением к договору. Без чёткого discovery сайт получается «как у всех» за любые деньги, поэтому этот этап нельзя сокращать «ради скорости».
Из брифа вытекает структура сайта: список всех страниц и секций, иерархия меню, основные пользовательские сценарии. Используем карточную сортировку и Tree Testing, если речь о большом каталоге или сложном корпоративном сайте. Прописываем 3–5 ключевых сценариев: «директор узнаёт о компании», «менеджер по закупке отправляет заявку», «соискатель смотрит вакансии». Каждый сценарий — это последовательность экранов, через которые проходит пользователь к целевому действию. Это фундамент для всех следующих этапов: дизайн, контент, SEO-семантика — всё строится на этой архитектуре.
Низко-фиделити каркасы всех экранов в Figma — без цветов, шрифтов, изображений. Только структура, иерархия элементов, расположение блоков. Цель — отделить дискуссию о структуре от дискуссии о визуальном стиле. Делается 2–3 итерации с клиентом по 30 минут: каркасы → правки → новая версия. На выходе — кликабельный прототип, по которому клиент проходит ключевые сценарии и подтверждает, что структура работает. Если на этом этапе сэкономить — финальный дизайн придётся переделывать на уровне страниц, что обходится в 5–10 раз дороже.
Студия делает 2–3 направления визуального стиля: каждое включает moodboard с референсами, типографическую пару (заголовочный + текстовый шрифты), палитру с акцентным цветом, набор иконок, базовые компоненты (кнопки, формы, карточки), отрисовку 1–2 ключевых экранов под десктоп. На встрече с клиентом проходим по каждому направлению, выбираем итоговое или комбинируем элементы. Финальный концепт после второй итерации совпадает на 70–80%, после третьей — становится UI-китом для всех остальных экранов. Если после трёх итераций концепт всё ещё не подходит — пересматривается бриф, это сигнал серьёзной проблемы в discovery.
Отрисовка всех страниц по утверждённому UI-киту: десктоп (1440px) + мобильная адаптация (375px), при необходимости — планшетный размер (768px). Каждая страница согласуется с клиентом, итерации по правкам — обычно 2 на страницу. Параллельно делаются интерактивные состояния: hover, active, focus, error, loading, empty. Подготавливается набор иллюстраций или фото (либо своими силами, либо закупка через iStock / Shutterstock). На выходе — Figma-файл, готовый к передаче в разработку, с правильной структурой страниц, компонентов, стилей и автолейаутом. Это deliverable, на основе которого студия может разрабатывать сайт, а клиент может проверять промежуточные сборки.
Контент готовится параллельно дизайну с пятой недели проекта. Тексты пишет копирайтер студии или внешний копирайтер с интервью клиента — на основе утверждённой структуры сайта. Делается 2–3 итерации редактуры с клиентом. Параллельно — фотосессия продукта, команды, офиса или производства; видео-съёмка ключевых сценариев; редактирование стоковых фото в фирменном стиле. Если контент полностью предоставляет клиент — этот этап для него длится 5–15 часов на интервью и предоставление исходников. Если контент делает студия — это до 30% бюджета и срока проекта, и закладывается в КП отдельной статьёй.
Кодим на стеке 2026 года: Next.js 15 + React 19 + TypeScript 5 + Tailwind 4. Разбиваем дизайн на компоненты, верстаем секции, подключаем анимации (GSAP для скролл-эффектов, Three.js / React Three Fiber для 3D, Lenis для плавной прокрутки). Реализуем адаптивную вёрстку с медиа-запросами, оптимизируем изображения (WebP/AVIF, lazy loading, srcset), внедряем семантические HTML-теги для SEO и доступности. Каждую неделю выкладываем сборку на staging-окружение для клиентского ревью. Параллельно настраиваем CI/CD: автоматические сборки при пуше в main, проверки линтером и тайпчекером. Staging-сборка показывается клиенту каждые 1–2 недели для контроля прогресса.
Если сайт static-export (как этот) — бэкенд минимальный: только обработка форм через серверные функции (Vercel Functions, Cloudflare Workers). Если есть личный кабинет, каталог с динамическим поиском, корзина, оплата — пишем полноценный API на Node.js (Fastify, NestJS) или Python (FastAPI, Django). Интеграции: Битрикс24 / amoCRM (создание лидов через REST API), 1С (обмен через REST или JSON-файлы), эквайринг (ЮKassa, Тинькофф, Сбер — Webhook для подтверждения оплаты), модули доставки (СДЭК, ПЭК — расчёт стоимости через API), Telegram-бот для уведомлений о заявках, AI-сервисы (YandexGPT, OpenAI для AI-чата на сайте). Каждая интеграция — это API-запрос, обработка ошибок, тестирование на отказоустойчивость, документация в README.
На уровне базового SEO-минимума: уникальные title и description для каждой страницы (по семантике запросов), OpenGraph и Twitter Card теги для соцсетей, sitemap.xml и robots.txt с правильными директивами. На уровне Schema.org: Organization для главной, WebSite с поиском, BreadcrumbList для всех вложенных страниц, для статей — Article + Author + Publisher, для FAQ — FAQPage с Speakable cssSelector для голосового поиска, для услуг — Service + Offer с ценами, для отзывов — Review + AggregateRating. Подключаем Яндекс.Webmaster и Google Search Console, отправляем sitemap, верифицируем владение сайтом. Это даёт правильное попадание в поиск с первого дня после запуска, а не через 3–6 месяцев борьбы с шаблонной разметкой Tilda или Битрикса.
Полный обход сайта по сценариям пользователя: открыть все страницы, отправить все формы, пройти основные сценарии (заявка, регистрация, покупка, поиск). Проверка адаптивности на реальных устройствах: iPhone, Android, iPad, ноутбук, большой монитор. Кросс-браузерное тестирование: Chrome, Safari, Firefox, Edge — стандартный минимум, последние 2 версии каждого. Замеры производительности: Lighthouse на десктопе должен быть 90+ по всем метрикам, на мобилке 80+ (для сайтов с 3D — 70+). Core Web Vitals: LCP меньше 2.5 секунды, INP меньше 200 мс, CLS меньше 0.1. Доступность: проверка через Lighthouse a11y и axe DevTools, фокус-индикаторы, контраст текста, alt-теги. Безопасность: HTTPS, заголовки CSP, защита от XSS. Все найденные баги фиксятся, повторное тестирование. До запуска не идём, пока не пройдены все пункты чек-листа.
Запуск всегда во вторник или среду, не в пятницу. Бэкап staging-сборки, переключение DNS-записей домена, прогрев CDN, проверка SSL-сертификатов. Подключение к Яндекс.Webmaster, Google Search Console, Яндекс.Метрике, GA4. Контрольные замеры скорости с боевого домена, финальный обход сайта по сценариям, проверка работы форм и интеграций. Передача доступов клиенту (домен, хостинг, репозиторий, аналитика). Обучение клиента: как редактировать контент, как смотреть аналитику, что делать при инциденте. Дальше — гарантийная поддержка 6–12 месяцев (бесплатно, исправление багов) + опциональная подписка на сопровождение от 30 000 ₽/мес (мелкие правки, мониторинг, отчёты) + опциональное SEO-продвижение от 75 000 ₽/мес.
ОТВЕТСТВЕННОСТЬ · КТО ЗА ЧТО
Чёткое разделение зон ответственности — это пункт договора, который защищает обе стороны. Срыв со стороны клиента сдвигает общий срок проекта без штрафа студии. Срыв со стороны студии — штраф 0.1–0.5% за день просрочки.
СТУДИЯ
КЛИЕНТ
СОВМЕСТНО
ГДЕ ЛОМАЮТСЯ ПРОЕКТЫ · 5 ТИПИЧНЫХ СРЫВОВ
90% срывов происходит не на стадии «писать код», а на ранних этапах процесса. Каждый из этих пяти срывов добавляет 2–4 недели к сроку и 200 000–500 000 ₽ к бюджету.
Бриф на одной встрече без интервью с конечной аудиторией и анализа конкурентов даёт «универсальный» сайт. Через 2–3 итерации дизайна выясняется, что неверно понята целевая аудитория, и приходится переделывать структуру с нуля. Правило: не идти в прототип, пока в брифе нет ответов на 3 вопроса — кто покупает, какие у них альтернативы, чем мы отличаемся.
«Давайте без прототипов, нарисуйте сразу красиво» — частая просьба клиента, которая стоит проекту 30–50% переделок. Без согласованной структуры на низко-фиделити уровне правки идут по готовым макетам, что в 5–10 раз дороже. Правило: даже на лендинге прототип занимает 2 дня, но экономит 1–2 недели на этапе финального дизайна.
Сайт верстается на lorem-ipsum или «временных текстах», запускается с шаблонными текстами «с заменой потом». В 90% случаев тексты остаются такими навсегда, потому что у клиента нет ресурса вернуться к ним. Сайт работает на 40% от потенциала по конверсии и SEO. Правило: контент готовится параллельно дизайну с пятой недели, не позже.
Параллельный старт фронта и бэка без зафиксированного API-контракта приводит к тому, что обе стороны делают разное и переделывают на этапе интеграции. Правило: бэкенд стартует на 3-й неделе фронта, когда API-контракт уже зафиксирован в TypeScript-типах. До этого фронт работает на моках.
Сайт запускается с обещанием «допилим в проде», но в реальности баги фиксятся в живом режиме на боевом домене, теряя заявки и доверие. Правило: 1 неделя QA на staging-окружении до запуска — это минимум, нельзя сокращать. На корпоративных сайтах с интеграциями — 1.5–2 недели QA.
КЕЙСЫ · РЕАЛЬНЫЕ ТАЙМЛАЙНЫ
Не абстрактные «обычно 8 недель», а конкретные проекты с точным распределением недель по 11 этапам.
ДИЗАЙН-СТУДИЯ · ЧЕЛЯБИНСК · РЕАЛЬНЫЙ ТАЙМЛАЙН
Челябинская дизайн-студия с клиентами уровня ХК «Трактор», Т-Банка, Уралсиба. Полный цикл 11 этапов уложили в 9 недель за счёт распараллеливания: контент готовился с 4-й недели параллельно UI-дизайну, бэкенд для форм стартовал на 6-й неделе. Sprint-ритм: понедельник — демо на Zoom, вторник-пятница — работа. Запуск во вторник, через неделю после прохождения чек-листа QA. Через месяц после запуска вошёл в топ-6 ChatGPT по запросу «дизайн-студии России».
B2B-ПРОИЗВОДСТВО · ЧЕЛЯБИНСК · СЛОЖНЫЙ ПРОЕКТ
Челябинский производитель ПЭТ-упаковки. Цикл 14 недель: каталог 61+ товара (структура и контент) занял 3 недели, R3F-сцена с 10 000 GLSL-частицами — 2 недели, интеграции с Битрикс24 и Telegram — 1.5 недели. Запуск откладывали на неделю из-за QA на боевом домене (нашли проблему с CSP-заголовками). Через 4 месяца после запуска — первая страница Яндекса по основным B2B-запросам и кратный рост заявок.
СЛЕДУЮЩИЙ ВОПРОС · ЦЕНА
Прозрачные вилки по всем тарифам, 6 факторов цены, сравнение с Москвой и Tilda, скрытые расходы.
ЧитатьСЛЕДУЮЩИЙ ВОПРОС · ВЫБОР
Чек-лист на 1 час: живые кейсы, стек, договор, команда, поддержка, GEO/AEO. Шесть красных флагов.
ЧитатьХАБ · АЛЬТЕРНАТИВЫ
Tilda / WordPress / Битрикс / Aspro + Топ-60 РФ + fuse8 — одной точкой входа. Какая страница нужна именно вам — за минуту.
Открыть навигаторFAQ
Десять ответов в трёх темах: сроки и порядок этапов, роли и ответственность, деньги и риски
В классическом цикле — 11 этапов: бриф, стратегия, прототип, дизайн, контент, фронтенд, бэкенд, SEO/AEO, тестирование, запуск, пострелиз. Лендинг — 3–4 недели, корпоративный — 8–10 недель.
Часть этапов можно: контент пишется параллельно дизайну, бэкенд начинается на 3-й неделе фронтенда, SEO готовится во время вёрстки. Но прототип нельзя параллелить дизайну, а тестирование — фронтенду.
ТЗ фиксирует объём работ, сроки, цену и критерии приёмки в письменном виде. Без ТЗ через 2 недели начнутся «а ещё надо», «я не так понял», «мы это не обсуждали». Это юридический документ договора.
Бриф — 2 часа разговора. Согласование структуры — 1 час. Утверждение макетов — 2–3 часа на этап. Предоставление контента — 5–15 часов. Финальная приёмка — 2 часа. Итого 15–25 часов за 8 недель.
Лучший вариант — копирайтер студии или внешний копирайтер с интервью клиента на 2–3 часа. Тексты клиента без переработки дают «всё для вас, мы профессионалы, гарантия качества» — невнятно и не конвертит.
Студия отвечает за дизайн, код, инфраструктуру, SEO-техничку, запуск. Клиент — за контент, ответственного со своей стороны, своевременное согласование, оплаты. Срыв со стороны клиента сдвигает срок без штрафа студии.
В договоре заранее фиксируется 2–3 итерации концепта. Первый концепт даёт направление, по итогам встречи студия делает второй с учётом правок. Если и после третьей итерации концепт не подходит — пересматривается ТЗ.
Любое изменение объёма работ оформляется письменно через Change Request с новой оценкой времени и денег. Студия не делает ничего «по дружбе» — это путь к срыву сроков и конфликту по приёмке.
DNS-переключение домена, прогрев CDN, контрольные замеры скорости, sitemap в Яндекс.Webmaster и GSC. Запуск всегда вторник-среда, не пятница — чтобы было время исправить, если что-то поломалось.
Гарантийная поддержка 6–12 месяцев — бесплатно, исправление багов. Платная подписка 30 000–80 000 ₽/мес — мелкие правки, мониторинг, отчёты. SEO-продвижение от 75 000 ₽/мес — отдельная услуга.
Сделаем бриф, посчитаем сроки по 11 этапам, отправим КП за 24 часа с точной ценой и планом-графиком по неделям.