Этапы разработки сайта: от брифа до запуска

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

Между тем понимание процесса напрямую влияет на результат. Заказчик, который знает, что сейчас идёт этап прототипирования, не будет обсуждать цвет кнопок. А тот, кто понимает, что после утверждения макета менять структуру дорого, внимательнее отнесётся к согласованию.

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

Этап 1. Бриф и первичная оценка

Всё начинается с разговора. На первой встрече или созвоне мы стараемся понять бизнес: чем компания занимается, кто клиенты, откуда они приходят сейчас, зачем нужен сайт и что не устраивает в текущем, если он есть. Параллельно заказчик заполняет бриф — анкету из 20–40 вопросов.

Многие относятся к брифу как к формальности и отвечают односложно. Это ошибка. Чем подробнее ответы, тем точнее будет оценка и тем меньше сюрпризов дальше. Вопросы вроде «кто ваши основные конкуренты» и «чем вы от них отличаетесь» кажутся очевидными, но именно из ответов на них потом рождаются заголовки и аргументы на сайте.

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

Длительность: 2–5 рабочих дней. От заказчика: заполненный бриф, 1–2 часа на встречи.

Этап 2. Аналитика и техническое задание

После того как стороны договорились работать вместе, начинается погружение. Мы изучаем сайты конкурентов, смотрим поисковый спрос в Яндекс Вордстате, анализируем, какие разделы и функции нужны, чтобы закрыть сценарии посетителей.

Результат этапа — техническое задание. Для небольшого сайта это документ на 5–10 страниц, где описаны структура, функциональность, интеграции, требования к контенту и критерии приёмки. На его основе формируется точная смета и календарный план.

Почему не стоит пропускать этот этап

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

Длительность: 3–10 рабочих дней. От заказчика: ответы на уточняющие вопросы, согласование ТЗ.

Этап 3. Прототипирование

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

Прототипы делают для ключевых типов страниц: главная, страница услуги или товара, каталог, контакты. Для визитки из шести страниц — обычно 3–4 прототипа, для интернет-магазина — 8–12.

Длительность: 3–7 рабочих дней. От заказчика: внимательная проверка, сбор замечаний одним списком.

Этап 4. Дизайн

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

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

Как давать обратную связь по дизайну

• Объясняйте, что не нравится и почему, а не предлагайте сразу решение: «заголовок теряется на фоне фото» полезнее, чем «сделайте заголовок красным».
• Собирайте замечания всех заинтересованных лиц в один документ — противоречивые правки от директора и маркетолога в разных письмах тормозят работу.
• Оценивайте дизайн с точки зрения клиента, а не личного вкуса.

В смете обычно заложено 2–3 круга правок. Это нормальное количество для сайта, если стилистика была согласована на первом экране.

Длительность: 1–3 недели. От заказчика: логотип, фирменные цвета, фотографии, своевременные правки.

Этап 5. Вёрстка и программирование

Это самый длинный и наименее заметный для заказчика этап. Верстальщик переводит макеты в код, который корректно отображается во всех популярных браузерах и на экранах разной ширины — от небольшого смартфона до широкого монитора. Программист подключает систему управления, настраивает каталог, формы, интеграции с CRM, платёжными сервисами или 1С.

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

Сроки здесь сильно зависят от функциональности. Визитка на CMS верстается и собирается за 1–2 недели. Интернет-магазин с фильтрами, личным кабинетом и обменом с учётной системой — за 4–8 недель.

Длительность: 1–8 недель. От заказчика: доступы к сторонним сервисам — CRM, платёжному шлюзу, почте.

Этап 6. Наполнение контентом

Параллельно с программированием или сразу после него сайт наполняется текстами, фотографиями, товарами, документами. Если контент готовит студия, копирайтер пишет тексты по согласованной структуре. Если заказчик — он передаёт материалы, а контент-менеджер размещает их и приводит к единому виду.

Именно здесь чаще всего возникают задержки. По нашей статистике, примерно в половине проектов сроки сдвигаются не из-за разработки, а из-за того, что тексты и фото передаются позже запланированного. Чтобы этого избежать, сбор контента стоит начинать ещё на этапе дизайна.

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

1. Описания услуг или товаров — хотя бы тезисно, копирайтер доработает.
2. Фотографии работ, офиса, команды, производства.
3. Отзывы клиентов с их разрешения на публикацию.
4. Сертификаты, лицензии, реквизиты компании.
5. Прайс-лист в таблице.

Длительность: 3–14 рабочих дней. От заказчика: материалы в согласованный срок, вычитка текстов.

Этап 7. Тестирование

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

• отображение на разных устройствах и в разных браузерах;
• работа всех форм: заявки доходят, письма приходят, данные попадают в CRM;
• корректность ссылок, отсутствие «битых» страниц;
• скорость загрузки, вес изображений;
• оформление заказа и оплата в тестовом режиме, если это магазин;
• базовые SEO-настройки: заголовки, описания, карта сайта, файл robots.txt;
• орфография и единообразие текстов.

Мы также просим заказчика пройти по сайту глазами клиента: попробовать найти услугу, оставить заявку, позвонить по номеру из шапки. Свежий взгляд человека, который знает бизнес, нередко находит то, что команда пропустила.

Длительность: 2–5 рабочих дней. От заказчика: собственная проверка и список замечаний.

Этап 8. Запуск и передача

Когда все замечания исправлены, сайт переносится на рабочий хостинг и домен. Если это редизайн, настраиваются перенаправления со старых адресов на новые, чтобы не потерять позиции в поиске. Подключаются Яндекс Метрика и Яндекс Вебмастер, настраиваются цели, сайт отправляется на индексацию.

Затем заказчик получает все доступы: к панели управления, хостингу, домену, аналитике. Мы проводим короткое обучение — обычно час-полтора по видеосвязи — и передаём инструкцию, как добавлять новости, менять цены и редактировать тексты.

Длительность: 1–3 рабочих дня. От заказчика: доступ к домену, присутствие на обучении.

Что происходит после запуска

Запуск — это не конец работы, а начало жизни сайта. Первые 2–4 недели мы внимательно смотрим на аналитику: как ведут себя посетители, где уходят, какие формы работают лучше. Иногда небольшая правка — перенос кнопки выше, изменение заголовка — заметно повышает количество заявок.

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

Сводная таблица сроков

Чтобы было проще планировать, сведём ориентировочную длительность этапов для трёх типичных форматов. Это средние значения для небольшой студии при условии, что заказчик вовремя передаёт материалы и согласовывает работы.

Коротко о главном

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

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

Если понимать логику процесса и знать, где нужен ваш вклад, разработка перестаёт быть чёрным ящиком и превращается в предсказуемый проект с понятными сроками.