Заказчик подписывает договор на сайт, получает макет через три недели и внезапно обнаруживает, что текстов для него еще нет, фото не готовы, а запуск по графику уже через неделю. Дальше правки идут хаотично: дизайнер ждет контент, разработчик ждет финальный дизайн, маркетолог торопит всех сразу. Сайт запускают с задержкой, и причина обычно не в скорости подрядчика, а в том, что этапы создания сайта шли не по порядку.
Если платформу вы уже выбрали, то есть определились между конструктором, готовой CMS или разработкой с нуля, следующий вопрос практический: что идет за чем и что должны подготовить вы сами, пока студия или программист заняты своей частью. Пропущенный шаг на раннем этапе стоит дешево: пара часов на уточнение. Тот же пропуск, обнаруженный на этапе верстки, стоит недели простоя и повторных правок.
Ниже все этапы от первого разговора с подрядчиком до публикации сайта в сети, с чек-листом для каждого шага.
Бриф и этапы создания сайта: с чего всё начинается
Бриф не формальность для договора, а рабочий документ, по которому дизайнер и разработчик принимают решения без лишних согласований. Чем точнее заказчик отвечает на вопросы на этом шаге, тем меньше правок потребуется на этапе дизайна и верстки.
- Цель сайта и метрика успеха: заявки, продажи, запись на услугу, имиджевая задача.
- Три-пять сайтов-референсов с пояснением, что именно понравилось: структура, стиль, подача текста.
- Список разделов, товаров или услуг, которые обязательно должны попасть на сайт.
- Материалы бренда: логотип, фирменные цвета, готовые тексты о компании, если они есть.
- Ответственный на стороне заказчика, который принимает решения и согласовывает макеты.
Без ответов на эти пункты студия работает вслепую и тратит первую неделю на уточнения вместо прототипа.
Если на старте проекта не ясно, кто внутри компании финально принимает решения, процесс неизбежно затягивается на каждом следующем шаге: дизайн будут согласовывать по кругу, а правки в тексты вносить бесконечно. Назначьте одного ответственного за весь проект еще до подписания договора, даже если решение будет формально принимать руководитель. Это экономит время на каждом из следующих этапов создания сайта, потому что подрядчик получает один голос вместо нескольких противоречащих друг другу мнений.
Анализ конкурентов и аудитории
Перед тем как рисовать структуру, подрядчик смотрит сайты конкурентов и формулирует, какие действия должен совершить посетитель на каждой странице: оставить заявку, добавить товар в корзину, позвонить. Этот шаг определяет логику будущего прототипа, а не внешний вид.
Ошибка заказчиков на этом этапе одна и та же: просят «сделать как у конкурента X, но красивее», не объясняя, какую задачу решает конкурент. Полезнее сформулировать, чем ваш сайт должен отличаться по сути: ценой, ассортиментом, скоростью ответа, узкой специализацией.
Полезный прием: выписать не менее пяти сайтов конкурентов и зафиксировать по каждому три пункта: что на главной странице цепляет внимание первым, какой призыв к действию стоит на самом видном месте, как быстро можно найти цену или контакты. Эти три пункта потом ложатся в прототип собственного сайта: вы не копируете оформление, а повторяете логику, которая у конкурентов уже проверена практикой.
Структура сайта и прототип
Сначала строится карта сайта: список страниц и их иерархия, от главной до карточки товара или формы заявки. Затем на каждую ключевую страницу делают прототип, то есть ее скелет без цвета, шрифтов и картинок: блоки, их порядок, тексты-заголовки.
На этом шаге заказчик проверяет логику, а не красоту: все ли нужные разделы на месте, понятен ли путь от главной до заявки, не потерялась ли важная информация. Исправить порядок блоков в прототипе занимает час. Та же правка в готовом дизайне или верстке занимает дни, потому что придется переделывать стили и адаптив.
Типичная ошибка на этапе прототипа
Заказчики часто просят сразу перейти к дизайну, потому что прототип выглядит скучно: серые блоки без цвета и шрифтов сложно оценить на глаз. На практике экономия времени на этом шаге оборачивается потерей времени позже, потому что перестановка блоков в уже свёрстанном макете требует правок кода, а не просто кликов в графическом редакторе. Для заказчика правило простое: пока на экране серые прямоугольники, любые изменения бесплатны по времени, когда появляется цвет и шрифт, цена изменений начинает расти.
Техническое задание и смета
ТЗ фиксирует объем проекта: количество страниц, функциональность, интеграции с CRM, оплатой, маркетплейсами или складскими системами, сроки по каждому этапу и итоговую стоимость. Это документ, на который можно опереться, если по ходу проекта кто-то захочет добавить «еще одну страницу» без пересмотра сроков и бюджета.
Как именно формируется ТЗ, из чего складывается цена и что обязательно прописать в договоре, подробно разбирали в статье о том, где заказать сайт и как оформить договор. Здесь важно одно правило: любое изменение после подписания ТЗ оформляется отдельным пунктом с новым сроком и стоимостью, а не устным «ну добавьте, это же мелочь».
Хорошее техническое задание отвечает не только на вопрос «что сделать», но и на вопрос «что не входит в проект». Явный список того, что остается за рамками текущего этапа, например интеграция с конкретным складским сервисом, мобильное приложение или многоязычная версия сайта, защищает обе стороны от спора о границах работы в середине проекта. Отдельно стоит прописать, в каком формате передаются результаты на каждом шаге: макеты в графическом редакторе, доступ к тестовому серверу, исходный код после оплаты.
Дизайн: от концепции до финальных макетов
Дизайн начинается не с проработки всех страниц подряд, а с концепции: мудборд, цветовая палитра, шрифтовая пара, один-два ключевых экрана, например главная и карточка товара. Заказчик согласовывает концепцию, и только после этого дизайнер разворачивает ее на остальные страницы по уже утвержденной сетке.
Разумное число раундов правок стоит зафиксировать в договоре заранее, обычно это два-три круга замечаний на макет. Без этого ограничения согласование дизайна способно растянуться на месяцы: каждая новая версия провоцирует новые пожелания, а не финализацию.
Отдельно стоит обсудить адаптацию под мобильные устройства до начала верстки, а не после. Большая часть посетителей коммерческих сайтов заходит с телефона, и дизайн, продуманный только для широкого экрана, на маленьком экране часто превращается в нечитаемую кашу из текста и кнопок. Попросите показать мобильную версию хотя бы для главной страницы и формы заявки до утверждения десктопного макета.
Где заказчики чаще всего тормозят процесс
Самая частая причина затянутого согласования: решение принимает не один человек, а несколько, и у них расходятся мнения о цвете кнопки или расположении логотипа. Проговорите на старте, кто финально утверждает макет, и просите коллег присылать замечания до этого разговора, а не после.
Контент: тексты, фото, видео
Контент чаще всего становится причиной сдвига сроков, потому что его готовят в последнюю очередь, когда дизайн и верстка уже сделаны под конкретные объемы текста. Правильный порядок: тексты для ключевых страниц пишутся параллельно с прототипом и дизайном, а не после них.
- Тексты для каждой страницы, с учетом структуры, утвержденной на этапе прототипа.
- Фотографии товаров, команды, офиса или готовых работ в разрешении, подходящем для веба.
- Видео, если формат сайта предполагает его использование.
- SEO-метаданные: заголовки и описания страниц под ключевые запросы.
- Юридические тексты: политика обработки данных, публичная оферта, если на сайте есть оплата.
Как спланировать тексты для сайта так, чтобы они были готовы к моменту верстки, а не после нее, разобрано в материале про контент для сайта и план текстов до запуска.
Если сайт должен приносить трафик из поиска, тексты для страниц стоит писать с учетом ключевых запросов, под которые продвигается каждая страница, а не добавлять ключевые слова постфактум в уже готовый текст. Переписывать текст под SEO после того, как он свёрстан и утвержден, занимает больше времени, чем учесть это сразу на этапе написания.
Разработка, тестирование и запуск
На этапе разработки программист собирает страницы из утвержденного дизайна, подключает CMS или движок конструктора, настраивает формы, оплату и интеграции, прописанные в ТЗ. После верстки сайт проверяют на разных устройствах и браузерах: корректность отображения, работу форм, скорость загрузки страниц.
SSL-сертификат на сайте не просто защищает данные посетителей при передаче, он входит в число сигналов, которые поисковые системы учитывают при ранжировании страниц. Сайт без SSL браузер способен пометить прямо в адресной строке как передающий данные по незащищенному соединению, и это снижает доверие посетителя раньше, чем он успел прочитать хоть один абзац текста.
Перед публикацией настраивают домен и хостинг, подключают SSL-сертификат и системы аналитики, чтобы с первого дня собирать данные о посетителях. Если сайт заменяет старую версию, отдельно настраивают переадресацию со старых адресов страниц на новые, иначе сайт теряет позиции в поиске и переходы по старым ссылкам из писем и соцсетей.
| Этап | Что делает исполнитель | Что готовит заказчик |
|---|---|---|
| Бриф и анализ | Формулирует вопросы, изучает конкурентов и аудиторию | Отвечает на бриф, называет ответственного за решения |
| Прототип | Строит карту сайта и скелет страниц | Проверяет логику и полноту разделов |
| ТЗ и смета | Фиксирует объем работ, сроки, стоимость | Подписывает ТЗ, уточняет интеграции |
| Дизайн | Разрабатывает концепцию и макеты страниц | Согласовывает в пределах оговоренных раундов правок |
| Контент | Верстает страницы под готовые тексты | Готовит тексты, фото, видео, юридические документы |
| Разработка и тест | Собирает сайт, проверяет на устройствах и браузерах | Тестирует сайт глазами реального клиента, дает замечания |
| Запуск | Настраивает домен, SSL, аналитику, переадресацию | Передает доступы к домену и почте, если они уже есть |
Частые вопросы
Сколько этапов в создании сайта
Обычно процесс делят на шесть-семь крупных этапов: бриф, анализ конкурентов, прототип, техническое задание, дизайн, контент и разработка с тестированием, после которых идет запуск. Некоторые студии объединяют анализ с брифом или контент с дизайном в один блок работ, но логика последовательности остается той же.
Можно ли пропустить прототип и перейти сразу к дизайну
Для простого одностраничного лендинга с коротким набором блоков это допустимо, и дизайнер иногда рисует структуру прямо в макете. Для сайта с несколькими разделами, каталогом или личным кабинетом пропуск прототипа почти всегда приводит к переделке готового дизайна из-за ошибок в логике страниц.
Кто готовит тексты и фото: заказчик или студия
Зависит от договора: одни студии пишут тексты и подбирают фото как часть пакета услуг, другие ожидают готовые материалы от заказчика. Перед подписанием ТЗ стоит прямо спросить, входит ли контент в стоимость, потому что отсутствие этого пункта в договоре чаще всего и сдвигает сроки запуска.
Что если нужно изменить требования в середине разработки
Изменение оформляется как дополнение к ТЗ с новым сроком и, если объем работ вырос, новой стоимостью. Правки, не меняющие объем, например замена текста на странице, обычно укладываются в рабочий процесс без пересмотра договора. Крупные изменения, такие как добавление нового раздела, требуют отдельного согласования.
Сколько раундов правок дизайна считается нормой
Чаще всего в договоре фиксируют два-три раунда правок на каждый макет: первый охватывает крупные замечания по композиции, последующие доводят детали. Без такого ограничения согласование способно идти неограниченное время, потому что у каждой новой версии макета находятся новые пожелания.
С чего начать
Если вы только планируете сайт, порядок действий такой:
- Заполните бриф по чек-листу выше самостоятельно, даже если подрядчика еще не выбрали: это ускорит первую встречу.
- Соберите три-пять референсов и список разделов, без которых сайт не имеет смысла.
- Определите, кто в компании согласовывает макеты и тексты, и зафиксируйте число раундов правок до начала работы.
- Начните готовить тексты и фото параллельно с поиском подрядчика, а не после подписания договора.
Если разбираться во всех этапах самостоятельно не хочется, этим занимается студия: разработка сайтов в Neurounit включает бриф, прототип, дизайн, контент и запуск под ключ, с одним ответственным за весь процесс.
