Что входит в процесс создания сайта

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

Этапы разработки сайта: общая схема

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

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

Этап 1. Бриф, аналитика и прототип

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

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

Что на этом этапе делает заказчик:

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

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

Этап 2. Дизайн

На базе утверждённого прототипа отрисовывается визуальный стиль: цвета, шрифты, иллюстрации, внешний вид каждого блока. Мы работаем в Figma — это онлайн-редактор, в котором заказчик видит макеты по ссылке и оставляет комментарии прямо на них. Макет согласуется до единой строчки, и только после этого начинается программирование. У нас этап занимает 4–7 дней.

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

Что делает заказчик:

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

Этап 3. Вёрстка, программирование и запуск

На этапе программирования утверждённые макеты превращаются в чистый код. Мы используем современный стек технологий — Laravel и Vue.js — и делаем адаптивную вёрстку со скоростью загрузки страниц до 2 секунд. Настраиваются формы обратной связи, интеграции с CRM или 1С, админка. На это уходит 5–10 дней.

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

Наполнение

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

Тестирование

Перед запуском проверяют то, от чего зависят заявки и впечатление посетителя:

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

Запуск

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

Этап 4. Поддержка и правки

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

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

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

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

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

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

Что подготовить до начала работ

• Цель сайта одной фразой: заявки, продажи, презентация компании.
• Список услуг или товаров с описаниями и ценами.
• Логотип и фирменный стиль в исходных файлах.
• Фотографии: команда, объекты, продукция, документы.
• Примеры сайтов, которые нравятся и не нравятся.
• Доступы к домену, хостингу и старому сайту, если он есть.
• Реквизиты и контакты, которые должны быть на сайте.
• Сотрудник, который отвечает за проект и принимает решения.

Частые ошибки на разных этапах

• Пропускать прототип. Споры о структуре переносятся в дизайн и вёрстку, где каждая перестановка стоит дороже.
• Утверждать дизайн на тексте-заглушке. Настоящие тексты оказываются вдвое длиннее, и макет перестаёт работать.
• Оценивать только версию для компьютера. Посетители увидят сайт с телефона.
• Возвращаться к утверждённым этапам. Каждое «давайте всё-таки переделаем» сдвигает срок и бюджет.
• Согласовывать коллективно. Без одного ответственного правки противоречат друг другу.
• Запускаться без проверки форм. Реклама идёт, а заявки не доходят.
• Не забрать доступы. Домен, хостинг, админка и счётчики должны остаться у владельца бизнеса.

Коротко

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

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