Этапы разработки сайта: от брифа до запуска — что происходит на каждом шаге
Коротко: разработка сайта — это восемь последовательных этапов: бриф и аналитика, структура и прототип, дизайн, вёрстка, программирование, наполнение, тестирование, запуск с настройкой аналитики. На каждом этапе есть конкретный результат, который заказчик принимает, — и если этап пропустить или пройти формально, проблема всплывёт позже и обойдётся дороже. Разбираем, что происходит на каждом шаге, что вы получаете на руки и на чём проекты чаще всего буксуют.
Этап 1. Бриф и аналитика: зачем сайту существовать
Первый этап — не про дизайн, а про бизнес. Студия выясняет: кто ваши клиенты, какие задачи сайт должен решать (заявки, продажи, запись, репутация), кто конкуренты и как они выглядят в поиске. На этом же шаге фиксируются требования: интеграции с CRM и 1С, платёжные системы, калькуляторы, личные кабинеты.
Результат этапа: заполненный бриф, анализ 3–5 конкурентов, согласованное техническое задание. Хорошее ТЗ — страховка обеих сторон: по нему принимается каждый следующий этап.
Этап 2. Структура и прототип: скелет до косметики
Дальше проектируется карта сайта (какие страницы нужны и как связаны) и прототип ключевых страниц — схематичный макет без дизайна: где заголовок, где форма, где преимущества, куда ведёт кнопка. Прототип согласовывать в разы дешевле, чем перерисовывать готовый дизайн: переставить блок на схеме — минуты, в свёрстанном макете — часы.
Результат этапа: карта сайта и кликабельный прототип главной и ключевых внутренних страниц.
Этап 3. Дизайн: визуальный язык бренда
На основе прототипа рисуются макеты: сначала дизайн-концепция (главная страница в одном-двух вариантах), после её утверждения — остальные страницы в едином стиле. Сразу проектируются две версии: десктопная и мобильная — больше половины трафика в большинстве ниш приходит с телефонов, и «мобильную потом как-нибудь адаптируем» — типичный источник кривых сайтов.
Результат этапа: утверждённые макеты всех типовых страниц в двух разрешениях.
Этап 4. Вёрстка: макет превращается в страницы
Верстальщик переводит макеты в HTML/CSS/JS. Критерии качества здесь измеримы: страницы выглядят одинаково в основных браузерах, корректно ведут себя на ширинах от 320 пикселей, проходят проверку скорости, изображения оптимизированы, анимации не дёргаются.
Результат этапа: свёрстанные страницы, которые можно открыть и потрогать на любом устройстве.
Этап 5. Программирование: сайт оживает
Подключается система управления (CMS) или пишется серверная часть: формы отправляют заявки, каталог фильтруется, корзина считает, админка позволяет менять контент без программиста. Здесь же делаются интеграции — CRM, онлайн-оплата, склад, 1С.
Результат этапа: рабочий сайт на тестовом домене с работающими сценариями: оставить заявку, оформить заказ, найти товар.
Этап 6. Наполнение и SEO-база
Сайт заполняется реальным контентом: тексты, фотографии, карточки товаров или услуг. Параллельно закладывается поисковый фундамент: человекопонятные адреса страниц, заголовки и метатеги под собранную семантику, файлы robots.txt и sitemap.xml, микроразметка. Делать это до запуска в разы дешевле, чем переделывать после — переезды адресов на живом сайте всегда стоят части трафика.
Результат этапа: все страницы наполнены, базовая поисковая оптимизация выполнена.
Этап 7. Тестирование: ловим до запуска, а не после
Проверяется всё, что может сломаться: формы и уведомления, оплата, отображение на разных устройствах и браузерах, скорость загрузки, битые ссылки, поведение при ошибочном вводе. Отдельно — нагрузочная проверка, если ожидается рекламный трафик.
Результат этапа: протокол тестирования с исправленными замечаниями.
Этап 8. Запуск и первые недели жизни
Сайт переносится на боевой домен: настраиваются сервер и SSL-сертификат, подключаются Яндекс Метрика и вебмастерские панели, сайт отправляется на индексацию. Первые две-четыре недели — режим наблюдения: смотрим на поведение живых посетителей, чиним то, что не показало тестирование, снимаем первые данные для доработок.
Результат этапа: сайт в открытом доступе, аналитика собирает данные, есть план доработок по первым метрикам.
Сводная таблица: этап → результат → доля времени
| Этап | Результат на руках | Доля времени проекта |
|---|---|---|
| Бриф и аналитика | ТЗ, анализ конкурентов | ~10% |
| Структура и прототип | Карта сайта, прототип | ~10% |
| Дизайн | Макеты всех страниц | ~20% |
| Вёрстка | Адаптивные страницы | ~15% |
| Программирование | Рабочий сайт на тесте | ~20% |
| Наполнение и SEO-база | Контент + оптимизация | ~10% |
| Тестирование | Протокол проверки | ~10% |
| Запуск | Живой сайт с аналитикой | ~5% |
Абсолютные сроки зависят от типа сайта: лендинг и интернет-магазин с интеграциями — проекты разного порядка. Реальные вилки по типам сайтов мы разобрали в статье о сроках разработки, а деньги — в разборе стоимости разработки с нуля.
Где проекты буксуют: три узких места
- Согласования на стороне заказчика. Самая частая причина срыва сроков — макет лежит без ответа две недели. Лечится назначением одного ответственного за решения с вашей стороны.
- Контент. «Тексты пришлём сами» — и этап наполнения растягивается на месяц. Отдавайте контент студии или готовьте его параллельно дизайну, а не после вёрстки.
- Правки задним числом. Изменение структуры после утверждения дизайна откатывает проект на два этапа назад. Поэтому прототип — главный этап для внимательного чтения, а не формальность.
Чтобы таких историй не было, выбирайте исполнителя по внятным критериям — у нас есть разбор, как выбрать подрядчика и на какие красные флаги смотреть в договоре.
Вопросы и ответы
Можно ли пропустить прототип и сразу рисовать дизайн?
Технически да, экономически нет. Каждая структурная правка в готовом дизайне стоит в разы дороже той же правки на схеме. Прототип окупается на первом же «а давайте поменяем местами».
Когда подключать SEO-специалиста?
На этапе структуры, а не после запуска. Семантика влияет на карту сайта: какие страницы вообще нужны. Сайт, спроектированный без учёта спроса, часто приходится достраивать.
Что нужно подготовить заказчику до старта?
Минимум: доступы к домену и хостингу (или решение о покупке), фирменные материалы (логотип, брендбук, если есть), контакты ответственного за решения и фактуру о компании — чем конкретнее, тем лучше результат брифа.
Сайт запущен — работа закончена?
Запуск — это начало эксплуатации. Дальше: наблюдение за метриками, доработки по поведению пользователей, регулярные обновления и продвижение. Сайт без развития через год-два морально устаревает.
Нужен ли договор на каждый этап?
Обычно договор один, но с поэтапной приёмкой и оплатой: закрыли этап — подписали акт — пошли дальше. Это дисциплинирует обе стороны и делает бюджет прозрачным.