Главная / Блог / Разработка сайтов / Этапы разработки сайта: от брифа до запуска

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

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

Зачем знать этапы, если сайт делает подрядчик

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

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

Этап 1. Бриф и постановка целей

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

Что обсуждается:

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

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

Чаще всего проблемы на поздних стадиях вырастают из нечёткой цели. Фраза «хотим современный красивый сайт» не критерий. Критерий звучит так: «посетитель за три клика находит услугу и оставляет заявку».

Этап 2. Структура и прототип

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

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

Результат: карта сайта и прототипы ключевых страниц. Срок: три-семь рабочих дней.

Что проверять на прототипе

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

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

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

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

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

Этап 4. Контент

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

Принципы хорошего контента для делового сайта:

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

Подготовку текстов удобно вести параллельно с дизайном. Результат: готовые тексты и материалы по каждой странице. Срок зависит от объёма, обычно две-четыре недели с параллельной работой.

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

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

Что важно на этом этапе:

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

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

Этап 6. Наполнение и тестирование

На тестовом сайте размещают реальный контент и проверяют всё: от ссылок до работы форм. Тестирование включает несколько слоёв.

Функциональное

Работают ли все кнопки, формы, поиск, фильтры? Приходят ли заявки на почту и в нужные системы? Корректно ли показываются сообщения об ошибках?

Кроссбраузерное и адаптивное

Как сайт выглядит в разных браузерах, на телефонах и планшетах, при разной ширине окна? Не ломаются ли таблицы, меню, изображения?

Производительность

Скорость загрузки на мобильном соединении, размер страниц, оценки по основным метрикам скорости.

Содержательное

Опечатки, битые ссылки, непроверенные цифры, устаревшие фрагменты. Лучше, чтобы тексты проверил человек, не участвовавший в написании.

Поисковое

Заполнены ли заголовки и описания, есть ли карта сайта и файл с правилами для поисковых роботов, правильно ли настроены редиректы. Подробности в материале про SEO на этапе разработки.

Срок: одна-две недели, включая исправления.

Этап 7. Запуск

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

Рекомендации по запуску:

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

Этап 8. Поддержка и развитие

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

Ориентировочные сроки

Тип проекта	Общий срок	Критичные этапы
Лендинг	2–4 недели	контент и дизайн
Корпоративный сайт	6–10 недель	структура и контент
B2B-сайт с каталогом	8–14 недель	интеграции и наполнение
Сайт с личным кабинетом	12 недель и более	программирование и тестирование

Эти цифры ориентировочные: реальный срок зависит от скорости согласований и готовности материалов.

Как не сорвать сроки

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

Если вы планируете сайт и хотите понять, сколько времени и средств он потребует, напишите на [email protected]: опишите цели, примерный объём и желаемый срок. Мы подготовим план этапов и оценим проект.

Нужен датасет под вашу задачу?

Подготовим тестовую партию изображений с разметкой, чтобы вы могли проверить подход на своей модели. Напишите на [email protected] или оставьте заявку.