Если запускаете сайт впервые, проще запутаться на ровном месте. Договор подписали, аванс перевели, а что происходит дальше и когда смотреть макет, непонятно. Эта статья разбирает этапы разработки сайта так, как они идут в студии Сайты2.рф: что делает команда, что от вас, какие артефакты появляются и когда.
Гайд опирается на 550+ проектов с 2008 года. Средний срок корпоративного сайта в студии - 21 день, и в договоре закреплён штраф 1% за каждый день просрочки. Время чтения - 12 минут.
Зачем нужен поэтапный подход
Сайт без плана собирается как ремонт без сметы. Дизайнер рисует то, что ему понравилось, программист правит логику на лету, клиент ждёт результат и не понимает, на каком шаге проект.
Без поэтапного подхода всплывают три беды.
Расхождение ожиданий. Клиент представлял минималистичную главную, а получил карусель из 12 баннеров. Виноваты обе стороны: на старте никто не показал референсы и не зафиксировал стиль письменно. Переделка съедает 5-10 дней.
Переделки на финальной стадии. Структуру разделов решили обсудить, когда уже свёрстано 8 страниц. Любая правка карты сайта тянет за собой пересборку меню, хлебных крошек, sitemap, перелинковки. По нашей статистике, одна правка структуры на этапе вёрстки стоит 2-3 правок на этапе прототипа.
Срыв сроков. Запуск назначен под выставку или старт сезона. Без контрольных точек никто не замечает, что дизайн отстаёт на неделю, пока не приходит дата сдачи. Поэтапный подход с приёмкой каждого блока ловит отставание в первые сутки.
Последовательность работ по сайту в студии разбита на 8 этапов. Каждый закрывается актом или письменным согласованием, чтобы было видно, где мы находимся.
Этап 1. Брифинг и анализ ниши
Длительность: 1-2 дня. Кто участвует: аккаунт-менеджер, маркетолог студии, заказчик.
Брифинг открывает проект. Цель - выяснить, зачем компании сайт и что считать успехом через полгода после запуска.
Что обсуждается:
- Цели бизнеса (лиды, имидж, информирование, продажи)
- Целевая аудитория: возраст, должность, что ищут, через какие устройства
- Уникальное предложение и аргументы, почему выбирают вас
- 5-10 сайтов конкурентов с пометками, что нравится и что нет
- Технические требования: CMS, интеграции, мультиязычность
- Сроки, бюджет, ограничения
Параллельно маркетолог собирает срез ниши: запросы в Wordstat, лидеры выдачи в Санкт-Петербурге, типовая структура сайтов в сегменте. По итогам этапа клиент получает заполненный бриф на 6-10 страниц и согласованную смету.
Артефакты этапа: бриф, смета, договор с фиксированной ценой и сроком. Подписи с двух сторон - старт следующего этапа.
Этап 2. Прототипирование и структура
Длительность: 2-4 дня. Кто участвует: UX-проектировщик, копирайтер, заказчик.
Сначала рождается карта сайта - дерево всех страниц с группировкой по разделам. Карту согласовывайте с заказчиком в течение суток: на ней держится всё остальное.
После карты UX-проектировщик рисует wireframe в Figma. Серые блоки без дизайна: рамки, текст-рыба, иконки заглушками. Прототип показывает, где какой блок, в каком порядке, какие переходы между страницами.
Прототипы делаются под три разрешения: десктоп 1440, планшет 768, мобильный 375. Адаптивная логика закладывается заранее, чтобы потом не выяснять, что блок из 4 колонок не помещается на телефоне.
На этом этапе дешевле всего менять что угодно. Перерисовать прототип - часы работы, переделать готовый дизайн - 1-2 дня, переверстать - неделя.
Артефакт: ссылка на Figma с прототипами всех уникальных страниц и письменное согласование заказчика. Без подписи под прототипом следующий этап не стартует.
Этап 3. Дизайн
Длительность: 4-7 дней. Кто участвует: арт-директор, дизайнер, заказчик.
Дизайн начинается с концепта главной страницы и UI-кита. UI-кит фиксирует палитру, шрифты, кнопки, формы, иконки, тени и скругления. Набор правил, по которым собираются все остальные страницы.
Концепт главной согласовываем в 1-2 итерации. После согласования дизайнер раскатывает стиль на оставшиеся страницы: внутренние разделы, карточки, формы, страницы услуг, контакты, блог.
Адаптив рисуется параллельно, не в конце. 60-70% посетителей корпоративных сайтов приходят с телефонов, и мобильная версия требует отдельного дизайнерского решения, а не автоматического сжатия колонок.
Что показываем заказчику: десктопные макеты главной и внутренних, мобильные макеты ключевых страниц, UI-кит, анимации в виде превью. Доступ к Figma остаётся у клиента навсегда.
Артефакт: согласованный дизайн всех страниц проекта в Figma. Без согласования не открываем верстальщику задачу.
Этап 4. Вёрстка и фронтенд
Длительность: 3-6 дней. Кто участвует: фронтенд-разработчик, QA-инженер.
Верстальщик берёт макеты и превращает их в HTML, CSS, JavaScript. Требование - pixel-perfect: вёрстка совпадает с макетом до пикселя на основных разрешениях.
Что делается на этапе:
- Семантическая HTML-структура с правильными тегами для SEO
- Адаптивная сетка на CSS Grid и Flexbox под все брейкпойнты
- Кросс-браузерность: Chrome, Safari, Firefox, Яндекс.Браузер, Edge
- Анимации и интерактив: hover-эффекты, прокрутка, появление блоков
- Оптимизация под Core Web Vitals: LCP до 2,5 с, CLS до 0,1
Используем React для сложных проектов с динамикой и просто HTML-вёрстку для лендингов и корпоративных сайтов без сложной интерактивности. Решение фиксируется на этапе сметы.
Артефакт: статичная свёрстанная сборка на тестовом домене с превью всех страниц.
Этап 5. Бэкенд и CMS
Длительность: 3-5 дней. Кто участвует: бэкенд-разработчик, интегратор CRM.
CMS подбираем под задачи бизнеса, а не наоборот. В студии работаем с тремя основными системами:
- 1С-Битрикс - для интеграции с 1С, безопасности корпоративного уровня, каталогов от 5 000 позиций
- WordPress - для корпоративных сайтов до 100 страниц, контент-маркетинга, сайтов услуг
- Tilda - для лендингов и небольших визиток с быстрым запуском
Для нестандартной логики пишем модули на Laravel. На этом этапе вёрстка переезжает в шаблоны CMS, подключаются админка, разделы, типы записей.
Дальше идут формы и интеграции. Базовый набор корпоративного сайта в СПб:
- Формы обратной связи с отправкой в amoCRM или Битрикс24
- Интеграция с 1С: товары, остатки, цены через REST или 1С-Битрикс модуль
- Подключение Яндекс.Метрики и Google Analytics 4
- Виджеты мессенджеров: Telegram, MAX, WhatsApp Business
Артефакт: рабочий сайт на тестовом домене с подключённой админкой и заполненной демо-структурой.
Этап 6. Контент и SEO-основа
Длительность: 2-3 дня параллельно вёрстке. Кто участвует: SEO-специалист, копирайтер, контент-менеджер.
Контент готовим не в конце, а параллельно с разработкой. Если заказчик отдал тексты сразу - копирайтер только правит под структуру. Если нужны новые материалы - пишет с нуля по согласованным брифам.
Базовая SEO-основа закладывается до запуска:
- Title и Description для каждой страницы по шаблонам
- Заголовки H1-H3 с целевыми ключами
- Alt у всех изображений
- ЧПУ-адреса страниц без идентификаторов и спецсимволов
- sitemap.xml и robots.txt
- Микроразметка Schema.org: Organization, BreadcrumbList, Article для блога
- Базовое семантическое ядро под целевые страницы
После запуска SEO продолжается отдельным договором: позиции, тексты, ссылки, поведенческие. Если интересует, как стартовать продвижение, разбор тут: SEO-продвижение сайта с чего начать.
Артефакт: страницы заполнены контентом, мета-теги проставлены, sitemap.xml доступен.
Этап 7. Тестирование
Длительность: 1-2 дня. Кто участвует: QA-инженер, технический руководитель.
Перед запуском QA-инженер прогоняет сайт по чек-листу из 80 пунктов. Базовые блоки проверки:
- 7 устройств: iPhone, Android, iPad, Galaxy Tab, MacBook, Windows-десктоп, Linux
- 5 браузеров в актуальных версиях
- Скорость загрузки в PageSpeed Insights: зелёная зона для мобильной и десктопной версий
- Все формы отправляются, заявки доходят до CRM и почты
- Корректность 152-ФЗ: политика на месте, чекбокс согласия в каждой форме, баннер cookies
- Работа поиска, фильтров, корзины (если есть)
- Корректность ссылок: нет битых, нет ведущих на dev-окружение
Найденные баги исправляются и проверяются повторно. На сайте с известными ошибками запуск не делаем.
Артефакт: отчёт о тестировании с пометкой по каждому пункту чек-листа.
Этап 8. Запуск и поддержка
Длительность: 1 день + 30 дней гарантии. Кто участвует: DevOps, аккаунт-менеджер.
Перенос на боевой домен делается в нерабочее время, чтобы не пересечься с активной аудиторией. Что делается в день запуска:
- Перенос файлов и базы данных на продакшн-сервер
- Настройка SSL-сертификата
- 301-редиректы со старого сайта на новые URL, если был предыдущий ресурс
- Обновление DNS-записей
- Подключение Яндекс.Метрики и Google Analytics 4 к боевому домену
- Подача карты сайта в Яндекс.Вебмастер и Google Search Console
Первые 30 дней действует гарантия. Если всплывает баг, который не нашли на тестировании - правим бесплатно. Типовое условие договора. Параллельно можно подключить тариф поддержки сайта от 5 000 ₽ в месяц для развития и регулярных обновлений.
Артефакт: рабочий сайт на боевом домене, акт сдачи-приёмки, доступы переданы заказчику.
Таймлайн на 21 день
Так выглядит разработка сайта пошагово на стандартном корпоративном проекте до 15 страниц.
| Дни | Этап | Кто ведёт | Что от клиента |
|---|---|---|---|
| 1-2 | Брифинг, анализ ниши, договор | Аккаунт-менеджер | Заполнить бриф, передать референсы |
| 3-5 | Карта сайта, прототипы в Figma | UX-проектировщик | Согласовать карту и прототип |
| 6-11 | Дизайн главной, UI-кит, внутренние | Дизайнер | Согласовать концепт и финальные макеты |
| 9-14 | Вёрстка, фронтенд (параллельно с дизайном поздних страниц) | Фронтенд-разработчик | Не требуется |
| 12-16 | Подключение CMS, формы, интеграции | Бэкенд-разработчик | Передать доступы к 1С, CRM, домену |
| 13-16 | Контент, SEO-основа (параллельно) | SEO + копирайтер | Передать тексты или согласовать брифы |
| 17-19 | Финальное тестирование, правки | QA-инженер | Приёмка по чек-листу |
| 20-21 | Перенос на продакшн, аналитика, гарантия | DevOps | Подтвердить запуск |
Параллельные этапы (вёрстка и дизайн поздних страниц, контент и разработка) сжимают общий срок без потери качества. На сложных проектах с глубокой интеграцией 1С таймлайн вырастает до 35-45 дней.
Если уложиться в 21 день критично - сроки фиксируем в договоре со штрафом 1% за каждый день просрочки. Подробнее по бюджетам разных типов проектов в обзоре сколько стоит сайт.
Что может задержать каждый этап
Типовые блокеры со стороны клиента:
- Долгое согласование прототипа. Прототип лежит на стороне клиента 5 дней вместо 1 - сдвинули весь проект. Решение: на старте назначаем одного ответственного с правом подписи.
- Поздняя передача контента. Тексты обещали в первую неделю, отдали на третьей. Решение: или клиент готовит контент до старта, или сразу подключаем копирайтера студии.
- Несогласованность стейкхолдеров. Маркетолог согласовал дизайн, директор посмотрел и попросил переделать. Решение: показываем макеты сразу всем участникам принятия решения.
- Задержка доступов. Не дают логины к домену, 1С, CRM. Решение: список нужных доступов передаём в первый день, проверяем за 3 дня до этапа CMS.
Блокеры со стороны студии встречаются реже, но фиксируем и их:
- Болезнь ключевого специалиста без подмены
- Сбой у подрядчика по интеграции
- Недооценка сложности на этапе сметы
В договоре прописываем, что в случае срыва сроков по нашей вине компенсация считается с первого дня просрочки. На практике за последние 5 лет случаев штрафных выплат было 3 из 270 проектов.
Что в итоге
Этапы разработки сайта - не формальность, а способ управлять проектом. 8 этапов с приёмкой каждого блока ловят проблемы в первые дни, а не за неделю до запуска. Главное по статье:
- 21 день - реалистичный срок для корпоративного сайта до 15 страниц
- Прототип согласовываем письменно, потому что переделка стоит часы, а не недели
- Дизайн и адаптив - параллельно, не в финале
- CMS подбирается под задачи, а не по моде
- SEO-основа закладывается до запуска, не после
- Гарантия 30 дней - часть договора, не маркетинговая фраза
Если нужен корпоративный сайт за 21 день с фиксированной ценой - в Сайты2.рф работаем по этому процессу с 2008 года. NPS 9,2, средний рост заявок ×2,4 у клиентов за полгода после запуска. Бесплатный расчёт по калькулятору - за 1 день.
Рассчитать стоимость моего проекта · Telegram: @t9424744
FAQ
Можно ли уложить разработку сайта в 14 дней
Да, для лендинга или сайта-визитки до 5 страниц. Корпоративный сайт за 14 дней - реален только при готовом контенте, утверждённом стиле и без интеграций с 1С. Подробнее в разборе разработки лендингов.
Когда платить аванс и остаток
В студии работаем по стандартной схеме: 50% после подписания договора и согласования прототипа, 50% за 3 дня до запуска. Платёж разбивается на 3-4 части для проектов от 500 000 ₽. Все суммы в договоре.
Что делать, если нужны правки после запуска
Первые 30 дней - бесплатная гарантия на баги. Доработки функционала и контента - по тарифу технической поддержки от 5 000 ₽ в месяц или по часовой ставке за разовые задачи.
Кто пишет тексты для сайта
Можно отдать готовые материалы, можно подключить копирайтера студии. Для корпоративного сайта средний бюджет на контент - 80 000 ₽, для лендинга - 30 000 ₽. SEO-копирайтер пишет под структуру и ключевые запросы.
Что входит в SEO на этапе разработки
Базовая основа: Title, Description, H1-H3, alt, ЧПУ, sitemap.xml, robots.txt, микроразметка Schema.org, скорость загрузки в зелёной зоне PageSpeed. Этого хватает, чтобы сайт корректно индексировался. Продвижение по позициям - отдельный договор после запуска.
Можно ли разрабатывать сайт без договора по предоплате на доверии
Можно, но в студии так не работаем. Договор с фиксированной ценой и штрафом за срыв сроков - защита для обеих сторон. Для проектов до 100 000 ₽ оформляется упрощённая оферта, для корпоративных - договор с приложениями.
