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

Статья будет полезна не только исполнителю, но и заказчику: она поможет погрузиться в процесс и понимать, что происходит на каждом шаге. Если вам говорят, что сделают сайт в 2 этапа, — это повод насторожиться: либо исполнитель сделает сильно меньше, чем нужно, либо он просто решил не разбивать работу на отдельные этапы и объяснить весь процесс в двух шагах, что тоже не внушает уверенности вам как заказчику. Адекватный процесс создания сайта можно разбить на 7–10 этапов и более — в зависимости от того, насколько подробно рассматривать каждый шаг. Мы не будем впадать в крайности и двигаться микрошагами на каждый вдох и выдох, а постараемся соблюсти баланс между количеством этапов и качеством описания каждого из них.

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

Все этапы создания сайта одним взглядом

Этап	Что делаем	Что получает заказчик
1. Бриф и знакомство	Обсуждаем проект и составляем бриф под задачу	Понятная задача и общие ожидания
2. Анализ конкурентов и рынка	Изучаем конкурентов в поиске и рекламе: структуру сайтов, сильные и слабые стороны	Структура и гипотезы, на чем сайт будет продавать
3. Договор: объем, стоимость, сроки	Фиксируем объем работ, этапы, сроки и стоимость	Договор и план работ
4. Структура и прототип	Прорабатываем страницы, блоки и путь посетителя до заявки	Утвержденная структура
5. Техническая подготовка	Подбираем CMS и хостинг, оформляем домен и хостинг на клиента, связываем все вместе	Площадка, где сайт будет жить
6. Дизайн и верстка	Делаем дизайн и верстку сразу на сайте, вы смотрите онлайн	Работающий сайт на тестовом адресе
7. Наполнение и базовое SEO	Мета-теги, заголовки, alt, Вебмастер, Метрика с целями, микроразметка, тексты	Сайт с содержимым, готовый к индексации
8. Тестирование и приемка	Проверяем формы, адаптивность, скорость, аналитику, 152-ФЗ	Проверенный сайт, правки внесены
9. Запуск и техподдержка	Открываем сайт для поиска, записываем видеоинструкции, поддерживаем 14–60 дней	Сайт работает, все доступы у вас

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

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

Результат: понятная задача и общие ожидания.

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

Любой продукт делается со строгой опорой на конкурентный и маркетинговый анализ. Исключение одно — если у вас совсем нет конкурентов, но такое бывает только на необитаемом острове или в наших фантазиях. Если это действительно так, вам несказанно повезло: вы можете сделать сайт и практически гарантированно занять хорошие позиции. Но тут возникает вопрос: есть ли спрос, если нет конкуренции? Все эти моменты выявляются на этом этапе создания сайта. Определяем основных конкурентов в органической и рекламной выдаче, изучаем структуру их сайтов и конкретных страниц, сильные и слабые стороны, ищем, где можно звучать и выглядеть лучше на их фоне. То есть проводится полный исчерпывающий анализ и вырабатывается общая система.

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

Этап 3. Договор: объем, стоимость и сроки

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

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

Результат: договор и план работ.

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

Далее необходимо выстроить структуру проекта. Это один из ключевых этапов разработки сайта: ошибка в структуре потом обходится дороже всего. В зависимости от типа сайта разрабатываем либо структуру страницы (лендинг, визитка, промо сайт), либо структуру многостраничного проекта (корпоративный сайт, каталог, интернет-магазин и так далее). Прототип страниц, блоков и пути посетителя делается заранее по ряду причин:

• SEO. Заложить SEO-потенциал проекта на старте — очень важный момент. Структура прорабатывается как минимум на основе конкурентов из топа, а как максимум — на полном семантическом ядре под ваш проект. Здесь все зависит от бюджета и сроков: семантическое ядро — более дорогое и проработанное удовольствие, но и структура на основе конкурентов плюс вашей матрицы товаров и услуг — тоже хороший вариант, который, по нашему опыту, подходит в большинстве случаев.
• Реклама. Человек почти никогда не смотрит один сайт, если это не брендовый запрос. Как правило, он открывает несколько вкладок с первой-второй страницы выдачи и сравнивает. Здесь очень важно качественно выделяться, а не просто отличаться от конкурентов. Если посмотреть топ выдачи по вашему запросу, вы заметите, что посадочные страницы сделаны примерно по одной структуре: у кого-то блоков больше, у кого-то меньше. Задача — взять их за основу и качественно улучшить, чтобы при сравнении человек видел, что получает вроде бы то же самое, но на лучших условиях. То есть, с одной стороны, вы даете то же, что и конкуренты, а с другой — делаете это качественнее. Приветствуются и доработки структуры: больше блоков, шире предложение. Например, если у конкурентов мало отзывов, это не повод их не делать, а дополнительный повод выделиться. Здесь нужен опыт; если его нет — ориентируйтесь на конкурентов или обратитесь в студию веб-разработки.

