Этапы разработки сайта: что происходит на каждом из них

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

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

И дольше всего в проекте идут не работы, а согласования и сбор материалов.

Бриф и сбор требований

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

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

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

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

Аналитика и техническое задание

Этап, который чаще всего вычёркивают из сметы ради экономии, и чаще всего зря.

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

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

При этом техзадание на двести страниц, которое пишут два месяца, я защищать не стану: к началу вёрстки половина требований устареет, а заказчик платит за документ, а не за сайт. Для лендинга аналитика укладывается в один предметный разговор. Для магазина с обменом товарами и остатками — это самостоятельный этап со своим бюджетом: в нашем направлении интеграций и автоматизации аудит процессов и точек интеграции стоит от 50 000 ₽ и занимает 2–3 недели. Сначала карта данных, потом код.

Прототип и UX

Чёрно-белые прямоугольники, в которых расставлены блоки и переходы между страницами. Ни цвета, ни шрифтов, ни картинок.

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

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

Правка на прототипе стоит двадцать минут работы. Та же правка на свёрстанном сайте — несколько дней и переговоры о доплате.

Дизайн

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

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

Мобильную версию смотрят здесь же, а не «потом адаптируем»: телефон — основной экран.

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

Макет превращают в живые страницы, а дальше начинается то, за что в основном и платят.

Вёрстка — это аккуратность и проверка на устройствах. Программирование — каталог и его свойства, формы и валидация, поиск, фильтры, корзина и оплата, права доступа, личный кабинет, админка. Мы собираем это на 1С-Битрикс и Bitrix Framework: когда рядом уже стоят 1С и Битрикс24, обмен обходится дешевле, чем связка трёх вендоров через самописные прослойки.

Отдельная часть этапа — интеграции. Сайт почти никогда не живёт сам: товары, цены и остатки приходят из учётной системы, заявка должна создать лид в CRM с источником и ответственным, оплата и доставка подключаются внешними сервисами. Здесь смета вырастает чаще всего, и предсказать это по словам «нужен обмен с 1С» невозможно — пока не увидишь конфигурацию, не узнаешь, сколько в ней доработок. Как устроена эта работа, разобрано в статье про внедрение Битрикс24; по нашему направлению интеграций комплексный проект с 1С и телефонией стоит 250 000–600 000 ₽ и занимает 1–2 месяца.

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

Наполнение контентом

Этот этап рушит сроки чаще остальных. И обычно — на стороне заказчика.

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

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

Тестирование

Проверяют не «работает ли сайт» — проверяют каждый сценарий, за которым пришёл живой человек.

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

Самая дорогая находка этого этапа почти всегда одна и та же: форма работает, письмо отправляется, но попадает в спам, а в CRM не доходит вообще. Сайт при этом «работает».

Запуск

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

Что здесь нельзя пропускать: карта редиректов со старых адресов на новые. Если у прежнего сайта был поисковый трафик, а адреса изменились, без редиректов вы теряете позиции — и выясняется это через несколько недель, когда падение уже случилось. Дальше — robots.txt и sitemap.xml в рабочем состоянии, снятый запрет индексации на продакшене (и закрытый от поисковиков тестовый контур — иначе его копия начнёт конкурировать с сайтом), переобход страниц в Яндекс.Вебмастере, счётчики с целями именно на заявку и звонок, а не на «посещение страницы». Без последнего через месяц вы не ответите, окупилась ли реклама.

Поддержка и развитие

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

В поддержку и развитие входят обновления платформы и модулей, бэкапы, мониторинг доступности и скорости, мелкие доработки и регламент реагирования. Абонемент у нас — от 30 000 ₽/мес, выделенный разработчик — от 300 000 ₽/мес. Обновление, которое в пятницу вечером сломало доработку, — классика для сайтов, брошенных без сопровождения.

Сколько занимает каждый этап

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

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

От чего зависят срок и стоимость

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

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

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

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

Частые вопросы

Можно ли пропустить прототип и сразу рисовать дизайн?

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

Какие этапы идут параллельно?

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

У нас уже есть сайт. Все этапы нужны заново?

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

Кто пишет тексты и собирает фотографии?

По умолчанию — заказчик или отдельный копирайтер в смете. «Наполним по вашим материалам» означает, что текст причешут под структуру страницы, но не напишут с нуля. Съёмка товаров и интерьеров — отдельный бюджет и отдельный подрядчик.

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

Гарантийный период на ошибки, а дальше — поддержка по регламенту: обновления, бэкапы, мониторинг, доработки. У нас это абонемент от 30 000 ₽/мес; нужен постоянный ресурс под развитие — выделенный разработчик от 300 000 ₽/мес.

Хотите план по своему проекту

Расскажите задачу — что за сайт, какие системы уже работают, есть ли контент и какие сроки. В ответ соберём план создания сайта по этапам с вилкой по деньгам: аналитика и прототип, дизайн, разработка на 1С-Битрикс, интеграция с CRM и 1С, тестирование, запуск и поддержка. Цены и состав работ — на странице веб-разработки: лендинг от 40 000 ₽, интернет-магазин от 150 000 ₽, корпоративный сайт и портал от 200 000 ₽.

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