Этапы разработки интернет-магазина: сроки и что согласует владелец

Этапы разработки интернет-магазина кратко: сроки и что согласует владелец

Этапы разработки интернет-магазина под ключ в Kliox такие: стратегия и анализ, UX-проектирование, UI-дизайн, разработка, интеграции, наполнение, тестирование и запуск. В таблице сведено, сколько длится каждый шаг, что вы получаете на выходе и что подписываете. Длительность указана по нашему опыту для проекта уровня «Комплексное решение»: индивидуальный дизайн, каталог от 100 товаров, CRM, email- и SMS-рассылки.

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

До старта: оценка и что владельцу подготовить заранее

На первой встрече мы выясняем бизнес-модель (розница, опт или оба направления), объем ассортимента, каналы продаж, учетную систему и рынки, на которые вы планируете выходить. Вы получаете предварительную оценку в виде диапазона и рекомендацию тарифа. Точную цену без выгрузки товаров назвать невозможно. Объем работ больше зависит от вариаций, фильтров и обмена с учетной системой, чем от количества страниц. Сто товаров с одним размером и сто товаров с десятью размерами и тремя цветами дают совершенно разный объем работы.

Чек-лист: что подготовить к первой встрече

• Выгрузка ассортимента в Excel, CSV или из 1С: названия, артикулы, характеристики, цены.
• 2–3 сайта, которые вам нравятся, и 1–2, которые нет, с объяснением почему.
• Доступ к тестовой базе 1С/BAS и контакт программиста 1С.
• ФЛП или ООО и текущий счет для эквайринга.
• Договор с Новой почтой или Укрпочтой.
• ПРРО (например, Checkbox) для фискализации онлайн-оплат.
• Домен и хостинг или решение, чтобы их подобрала студия.
• Логотип, брендбук, фото товаров или план фотосъемки.
• Условия доставки, оплаты, возврата и гарантии.

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

Что должно быть в договоре до начала работ

• Фиксированный объем работ с перечнем функций и бюджет.
• График с датами этапов и оплата по этапам.
• Количество раундов правок прототипа и дизайна.
• Срок реакции заказчика, например 2–3 рабочих дня на согласование. Если ответ задерживается, график сдвигается на это время.
• Порядок изменения объема: новая функция оформляется отдельным запросом со своей ценой и сроком.
• Гарантия на исправление ошибок и передача прав на код, дизайн и доступы.

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

Этап 1. Аналитика, стратегия и выбор платформы

Анализируем нишу и конкурентов, собираем семантику, чтобы дерево категорий соответствовало реальным поисковым запросам. Составляем перечень функций и делим его на «до запуска» и «потом». Рисуем карту интеграций: какие системы обмениваются данными и в какую сторону. Результат фиксируется в техническом задании. Функции определяет ниша. Покупателям ASIC-майнеров в KIEVMINER нужны были сравнение моделей и калькулятор окупаемости, который учитывает курс монеты и тариф на электроэнергию. В TradeAuto совместимость автоаксессуаров зависит от марки, модели и года выпуска авто, поэтому эту логику заложили в фильтры и поиск. DermActe на рынке ОАЭ без оплаты частями, Apple Pay и цен в AED терял бы покупателей уже в корзине.

Как выбирается платформа: сравнительная таблица

Ориентиры из нашего опыта. Окончательный выбор зависит от каталога, интеграций и планов на 2–3 года.

Кастомная архитектура оправдана, когда в каталоге десятки тысяч позиций, реклама дает резкие пики или несколько рынков работают на одной системе. У Sayvi Studio украинское и испанское направления имеют отдельные домены, а каталог, заказы и бизнес-логику обслуживает одна серверная система. Если магазин уже работает, этап начинается с аудита: Petronas Shop мы последовательно улучшали на действующем OpenCart, а не создавали новую платформу. Вы согласуете: дерево категорий, список функций до запуска и «на потом», перечень интеграций, платформу и график. Длительность 1–2 недели.

Этап 2. UX-проектирование: прототипы каталога, карточки и оформления заказа

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

Почему мобильный прототип согласуют первым

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

Как проверить прототип, если вы не дизайнер

Пройдите прототип как покупатель: найдите товар по названию, подберите товар по параметрам, купите с телефона. Посчитайте шаги до оплаты и запишите места, где пришлось остановиться и подумать. Не оценивайте прототип по эстетике. Цвета появятся на следующем этапе, а фильтры, не заложенные сейчас, придется встраивать в готовый дизайн. Вы согласуете кликабельный прототип ключевых страниц в мобильной и десктопной версиях. Длительность 1–2 недели, количество раундов правок определено договором.

