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

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

Подготовка: бриф, аналитика и техническое задание

Этап 1. Бриф и знакомство с задачей

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

Что важно на этом этапе со стороны заказчика:

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

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

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

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

Итог этапа — техническое задание. В нём описаны:

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

ТЗ согласовывается с заказчиком и становится приложением к договору. С этого момента обе стороны понимают, что именно будет сделано и по каким критериям принимается работа.

Проектирование: прототип и дизайн

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

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

Почему этот этап нельзя пропускать:

• исправить структуру на прототипе в разы быстрее, чем в готовом дизайне;
• заказчик видит сайт «целиком» уже на раннем этапе и может вовремя добавить недостающее;
• копирайтер получает точное понимание, какие тексты и какого объёма нужны.

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

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

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

Как давать правки к дизайну:

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

Разработка: вёрстка, программирование и тестирование

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

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

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

Сайт разрабатывается на тестовом адресе, закрытом от поисковых систем. Вы можете в любой момент посмотреть, как идёт работа, и заранее познакомиться с панелью управления.

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

Сайт наполняется контентом: размещаются тексты, изображения, товары, настраиваются мета-теги страниц. Затем проводится тестирование:

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

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

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

После финальной приёмки сайт переносится на рабочий домен. Подключается SSL-сертификат, открывается индексация, сайт добавляется в панели вебмастеров поисковых систем, настраиваются счётчики аналитики и цели. Если это редизайн, настраиваются перенаправления со старых адресов на новые, чтобы не потерять наработанные позиции.

Заказчик получает:

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

Сколько длится каждый этап

Сроки зависят от формата и сложности проекта. Ниже — ориентировочная длительность для корпоративного сайта средней сложности.

Этап	Длительность	Что нужно от заказчика
Бриф и аналитика	3–5 дней	Ответы на вопросы, примеры, доступ к старому сайту
Техническое задание	3–7 дней	Согласование структуры и функций
Прототип	5–7 дней	Комментарии по логике страниц
Дизайн	7–14 дней	Сводные правки в одном документе
Вёрстка и программирование	10–20 дней	Подготовка контента
Наполнение и тестирование	3–7 дней	Проверка сайта глазами клиента
Запуск	1–2 дня	Доступы к домену и хостингу

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

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

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

Вывод

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

В «Студии-125» каждый проект проходит по этой схеме, а заказчик на каждом этапе видит промежуточный результат. Подробнее о нашем подходе — на странице этапов работы, а о гарантиях после запуска — в разделе гарантий. Напишите нам, и мы предложим план именно под вашу задачу.