Результат: утвержденная структура.

Этап 5. Техническая подготовка: домен, хостинг, CMS

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

Далее, если это WordPress, подбирается хостинг. Мы очень рекомендуем Beget — за годы непрерывной работы это именно тот подрядчик, который максимально подходит по всем требованиям: стабильность, стоимость, качество и скорость технической поддержки (это очень важно). По типу сервера мы как разработчики рекомендуем VPS с последующей настройкой; если вы делаете проект самостоятельно, берите обычный виртуальный хостинг — с ним будет точно проще.

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

Результат: площадка, где сайт будет жить.

Этап 6. Дизайн и верстка — смотрите онлайн

Главный из этапов разработки сайта. В зависимости от бюджета можно пойти двумя путями:

1. Сделать отдельный дизайн-макет, например в Figma, утвердить его, а затем сверстать. Этап создания дизайна сайта в этом случае идет отдельно от верстки. Из минусов — мало специалистов делают нормальные адаптивные макеты: обычно все рисуют их зачем-то в ширину 1920 px, хотя на практике большая часть мониторов, в основном ноутбуков, работает в диапазоне 1200–1500 px. Потом при верстке приходится подбирать размеры шрифтов и других элементов, и все выглядит не так, как на макете. Макет нужно сразу делать правильно, под реальные разрешения. Скорее всего, это будет дольше и дороже, но кому-то так удобнее: например, если у вас есть опыт работы в Figma, такой макет сильно поможет при верстке.
2. Дизайн и верстка сразу на самом сайте. Этот формат быстрее, дешевле и удобнее, если вы отдаете проект под ключ подрядчику. Мы предлагаем этот вариант как основной, потому что у него ряд плюсов именно для заказчика: это дешевле, быстрее, а за результатом вы следите онлайн со всех устройств и видите, как будет выглядеть готовый продукт, а не красивую картинку.

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

Результат: работающий сайт на тестовом адресе.

Этап 7. Наполнение и базовое SEO

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

• мета-описания страниц;
• структуру заголовков H1–H6;
• alt-описания изображений;
• подключение сайта к Яндекс.Вебмастеру;
• настройку и подключение Яндекс.Метрики со всеми нужными целями;
• микроразметку;
• GEO-оптимизацию для ИИ-систем;
• проверку и оптимизацию текстов.

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

Результат: сайт с содержимым, готовый к индексации.

Этап 8. Тестирование и приемка

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

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

Результат: проверенный сайт, правки внесены.

Этап 9. Запуск и техподдержка

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

Более того, после запуска мы предоставляем каждому клиенту техническую поддержку на 14–60 дней — в зависимости от проекта и договоренностей на 3 этапе. Это делает запуск и приемку комфортнее, без опасений, что что-то упустили: срока поддержки хватает, чтобы убедиться, что все системы работают как нужно не только на коротких тестах, но и на длинной дистанции и под реальной нагрузкой.

Результат: сайт работает, все доступы у вас.

Сколько длится создание сайта

Основные этапы создания сайта одинаковы для любого проекта, но на визитке они проходят быстрее, чем на многостраничном сайте.

Тип сайта	Срок	От чего зависит
Сайт-визитка	от 5 дней	Количество блоков, интеграции, сложность проекта
Лендинг	от 7 дней	Количество блоков, интеграции, сложность проекта
Многостраничный сайт	от 10 дней	Количество страниц, дизайн, интеграции, сложность проекта
Корпоративный сайт	от 10 дней	Количество страниц, дизайн, интеграции, сложность проекта
Срочная разработка	от 2 дней	Тип и сложность проекта, количество страниц или блоков, интеграции и ваши требования

Что подготовить заказчику до старта

Чтобы первые шаги создания сайта прошли быстро, подготовьте заранее:

• Логотип (если его нет — поможем создать).
• Тексты или тезисы (если их нет — поможем написать).
• Фото (если их нет — поможем подобрать).
• Примеры сайтов, которые нравятся.
• Доступы к домену и хостингу, если они уже есть.
• Контакты: телефоны, мессенджеры, почта.

Где проект теряет время: 5 частых ошибок

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

1. Сразу к дизайну — без задачи. Без брифа и анализа дизайн рисуется «на вкус», а потом его переделывают под задачу, которую стоило обсудить в начале.
2. Тексты «потом». Блоки делаются под условный текст, а когда приходит настоящий, он не помещается или не совпадает по смыслу — и верстку правят второй раз.
3. Правки по одному пункту в день. Каждая правка — отдельный круг согласования. Собирайте замечания списком по этапу и отправляйте разом.
4. Согласование через пятерых. Когда у каждого свое мнение, а последнего слова нет ни у кого, этап может стоять неделями. Назначьте одного человека, который принимает решения.
5. Не проверили формы перед запуском. Сайт запущен, реклама идет, а заявки не приходят: форма отправляет письма не туда или вовсе не работает. Именно для этого нужен этап 8.

Итог

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