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

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

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

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

Бриф и первая встреча

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

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

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

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

Аналитика и техническое задание

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

Что обычно входит в аналитику:

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

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

Прототипирование

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

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

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

Дизайн

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

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

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

Оценивайте дизайн не по принципу «нравится или не нравится», а по тому, помогает ли он решать задачи из технического задания. Личный вкус — плохой аргумент в споре о том, какой оттенок синего выбрать.

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

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

Что происходит на этом этапе:

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

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

Из нашего опыта: на одном проекте клиент на промежуточном показе заметил, что фильтр каталога сортирует размеры как текст — «10» шло раньше «2». Мелочь, которую исправили за полчаса. Если бы её нашли после запуска, пришлось бы разбираться с жалобами покупателей.

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

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

Тестирование — отдельный этап, а не «посмотрим одним глазом перед запуском». Мы проверяем:

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

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

Запуск и первые недели жизни сайта

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

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

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

Чем всё это оборачивается для заказчика

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

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