Этап 3. UI-дизайн и спецификация дизайна сайта

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

Спецификация дизайна: состояния, которые забывают нарисовать

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

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

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

Согласовывайте пакет, а не отдельные красивые экраны: главная, каталог, карточка, корзина и оформление в обеих версиях, UI-кит и перечень состояний. Открывайте макеты с телефона, а не только на большом мониторе. После согласования изменения дизайна оформляются как изменение объема с отдельным сроком: одна «небольшая» правка карточки после начала верстки тянет за собой переделку фронтенда, состояний и тестов. Длительность этапа 2–3 недели.

Этап 4. Разработка: верстка, логика магазина и админпанель

Фронтенд (то, что видит покупатель) и бэкенд (каталог, цены, заказы, админпанель) разрабатываются параллельно на тестовом сервере, закрытом от индексации. Каждые 1–2 недели мы показываем готовые функции в рабочем виде. Вы сами кликаете фильтры и проходите оформление заказа, а не читаете отчет о процентах готовности. На этом этапе реализуются:

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

Админпанель: что проверить до запуска

Ваша команда должна без программиста добавлять товары, менять цены и остатки, обрабатывать заказы и менять баннеры. В GOU управление товарами, размерами, складом и заказами перенесли в кастомную админпанель на Laravel, а витрину для покупателей сделали на Next.js. Попросите контент-менеджера на демо самостоятельно добавить товар с вариациями и изменить цену. Если это занимает больше нескольких минут или требует длинной инструкции, админку стоит упростить до запуска. Вы согласуете промежуточные демо и перечень функций, готовых к тестированию. Длительность 3–8 недель в зависимости от объема.

Этап 5. Интеграции: 1С, CRM, оплата, доставка и фискализация

Набор зависит от модели бизнеса. GOU принимает оплату через Monobank и формирует чеки в Checkbox. Petronas Shop связан с 1С, платежной системой и Новой почтой. DermActe для ОАЭ получил Tabby, Apple Pay, Google Pay и оплату при получении. Самая рискованная часть: обмен с 1С. Он зависит от конфигурации и от программиста на вашей стороне, а тестировать его нужно в обе стороны. В TradeAuto товары и остатки поступают из 1С на сайт, а заказы возвращаются в учет. В BabyKroha до интеграции менеджеры правили цены и остатки вручную и ошибались, теперь данные синхронизируются без ручного вмешательства.

Что чаще всего задерживает интеграции

• договор эквайринга не подписан, банк еще проверяет сайт;
• нет тестовой базы 1С, а работать с рабочей рискованно;
• программист 1С загружен и отвечает раз в неделю;
• служба доставки еще не выдала API-ключ;
• одна характеристика в учете и на сайте называется по-разному.

Поэтому интеграции мы запускаем параллельно с дизайном: пока рисуются макеты, вы оформляете договоры, а мы согласовываем формат обмена с программистом 1С. От вас понадобятся тестовая база 1С и список полей для обмена, доступ администратора CRM, API-ключ службы доставки, ключи мерчанта от банка и данные кассы Checkbox. Вы согласуете схему обмена: какие поля передаются, как часто и какая система главная для цен и остатков. Длительность 1–4 недели параллельно с разработкой.

Этап 6. Наполнение каталога и перенос данных

Наполнение начинается параллельно с разработкой, иначе готовый магазин неделями стоит пустым, а реклама ждет. Студия делает импорт товаров, шаблоны описаний и мета-тегов, структуру характеристик для фильтров. От вас нужны фото, цены, особенности товаров и юридические страницы: оферта, условия доставки и возврата, политика конфиденциальности. Перед импортом данные чистят. Типичные проблемы: дубли артикулов, одна характеристика под разными названиями («черный», «Black», «черн.»), товары без фото. Черновики описаний и мета-теги для тысяч карточек можно сгенерировать AI-инструментами по характеристикам, а редактор проверяет и правит результат. Так работа занимает дни вместо недель.

Перенос со старого сайта без потери SEO

Если магазин переезжает, мы составляем карту старых и новых URL, настраиваем 301-редиректы, переносим метаданные, отзывы и историю товаров. Пошагово процесс расписан в статье о миграции интернет-магазина без потери SEO и заказов. Вы согласуете шаблон карточки на 5–10 реальных товарах до массового импорта: ошибку проще исправить на десяти товарах, чем на пяти тысячах. Длительность 1–2 недели.

