Wiki · Веб-разработка

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

5 мин чтенияАвтор: Арина ДудинаСоавторы: Евгений Баев

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

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

Семь этапов: что делают и что получает заказчик

Этап	Что делают	Что получает заказчик
Анализ	Бриф, разбор конкурентов, аналитика старого сайта, спрос	Понимание задачи и структуры
Техзадание	Описывают разделы, функции, интеграции, роли	Документ, по которому принимают работу
Прототип	Чёрно-белые схемы страниц без дизайна	Согласованное расположение блоков
Дизайн	Макеты главной, внутренних страниц и мобильной версии	Утверждённый внешний вид
Разработка	Вёрстка, программирование, подключение CMS	Рабочий сайт на тестовом домене
Наполнение	Тексты, фото, цены, карточки услуг и сотрудников	Сайт с реальным контентом
Тестирование и запуск	Проверка форм и вёрстки, перенос на домен, счётчики	Открытый для посетителей сайт

Пять этапов разработки сайта: анализ и техзадание, прототип, дизайн, разработка и наполнение, тестирование и запуск — Этапы разработки сайта

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

Индивидуальный сайт и запуск на шаблоне

Состав этапов зависит от подхода. Индивидуальный сайт проходит всю цепочку: от прототипа каждой страницы до программирования нестандартной логики. Запуск на готовом решении короче. Например, решения Аспро для 1С-Битрикс продаются в Маркетплейсе Битрикса, и в них уже есть каркас, вёрстка, мобильная версия и типовые разделы. Вместо дизайна с нуля решение настраивают под бренд, отключают лишнее и наполняют.

Сравнение этапов индивидуальной разработки сайта и запуска на готовом решении Aspro для 1С-Битрикс — Шаблон или индивидуальный сайт

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

Как шли этапы у клиники и портала персонала

У сети клиник «Три Сердца» старый сайт был на Tilda: неудобный, медленный и не отвечающий новому позиционированию клиники. Новый сайт сделали на 1С-Битрикс, а готовое решение под него выбирали не первым шагом.

Сначала изучили старый сайт через вебвизор, построили карту пути пользователя, провели UX-аудит конкурентов и SEO-проектирование. Только после этого остановились на шаблоне Aspro «Медицинский центр 2.0» и сделали собственный поиск по врачам и услугам.

Портал сложнее сайта. В проекте веб-портала для компании, которая поставляет персонал торговым сетям, этапы шли так: техзадание и карта путей пользователя, прототипы для каждой роли, три варианта визуала, разработка. От начала до тестирования ушло 2–3 месяца.

Шаблон экономит время на вёрстке, но не на мыслях. Анализ и структуру всё равно делают до того, как открыть админку.

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

Сроки часто сдвигаются из-за мелочей на стороне заказчика. До старта стоит собрать:

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

Чек-лист для заказчика перед разработкой сайта: доступы, логотип, цены, тексты, примеры сайтов, ответственный за согласование — Что подготовить заказчику до старта

Как принимать работу по этапам

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

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

Что сдвигает сроки запуска и отнимает трафик

Согласовывать сразу дизайн без прототипа. Обсуждение превращается в спор о цветах, а структура остаётся непродуманной.
Откладывать тексты на конец. Готовый сайт стоит пустым неделями, а дизайн приходится подгонять под реальный объём текста.
Добавлять функции по ходу работы без правки ТЗ. Каждая такая просьба сдвигает сроки, и через месяц уже никто не помнит, о чём договаривались.
Забыть про SEO при смене сайта. Если адреса страниц меняются, без редиректов можно потерять поисковый трафик. Подробнее в статье SEO-переезд сайта.

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

Сроки, цена, ТЗ и правки по ходу разработки

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

Зависит от основы и объёма контента. Быстрее всего собирается сайт на готовом решении, когда тексты и фото уже есть, а портал с несколькими ролями у нас дошёл до тестирования за 2–3 месяца. Индивидуальный сайт с нестандартной логикой обычно идёт дольше.

Во что обходится сайт, если пройти все этапы?

Цена складывается из числа разных типов страниц, основы (готовое решение или разработка с нуля), интеграций с 1С, CRM и оплатой и того, кто готовит контент. Точную сумму даёт смета по этапам после брифа, и сравнивать предложения студий удобнее построчно, а не по итоговой цифре.

Зачем прототип, если потом всё равно будет дизайн?

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

Что будет, если начать без технического задания?

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

Как проходит этап дизайна?

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

Кто пишет тексты и когда за них садиться?

Это решают до старта: тексты готовит заказчик, отдельный копирайтер или редакция агентства. Начинать стоит, как только согласована структура, а не после вёрстки, иначе собранный сайт простаивает пустым. Для медицинских сайтов мы пишем по интервью с врачами: для клиники «Три Сердца» редакция подготовила больше 500 страниц.

Как договориться о правках, чтобы этапы не затягивались?

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

Чем этапы разработки портала отличаются от обычного сайта?

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

Что сделать в первые недели после запуска?

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