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

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

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

Из каких этапов состоит разработка сайта

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

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

В наших проектах порядок внутри этих этапов такой: исследование → структура → тексты → прототип → дизайн → вёрстка → обвязка → запуск. Тексты мы пишем до прототипа, поэтому на схеме страниц сразу стоят настоящие заголовки, а не заглушки.

Дальше — каждый этап по отдельности, начиная со старта.

Старт разработки сайта: цели, бриф и техническое задание

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

Цель меняет весь сайт. Допустим, оборудование промышленной компании покупают после совещания у клиента. Тогда полезное действие — скачанный каталог в PDF: его распечатают и обсудят. Кнопка «Скачать каталог» встаёт на видное место, а форма заявки — рядом, для тех, кто готов звонить сразу.

На старте три документа:

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

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

Что нужно для создания сайта — список того, что стоит собрать до старта:

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

Чем полнее список к старту, тем меньше пауз дальше.

Этапы проектирования сайта: исследование, структура, прототип

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

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

Как исследование меняет страницу, видно на примере оптовой компании по полимерным трубам. Обычный заголовок раздела — «Каталог продукции». После разбора запросов на схеме страницы стоит другой: «Производим все виды полимерных труб диаметром от 16 до 1600 мм». Так ищет закупщик: он вводит в поиск вид трубы и диаметр, а не слово «каталог».

По итогам исследования составляют структуру — список страниц и связи между ними. Как её собирают, разобрано в статье Структура сайта.

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

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

Дизайн сайта: что согласует заказчик

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

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

Что смотреть на согласовании:

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

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

Подробно о том, как устроен макет и что в нём проверять, будет отдельная статья.

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

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

Наши сайты мы собираем статическими: на HTML и JavaScript, при необходимости на React. О выборе платформы будет отдельная статья.

Здесь же ставим обвязку — всё, что считает и ловит обращения. В ней шесть частей:

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

Интеграция с CRM, например с Битрикс24, и настройка рекламы входят в работу, если этого требует задача проекта. Сайт можно заказать и без них.

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

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

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

Тестирование проверяет, что сайт работает так, как задумано:

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

Ваша часть — отправить тестовую заявку самому и проверить, что менеджер её получил.

Запуск сайта и работа после запуска

Запуск — это подключение домена и открытие сайта для посетителей и поиска. Хостинг и домен мы оформляем на клиента и передаём ему доступы. Так сайт остаётся вашим, даже если вы смените подрядчика.

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

Что обычно делают в первые месяцы после запуска:

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

Чтобы сайт находили в поиске, после запуска нужно SEO-продвижение — это отдельная работа.

Сколько длится каждый этап и от чего зависят сроки

Длительность у каждого проекта своя, поэтому вместо цифр — что её задаёт на каждом этапе:

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

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

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

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

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

Вопросы и ответы

Какие этапы включает в себя разработка сайта?

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

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

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

Что нужно знать перед созданием сайта?

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

Заключение

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