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

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

Этапы создания сайта: общая схема

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

Этап 1. Бриф и цели проекта

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

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

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

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

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

Этап 2. Анализ конкурентов и ниши

Цель анализа — понять, какой уровень сайта ожидают клиенты и поисковые системы в вашей нише. Смотрят на сайты, которые стоят в ТОПе по главным запросам, а не только на прямых конкурентов из города.

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

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

Что нужно от заказчика: назовите прямых конкурентов и сайты, которые вам нравятся. Объясните, чем именно: удобство, подача цен, фотографии.

Этап 3. Семантика и структура сайта

Семантическое ядро — это список поисковых запросов, по которым клиенты ищут ваши услуги. Запросы группируют: в одну группу попадают те, по которым поисковик показывает одинаковые страницы.

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

Почему структуру делают до дизайна

Дизайнер рисует шаблоны страниц. Если структура не определена, он не знает, сколько шаблонов нужно и какие блоки в них будут.

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

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

Этап 4. Прототипы страниц

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

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

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

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

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

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

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

• Макеты для компьютера и телефона по каждому шаблону.
• Состояния элементов: наведение, ошибки в формах, всплывающие окна.
• Иконки, иллюстрации, обработка фото.
• UI-кит: цвета, шрифты, кнопки — чтобы новые страницы выглядели так же.

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

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

Этап 6. Тексты и контент

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

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

Если на сайте есть формы, нужны политика обработки персональных данных и согласие посетителя. Требования задаёт закон № 152-ФЗ «О персональных данных». Тексты документов лучше согласовать с юристом.

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

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

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

Разработчики переводят макеты в код и подключают систему управления сайтом. Работа идёт на тестовом адресе, недоступном для поисковиков.

• Вёрстка. Шаблоны страниц в HTML и CSS, адаптация под разные экраны, анимации.
• CMS. Установка и настройка системы управления, удобная админка для редактирования.
• Функционал. Формы, каталог, фильтры, корзина, оплата, калькуляторы.
• Интеграции. CRM, 1С, сервисы доставки, телефония, мессенджеры.
• Наполнение. Загрузка текстов, фото и товаров.

Платформу выбирают ещё на этапе брифа: от неё зависят возможности и стоимость. Сравнение вариантов — в статье «Какую CMS выбрать».

Тестовую копию закрывают от индексации. Надёжнее всего — паролем на уровне сервера. Запрет в robots.txt сам по себе не гарантирует, что страницы не попадут в индекс: об этом сказано в справке Google.

Что нужно от заказчика: доступы к хостингу, домену, CRM и платёжным сервисам. Если нужна интеграция с 1С, понадобится специалист, который обслуживает вашу учётную систему.

Этап 8. SEO-настройка перед запуском

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

• Уникальные title и description на каждой странице, один H1.
• Понятные адреса страниц (ЧПУ), без лишних параметров.
• Файл robots.txt по справке Яндекса: служебные разделы закрыты, нужные страницы открыты.
• Карта сайта sitemap.xml с актуальными адресами — требования Яндекса и Google.
• Одно главное зеркало: с www или без, только HTTPS, остальные варианты перенаправляются — справка Яндекса.
• Атрибут rel=»canonical» на страницах с параметрами, сортировками и пагинацией.
• Страница 404 отдаёт код ответа 404, а не 200.
• Микроразметка: организация, хлебные крошки, товары, FAQ — по ситуации.
• Атрибуты alt у изображений, сжатые картинки.
• Скорость загрузки и стабильность вёрстки на телефоне.
• Перелинковка: меню, хлебные крошки, ссылки между связанными страницами.

Полный список проверок с нормами и инструментами — в статье «Внутренняя и техническая оптимизация сайта».

Этап 9. Тестирование

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

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

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

Этап 10. Запуск и перенос со старого сайта

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

Перенаправления 301

У старого сайта есть страницы в индексе, ссылки и закладки. Если новые адреса отличаются, каждую старую страницу перенаправляют на соответствующую новую с кодом 301 — «перемещено навсегда».

1. Выгрузите все адреса старого сайта: из краулера, sitemap.xml, Метрики и Вебмастера.
2. Составьте таблицу соответствия: старый адрес → новый адрес.
3. Перенаправляйте на аналогичную по смыслу страницу, а не всё подряд на главную.
4. После запуска проверьте, что перенаправления работают и не образуют цепочек.
5. Отправьте новый sitemap.xml в Вебмастер и Search Console и следите за индексацией.

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

Если меняется домен, в Вебмастере есть инструмент «Переезд сайта». Условия его использования описаны в справке Яндекса. Яндекс прямо предупреждает, что не гарантирует сохранение позиций и посещаемости после переезда.

Подробно о переносе без потери позиций — в статье «Перенос сайта».

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

Этап 11. Подключение аналитики

Без аналитики нельзя понять, работает ли сайт. Её подключают к запуску, а не «когда-нибудь потом».

• Яндекс Метрика со счётчиком на всех страницах и целями: отправка форм, клики по телефону, переходы в мессенджеры. Типы целей описаны в справке Метрики.
• Яндекс Вебмастер — индексация, ошибки, поисковые запросы в Яндексе.
• Google Search Console — то же для Google.
• Передача заявок в CRM с источником, если CRM есть.

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

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

Этап 12. Что делать после запуска

Запуск — не конец проекта, а начало работы сайта. Первые недели особенно важны.

• Следите за индексацией и ошибками в Вебмастере и Search Console.
• Проверяйте, приходят ли заявки и с каких страниц.
• Исправляйте ошибки, найденные посетителями, в гарантийный срок.
• Добавляйте страницы, которые отложили на второй этап.
• Запускайте продвижение: SEO, контекстную рекламу, контент.

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

Сколько времени занимает создание сайта

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

На сроки влияют не только объём работ, но и заказчик:

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

Попросите исполнителя расписать сроки по этапам. Так видно, на чём проект может задержаться и чья это зона ответственности.

Частые ошибки при создании сайта

Как ускорить создание сайта

Сократить срок можно без потери качества. Вот что действительно помогает:

1. Подготовьте материалы до старта. Фото, прайсы, реквизиты, описания услуг и логотип — в одной папке.
2. Назначьте одного ответственного, который может принять решение в день запроса.
3. Согласовывайте по этапам. Утверждённая структура и прототипы не пересматриваются на этапе вёрстки.
4. Запустите минимальную версию. Ключевые страницы — сейчас, второстепенные разделы — после запуска.
5. Ведите работы параллельно. Тексты пишутся, пока рисуется дизайн, а сбор доступов идёт с первого дня.
6. Используйте типовые решения там, где уникальность ничего не даёт: формы, каталог, личный кабинет.

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

Коротко

• Этапы создания сайта: бриф, конкуренты, семантика и структура, прототипы, дизайн, тексты, разработка, SEO, тестирование, запуск, аналитика.
• Структуру по поисковым запросам делают до дизайна — так продвижение заложено в сайт с первого дня.
• Тестовую копию закрывают паролем, а при запуске снимают запрет индексации.
• При замене старого сайта нужна таблица соответствия адресов и перенаправления 301.
• Сроки зависят не только от объёма работ, но и от скорости материалов и согласований.
• После запуска сайт нужно развивать: без этого он устаревает и теряет позиции.