Перейти к содержимому
Рабочее место веб-разработчика: клавиатура, мышь и часы

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

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

Заказчик, который впервые запускает сайт, обычно видит две точки: «мы договорились» и «сайт работает». Всё, что между ними, выглядит как чёрный ящик, из-за которого сроки кажутся непредсказуемыми, а вопросы студии — лишними. На деле разработка состоит из понятных этапов, у каждого есть результат, который можно потрогать и согласовать. Расскажем, как этот путь устроен у нас и что на каждом шаге зависит от вас.

Зачем вообще делить проект на этапы

Разбивка на этапы — не бюрократия, а способ управлять риском. Самая дорогая ошибка в веб-разработке — обнаружить недопонимание, когда сайт уже свёрстан и запрограммирован. Если структура или логика каталога оказались не такими, как ожидал заказчик, переделка затрагивает дизайн, вёрстку и код одновременно. Та же правка на этапе прототипа занимает час.

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

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

Общая карта проекта

Для корпоративного сайта на 20–30 страниц путь выглядит примерно так. Сроки указаны для ситуации, когда заказчик отвечает на вопросы и согласует материалы в течение двух-трёх рабочих дней. Если согласование растягивается на недели, весь проект сдвигается соответственно.

ЭтапРезультатСрокУчастие заказчика
Бриф и оценкаЗаполненный бриф, коммерческое предложение2–5 днейИнтервью, ответы на вопросы
Аналитика и структураКарта сайта, список функций, ТЗ1–2 неделиСогласование структуры
ПрототипированиеЧёрно-белые схемы страниц1–2 неделиАктивные правки
ДизайнМакеты для компьютера и смартфона2–3 неделиВыбор концепции, правки
РазработкаРабочий сайт на тестовом сервере2–4 неделиПодготовка контента
Наполнение и тестированиеПроверенный сайт с контентом1 неделяПриёмка
ЗапускСайт на домене, аналитика, обучение1–3 дняДоступы к домену и хостингу

Суммарно получается 5–8 недель для корпоративного сайта и 6–10 недель для интернет-магазина. Лендинг укладывается в 2–3 недели за счёт того, что многие этапы сжимаются до одного-двух дней. Дальше разберём каждый шаг подробнее.

Схема этапов разработки сайта от брифа и прототипа до дизайна, вёрстки и запуска
Схема этапов разработки сайта от брифа и прототипа до дизайна, вёрстки и запуска

Бриф, оценка и договор

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

По итогам брифа мы готовим оценку: состав работ, сроки, стоимость по этапам. Ориентиры по ценам опубликованы в разделе услуг и цен, но точная сумма зависит от числа уникальных шаблонов, интеграций и объёма контента. Например, корпоративный сайт начинается от 120 000 ₽, а каждая серьёзная интеграция с учётной системой добавляет от 40 000 ₽.

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

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

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

Результат — карта сайта и техническое задание. В ТЗ фиксируется всё, что потом будет проверяться при приёмке: какие поля в форме заявки, куда уходят данные, как фильтруется каталог, кто и как редактирует контент. Хорошее ТЗ защищает обе стороны от споров «мы же это имели в виду». Как его составлять, мы подробно разобрали в статье о техническом задании на сайт.

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

Прототипы и дизайн

Прототипирование

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

Дизайн-концепция и макеты

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

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

Разработка, наполнение и тестирование

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

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

Перед сдачей тестировщик проверяет сайт по чек-листу. Вот что в него входит у нас как минимум:

  • Отображение в актуальных браузерах и на экранах от 320 пикселей до широких мониторов
  • Работа всех форм: отправка, валидация, доставка заявки в почту и CRM
  • Корректность ссылок, отсутствие страниц с ошибками и пустых блоков
  • Скорость загрузки ключевых страниц, сжатие изображений
  • Мета-теги, sitemap.xml, robots.txt, микроразметка
  • Согласие на обработку персональных данных и политика конфиденциальности
  • Удобство редактирования контента в админке

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

Запуск и первые недели после него

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

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

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

Где проекты чаще всего буксуют

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

Можно ли начать дизайн, пока мы думаем над структурой?

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

Почему тексты нельзя дописать после запуска?

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

Что делать, если требования изменились по ходу проекта?

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

Сколько времени заказчику нужно тратить на проект?

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

Итоги

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

Нужен сайт или интернет-магазин?

Обсудим задачу, подскажем подходящую платформу и оценим сроки и бюджет — бесплатно и без обязательств.

Обсудить проект

Читайте также

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