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

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

Бриф и исследование

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

Структура и прототип

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

Тексты

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

Дизайн

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

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

Разработка и наполнение

Готовый дизайн превращают в работающий сайт: вёрстка, подключение системы управления, нужная функциональность. Платформу выбираем под задачу: Tilda, WordPress или собственная frontend-разработка. Технология не цель, а средство. Например, MODLR мы делали на WordPress, чтобы клиент сам мог обновлять фотографии моделей и тексты, а Scandi02 оставили на Tilda, потому что клиенту важно управлять сайтом самостоятельно.

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

Тестирование и запуск

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

После запуска

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

Что нужно от вас на каждом этапе

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

Что чаще всего тормозит проект

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

Лучшее лекарство — договориться об этапах и сроках ответов с самого начала.

Что проверить перед запуском

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

Сколько это занимает

Наш ориентир — от четырёх недель на разработку сайта. Лендинг стоит от 40 000 ₽, многостраничный сайт — от 90 000 ₽. Итог зависит от объёма, сложности и того, как быстро идут согласования: крупные этапы мы утверждаем с вами по ходу работы, и от скорости ответов сильно зависит срок. Крупные задачи могут занимать несколько месяцев.

Почему порядок важен

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

Если только выбираете формат, сначала прочитайте, чем лендинг отличается от корпоративного сайта. Как мы делаем сайты на Tilda — на странице Tilda, а общий подход к проектам — на странице сайтов. Реальные результаты — в кейсах Scandi02 и визит-центра «Тура-хан».