Этапы разработки сайта: что происходит на каждом шаге и что вы получаете

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

Названия стадий у разных студий звучат по-разному: «аналитика», «проектирование», «UX», «вёрстка», «наполнение». Содержание сводится к одной цепочке: понять бизнес и клиента, спроектировать, написать, нарисовать, собрать, запустить, улучшить.

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

Этап 1. Структура: что покажем и в каком порядке

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

Что происходит:

1. 1
   Интервью на 1–1,5 часа

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

2. 2
   Подробная структура за два рабочих дня

   Документ на 3–6 страниц: блоки, их порядок, смысл каждого. Мы показываем его, вносим правки и показываем ещё раз.

3. 3
   Утверждение и расчёт

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

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

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

Этап 2. Аудит бизнеса и аналитика: почему платить должны вам

Это самый «невидимый» этап: в готовом сайте от него остаются формулировки, а не отдельные блоки. Но именно он отвечает на вопрос, чем вы лучше других для конкретного клиента.

Работа идёт в трёх направлениях.

• Бизнес. Одно–два больших интервью голосом или текстом, каждое от одного до четырёх часов. Задаём до 200 вопросов о бизнес-процессах: как клиент приходит, что покупает, на каком шаге возникают сомнения. Находим сильные стороны и превращаем их в предложение, которое попадает в запрос клиента.
• Конкуренты. Изучаем до 10 прямых и косвенных конкурентов по таблице: уникальное предложение, сильные стороны, слабости, качество дизайна, лидмагниты. Цель — понять, за счёт чего вы будете выглядеть иначе. Как это делать самостоятельно, описано в статье про анализ сайта конкурента.
• Клиенты. Собираем потребности, проблемы, запросы, возражения и вопросы. Источники зависят от задачи: интервью с владельцем, профильные ресурсы, форумы и сообщества, комментарии в соцсетях, агрегаторы отзывов.

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

Что нужно от вас: время на интервью, возможность поговорить с вашими менеджерами или клиентами, если они доступны. Ответы вроде «у нас всё хорошо» не помогают. Помогают конкретные истории: как вы решали задачу, что сказал клиент, почему вернулся.

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

Этап 3. Прототип: тексты, иллюстрации и порядок экранов

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

Что делается:

1. 1
   Пишем текст

   Он основан на аналитике предыдущего этапа и отвечает на внутренние вопросы посетителя. Мы не придумываем формулировки, а берём их из интервью и источников.

2. 2
   Делаем иллюстрации

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

3. 3
   Собираем прототип

   Первые 2–4 экрана самые важные: посетители редко читают тексты до конца, поэтому сначала идут самые целевые вопросы и возражения. Призыв к действию ставится после доверия: на первом экране сразу «купить» предлагать рано.

4. 4
   Презентуем

   Созваниваемся на 30 минут, показываем прототип по видео и объясняем, в каком блоке какое возражение отрабатывается и зачем здесь лидмагнит. Вносим правки.

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

Что нужно от вас: 30 минут на презентацию и правки по фактам. Главный вопрос на этом шаге: всё ли верно написано о вашем продукте. Вкусовые правки лучше оставить на этап дизайна.

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

Этап 4. Дизайн: настроение, отстройка и акценты

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

1. 1
   Визуальные примеры

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

2. 2
   Стилистика с отстройкой

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

3. 3
   Акценты

   Минимум элементов и анимаций, чтобы не было каши. Если нужно показать товар, картинка крупная. Если нужна заявка, кнопка большая и яркая.

4. 4
   Презентация макета

   30 минут по видео: объясняем, почему выбран этот цвет, шрифт или градиент. Вносим до двух итераций правок.

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

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

Этап 5. Технические настройки: мобильная версия, домен, формы

Здесь макет превращается в работающий сайт. На Тильде мы собираем его в блоках и настраиваем сервисы.

• Адаптация. Верстка под планшеты и телефоны. Иногда контент для мобильной версии сокращается, чтобы не приходилось бесконечно листать. Делается удобная навигация по странице.
• Технические настройки. Базовое SEO, домен и SSL-сертификат, приём данных из форм, фавикон, бейджики и описания страниц, чтобы ссылки в соцсетях выглядели аккуратно.
• Передача. Мы работаем на своём аккаунте и после готовности переносим сайт на ваш. Рассказываем, как им пользоваться, при необходимости записываем видеоинструкцию.

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

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

Этап 6. Доведение до результата: данные, правки и реклама

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

1. 1
   Анализ метрик

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

2. 2
   Правки по данным

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

3. 3
   Аудит рекламы

   Если трафик идёт из рекламы, маркетолог может проанализировать кампании и предложить исправления. Это отдельная услуга с отдельной оплатой.

4. 4
   Реклама

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

Что нужно от вас: доступ к статистике, обратная связь о качестве заявок («эти целевые, эти нет») и готовность тестировать. Без второго пункта оптимизировать приходится вслепую.

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

Кто участвует на каждом этапе работы над сайтом

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

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

Сколько времени занимают этапы разработки сайта

Общий срок зависит от размера проекта и глубины проработки. На сайте студии указаны такие ориентиры:

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

Что растягивает сроки:

• Поздние правки по смыслу. Если после дизайна выясняется, что предложение другое, нужно возвращаться к прототипу.
• Нет материалов. Фотографий, кейсов, отзывов, цифр. Их приходится искать, а это пауза.
• Много согласующих. Лучше назначить одного человека, который принимает решения.
• Согласование всего сразу. Структура, тексты и дизайн утверждаются поэтапно, иначе правки накапливаются.

Подробнее о ценах читайте на странице услуг и тарифов.

Какие этапы можно сократить, а какие нет

Бывает, что бюджет или срок ограничены. Вот что обычно допустимо урезать и чем это обернётся.

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

Этапы разработки сайта на Тильде: что меняется

Тильда — конструктор, поэтому на нём этапы 1–4 идут так же, как для любого сайта: смысл, структура, текст и макет от платформы не зависят. Отличается этап 5.

• Нет программирования. Макет собирается из блоков, поэтому на сборку уходит меньше времени, чем при заказной разработке, а изменения вносятся быстрее.
• Правки после запуска проще. Блоки можно переставить, текст заменить, форму убрать без привлечения программиста. Это важно для этапа 6, когда сайт меняется по данным.
• Передача на ваш аккаунт. Мы работаем на своём аккаунте, затем переносим сайт на ваш и показываем, как им управлять.
• Подключение сервисов. Формы, Метрика, домен, SSL и мессенджеры подключаются через настройки.

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

Этапы разработки лендинга и многостраничного сайта: в чём разница

Этапы разработки лендинга и многостраничного сайта по порядку те же. Различается объём работы на каждом.

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

Этапы разработки сайта с нуля: с чего начать

Если сайта ещё нет, этапы разработки сайта с нуля начинаются с ответов на вопросы о бизнесе. Конструктор и дизайн идут позже.

Перед первым разговором со студией или исполнителем подготовьте материал, который ускорит и удешевит этапы 1–2.

1. 1

   Опишите в трёх–пяти предложениях, что вы продаёте и кому.

2. 2

   Назовите двух–трёх конкурентов и то, чем вы на них не похожи.

3. 3

   Соберите пять–десять вопросов, которые клиенты задают чаще всего.

4. 4

   Найдите три–пять кейсов или отзывов с конкретными результатами.

5. 5

   Заполните бриф на сайт: там все эти вопросы собраны в одном документе.

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