Этап 7. Тестирование и приемка: чек-лист перед запуском

Команда проверяет функции по сценариям, отображение в Chrome, Safari, Firefox и на реальных смартфонах, скорость в PageSpeed, защиту форм от спама. Нагрузочный тест обязателен, если планируете рекламу в Instagram или TikTok. GOU на предыдущей платформе терял стабильность именно тогда, когда Reels и Stories одновременно приводили много покупателей.

Чек-лист приемки для владельца

1. Контрольная покупка каждым способом оплаты.
2. Возврат средств по тестовому заказу.
3. Фискальный чек сформирован и отправлен покупателю.
4. Заказ появился в 1С или CRM с правильным составом и суммой.
5. Остаток товара обновился на сайте после продажи.
6. Доставка рассчитывается, отделения выбираются для разных городов.
7. Покупатель получает письма и SMS о заказе.
8. Промокод применяется и не суммируется там, где не должен.
9. Покупка с телефона через мобильный интернет, а не офисный Wi-Fi.
10. Контент-менеджер добавляет товар через админку без посторонней помощи.

Что блокирует запуск, а что можно исправить после

Запуск блокируют неработающие оплата или оформление, заказы, которые не доходят до учетной системы, неправильные цены и критические ошибки на мобильном. Косметические мелочи, второстепенные страницы и отображение в редких браузерах можно доделать после. Приемка фиксируется актом, ошибки после подписания исправляются в рамках гарантии. Длительность этапа 1–2 недели.

Этап 8. Запуск и первые недели после него

План дня запуска

1. Перенос кода и базы на рабочий сервер, установка SSL.
2. Открытие индексации, проверка robots.txt и sitemap.
3. Проверка 301-редиректов, если был старый сайт.
4. Подключение Google Search Console.
5. GA4 с событиями e-commerce: просмотр товара, добавление в корзину, начало оформления, покупка.
6. Контрольный заказ на живом сайте с реальной оплатой.

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

Поддержка и развитие после запуска

Каждый проект Kliox включает исправление ошибок после запуска и 10 часов бесплатной поддержки, а в тарифе «Индивидуальное решение» добавляются 3 месяца VIP-поддержки. Дальше магазин развивается: функции из списка «потом», новые интеграции, улучшения по данным аналитики. Копійку и BabyKroha мы ведем на поддержке: следим за стабильностью, обновляем компоненты, устраняем сбои.

Сколько времени разрабатывается интернет-магазин: расчет по типу проекта

Сроки по тарифам Kliox

Сроки ориентировочные, по нашему опыту. Точный график фиксируется в договоре после анализа ваших данных.

Пример графика комплексного проекта по неделям

Прототипы стартуют, как только согласована структура каталога, а интеграции идут вместе с разработкой. Благодаря этому в 10 недель укладываются работы, которые при последовательном выполнении заняли бы 14–16.

Что увеличивает и что сокращает срок

Увеличивают срок:

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

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

Если магазин уже есть: как меняются этапы при редизайне или переделке

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

• Доработать действующую платформу, если основа стабильна, а проблема в UX, функциях или дизайне. Так было с Petronas Shop на OpenCart.
• Перестроить на новой основе, если ключевые функции не работают. В TradeAuto предыдущая команда работала около года, но часть функций осталась незавершенной. Клиенту уже нужно было запускать рекламу, поэтому каталог, заказы и админку собрали на Laravel, а не продолжали ставить заплатки.
• Сделать новый магазин вместо медленного, если платформа устарела. В BabyKroha страницы открывались с задержкой, особенно на смартфонах, и часть покупателей уходила, не увидев товара.

Признаки, что латать уже невыгодно: сайт падает под рекламой; мобильная скорость не растет после оптимизаций; каждое изменение ломает что-то в другом месте; менеджеры вручную дублируют данные, потому что обмена с 1С нет. К этапам добавляются технический и SEO-аудит, фиксация текущих позиций, трафика и конверсии для сравнения, карта 301-редиректов, перенос клиентов и заказов, запуск без остановки продаж. При таком переходе мы сохраняем важные адреса страниц неизменными, чтобы не потерять позиции, а скорость сравниваем с показателями, зафиксированными до старта.

Типичные ошибки владельца, из-за которых проект затягивается

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

Частые вопросы

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

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

Сколько раундов правок дизайна входит в проект и что будет, если их не хватит?

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

Можно ли запустить интернет-магазин поэтапно, с минимальным набором функций?

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

Кому принадлежат код, доступы и дизайн после запуска?

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