Создание сайта интернет-магазина в Serenity включает исследование аудитории, UX-проектирование, подготовку контента, дизайн, разработку, базовую SEO-оптимизацию, тестирование и запуск.
Мы продумываем путь клиента от первого слова до каждой кнопки. Разрабатываем дизайн, удобный и приятный в использовании. Реализуем механизмы маркетплейсов, чтобы совершать покупки было легко и понятно.
Облегчаем путь клиента.
Влюбляем в бренд через дизайн.
Привлекаем аудиторию на сайт.
До начала проектирования изучаем ассортимент, способы продажи и внутренние процессы компании. На этой основе определяем структуру каталога, набор фильтров, содержание карточек товаров и порядок оформления заказа.
Проектируем каталог, карточки товаров, корзину и оформление заказа с учётом ассортимента и сценариев покупки. Отдельно определяем требования к личному кабинету, оплате, доставке, возвратам и повторным заказам.
На этапе проектирования собираем поисковые запросы и определяем, какие категории, фильтры и посадочные страницы понадобятся сайту. Готовим требования к текстам и карточкам товаров, а перед запуском подключаем системы аналитики.
Разрабатываем интерфейс в фирменном стиле компании. Покупатель должен быстро найти товар, сравнить варианты, проверить условия доставки и оформить заказ без лишних действий.
Проектируем каталог, карточки товаров, корзину и оформление заказа с учётом ассортимента и сценариев покупки. Отдельно определяем требования к личному кабинету, оплате, доставке, возвратам и повторным заказам.
Разрабатываем интерфейс в фирменном стиле компании. Покупатель должен быстро найти товар, сравнить варианты, проверить условия доставки и оформить заказ без лишних действий.
На этапе проектирования собираем поисковые запросы и определяем, какие категории, фильтры и посадочные страницы понадобятся сайту. Готовим требования к текстам и карточкам товаров, а перед запуском подключаем системы аналитики.
Разработка у Serenity — последовательные этапы от брифа до релиза. На проектировании формируем структуру каталога, фильтров и карточки товара, описываем сценарии покупки. На дизайне прорабатываем главную, каталог, корзину и страницы оплаты. В разработке верстаем макеты и собираем функционал магазина. Тестирование проверяет оформление заказа и работу оплаты. Запуск включает перенос на сервер, настройку домена и аналитики.
Используем итерационный подход. Все процессы ведем прозрачно и делаем их доступными для вас. Мы работаем в команде, прислушиваемся к вашим желаниям на каждом этапе, вносим правки, обсуждаем и улучшаем. Позиция Serenity — партнерство с клиентами. Работа ведется сообща, поэтому на финальной сдаче нет множества правок.
Разработка интернет-магазина начинается с брифинга, который команда Serenity проводит с клиентом. Мы знакомимся с вами, проясняем задачу проекта и собираем как можно больше данных, чтобы создать детальный план сайта. Проводим несколько интервью, узнаем целевую аудиторию, разрабатываем ее портрет, обговариваем структуру сайта, количество страниц, их составляющие по блокам, анализируем необходимость добавления страниц третьего уровня.
Собираем поисковые запросы и на их основе проектируем каталог, категории, фильтры и информационные страницы. Готовим метатеги, заголовки и требования к текстам, устраняем дубли страниц. После запуска структура сайта позволяет добавлять новые категории и посадочные страницы без переработки каталога.
Определяем, будет ли это создание крупного интернет-магазина или понадобится небольшой сайт с несколькими фильтрами, но с возможностью дальнейшего увеличения позиций. После чего создаем контентные прототипы всех страниц, раскрывающие пользу для покупателей вашего продукта или услуги.
Затем оформляем готовые тексты в прототипы в Figma. Прототипы — это макеты страниц, где уже есть блоки, конверсионные части, чистовой контент, но еще нет дизайна. На этом этапе мы реализуем все идеи, проработанные на предыдущих этапах, в готовые страницы.
При разработке интернет-магазина под ключ придумываем каждому товару уникальное описание. Подробно прорабатываем контент в каталоге, фильтрах. На главной странице описываем преимущества вашей компании, рассказываем про акции и спецпредложения, делаем страницу доставки и контакты.
Описываем функционал по готовым прототипам, прописываем все возможные интеграции с сервисами и системами, технический стек. Корректируем работу дизайнеров, подбираем лучшую платформу для вашего сайта. Объясняем технические особенности каждой CMS, рассказываем о сложностях, с которыми вы можете столкнуться.
Разработка интернет-магазина начинается с брифинга, который команда Serenity проводит с клиентом. Мы знакомимся с вами, проясняем задачу проекта и собираем как можно больше данных, чтобы создать детальный план сайта. Проводим несколько интервью, узнаем целевую аудиторию, разрабатываем ее портрет, обговариваем структуру сайта, количество страниц, их составляющие по блокам, анализируем необходимость добавления страниц третьего уровня.
При разработке интернет-магазина под ключ придумываем каждому товару уникальное описание. Подробно прорабатываем контент в каталоге, фильтрах. На главной странице описываем преимущества вашей компании, рассказываем про акции и спецпредложения, делаем страницу доставки и контакты.
Затем оформляем готовые тексты в прототипы в Figma. Прототипы — это макеты страниц, где уже есть блоки, конверсионные части, чистовой контент, но еще нет дизайна. На этом этапе мы реализуем все идеи, проработанные на предыдущих этапах, в готовые страницы.
Собираем поисковые запросы и на их основе проектируем каталог, категории, фильтры и информационные страницы. Готовим метатеги, заголовки и требования к текстам, устраняем дубли страниц. После запуска структура сайта позволяет добавлять новые категории и посадочные страницы без переработки каталога.
Определяем, будет ли это создание крупного интернет-магазина или понадобится небольшой сайт с несколькими фильтрами, но с возможностью дальнейшего увеличения позиций. После чего создаем контентные прототипы всех страниц, раскрывающие пользу для покупателей вашего продукта или услуги.
Описываем функционал по готовым прототипам, прописываем все возможные интеграции с сервисами и системами, технический стек. Корректируем работу дизайнеров, подбираем лучшую платформу для вашего сайта. Объясняем технические особенности каждой CMS, рассказываем о сложностях, с которыми вы можете столкнуться.
Выбираем верную структуру с удобным разведением по разделам и вложенности каждого родительского раздела. Структура определяется направленностью вашей компании и ее позиционированием.
В карточке показываем и рассказываем о товаре ровно столько, сколько нужно. Проектирование карточки товара может быть реализовано по-разному, и в каждом случае решение зависит от ниши товарной матрицы. Карточка может быть как супермаленькой и заточенной на фото, так и супербольшой и заточенной на различные характеристики.
Структура включает в себя каталог. А каталог в свою очередь состоит из таких элементов управления, как фильтры. Это может быть общий фильтр или же фильтр, персонализированный под отдельную категорию. Выбор, какие фильтры и как будут установлены на сайте, должен исходить из того, как лучше распродаются товары среди вашей целевой аудитории.
Покупатели, которые приходят на сайт, хотят как можно проще и быстрее по нему передвигаться. Поэтому цепочка действий, которую они осуществляют при просмотре и покупке товаров, должна быть максимально удобной и короткой.
Задача превью карточки — завлечь покупателя так, чтобы он захотел посмотреть подробности о товаре. Мы продумываем, что вывести в превью: показывать ли размеры и цвета, делать ли карусель из фото или, наоборот, оставить одну фотокарточку, чтобы покупатель заинтересовался и кликнул на сам товар.
Многие интернет-магазины не хотят управлять матрицей одновременно и в офлайн-магазинах. Это непросто, так как приходится следить за тем, чтобы зарезервированный в онлайн-магазине товар оставался на складе. Для этого необходима интеграция с каталогом продукции и в онлайн-, и в офлайн-магазинах. Также разрабатываем систему, в которой настроена интеграция с базой товаров, чтобы вы понимали, кто произвел заказ, а кто отменил покупку.
Выбираем верную структуру с удобным разведением по разделам и вложенности каждого родительского раздела. Структура определяется направленностью вашей компании и ее позиционированием.
Задача превью карточки — завлечь покупателя так, чтобы он захотел посмотреть подробности о товаре. Мы продумываем, что вывести в превью: показывать ли размеры и цвета, делать ли карусель из фото или, наоборот, оставить одну фотокарточку, чтобы покупатель заинтересовался и кликнул на сам товар.
Покупатели, которые приходят на сайт, хотят как можно проще и быстрее по нему передвигаться. Поэтому цепочка действий, которую они осуществляют при просмотре и покупке товаров, должна быть максимально удобной и короткой.
В карточке показываем и рассказываем о товаре ровно столько, сколько нужно. Проектирование карточки товара может быть реализовано по-разному, и в каждом случае решение зависит от ниши товарной матрицы. Карточка может быть как супермаленькой и заточенной на фото, так и супербольшой и заточенной на различные характеристики.
Структура включает в себя каталог. А каталог в свою очередь состоит из таких элементов управления, как фильтры. Это может быть общий фильтр или же фильтр, персонализированный под отдельную категорию. Выбор, какие фильтры и как будут установлены на сайте, должен исходить из того, как лучше распродаются товары среди вашей целевой аудитории.
Многие интернет-магазины не хотят управлять матрицей одновременно и в офлайн-магазинах. Это непросто, так как приходится следить за тем, чтобы зарезервированный в онлайн-магазине товар оставался на складе. Для этого необходима интеграция с каталогом продукции и в онлайн-, и в офлайн-магазинах. Также разрабатываем систему, в которой настроена интеграция с базой товаров, чтобы вы понимали, кто произвел заказ, а кто отменил покупку.
Разрабатываем интерфейс на основе фирменного стиля и задач каталога. Определяем, как представить ассортимент, характеристики, цены, варианты товара и условия доставки. Отдельно проектируем мобильную версию.
Дизайнер разрабатывает концепцию и собирает мудборд — визуальные решения: примеры верстки и сетки, цветовой гаммы для отдельных блоков и всего сайта. На этом этапе необходимо понять, что из предоставленного материала отвечает вашим предпочтениям и соответствует фирменному стилю компании, какой визуал будет одним целым с брендингом.
Для всех элементов на сайте подбираем анимации, шрифты, визуал, демонстрируем товар. Делаем удобный каталог с фильтрами, быстрое добавление в корзину и простое оформление заказа. Путь покупателя всегда будет четким и приведет к логическому завершению. Не забываем про личный кабинет и доставку. Важно, чтобы вашим интернет-магазином было удобно пользоваться.
Для удобства также создаем адаптивы, чтобы интернет-магазин смотрелся на всех форматах — от мобильного устройства до десктопной версии. Визуально адаптируем мобильную версию под формат приложения.
Дизайнер разрабатывает концепцию и собирает мудборд — визуальные решения: примеры верстки и сетки, цветовой гаммы для отдельных блоков и всего сайта. На этом этапе необходимо понять, что из предоставленного материала отвечает вашим предпочтениям и соответствует фирменному стилю компании, какой визуал будет одним целым с брендингом.
Для удобства также создаем адаптивы, чтобы интернет-магазин смотрелся на всех форматах — от мобильного устройства до десктопной версии. Визуально адаптируем мобильную версию под формат приложения.
Для всех элементов на сайте подбираем анимации, шрифты, визуал, демонстрируем товар. Делаем удобный каталог с фильтрами, быстрое добавление в корзину и простое оформление заказа. Путь покупателя всегда будет четким и приведет к логическому завершению. Не забываем про личный кабинет и доставку. Важно, чтобы вашим интернет-магазином было удобно пользоваться.
Переносим утверждённые макеты в рабочий интернет-магазин: выполняем адаптивную вёрстку, программируем каталог и личный кабинет, подключаем CMS, оплату, доставку, аналитику и внешние системы.
В соответствии с техническим заданием верстаем страницы сайта по макетам в Figma. Адаптируем их под любое устройство.
Параллельно создаем калькуляторы и личный кабинет, настраиваем фильтры, устанавливаем возможность определять геопозицию. Тестируем полученный результат, проверяем его на соответствие техническому заданию. Передача проекта на проверку производится на нашей тестовой среде с полной работоспособностью сайта по ТЗ.
Проводим детальную проверку верстки на соответствие макетам. Соблюдаем концепцию Pixel Perfect.
После проверки и принятия переносим проект на конечный хостинг/сервер клиента. Выполняем все необходимые настройки для полноценной работы сайта: доменное имя, почтовый сервер, расписание создания резервных копий.
В соответствии с техническим заданием верстаем страницы сайта по макетам в Figma. Адаптируем их под любое устройство.
Параллельно создаем калькуляторы и личный кабинет, настраиваем фильтры, устанавливаем возможность определять геопозицию. Тестируем полученный результат, проверяем его на соответствие техническому заданию. Передача проекта на проверку производится на нашей тестовой среде с полной работоспособностью сайта по ТЗ.
Проводим детальную проверку верстки на соответствие макетам. Соблюдаем концепцию Pixel Perfect.
После проверки и принятия переносим проект на конечный хостинг/сервер клиента. Выполняем все необходимые настройки для полноценной работы сайта: доменное имя, почтовый сервер, расписание создания резервных копий.
Настраиваем двухсторонний обмен с 1С и другими учётными системами. Подгружаем остатки, цены, новые позиции каталога, отправляем заказы обратно в учёт. Работаем с конфигурациями «Управление торговлей», «Розница», «УНФ», а также с МойСклад. Обмен запускаем по расписанию или в реальном времени — через стандартные модули CMS или собственные адаптеры под задачу.
Передаём заявки и заказы в amoCRM, Битрикс24 или другую систему клиента. Заказ из магазина сразу попадает в воронку: менеджер видит контакты, состав корзины, сумму и историю покупателя. Подключаем телефонию, чаты, email-уведомления внутри CRM. Заявки не теряются между почтой, Excel и мессенджерами.
Подключаем онлайн-оплату через ЮKassa, СберPay, Тинькофф, Альфа-Банк, ЮMoney. Настраиваем приём карт, СБП, Apple/Google Pay, рассрочку и кредит от банков-партнёров: Сплит, Долями. Со стороны магазина закрываем фискализацию и чеки по 54-ФЗ, возвраты и частичные оплаты.
Интегрируем СДЭК, Boxberry, Почту России, Яндекс Доставку, самовывоз и собственную курьерскую службу. Калькулятор считает стоимость и сроки прямо в корзине — по адресу покупателя. Заказы автоматически уходят в личный кабинет службы доставки.
Ваш новый сайт будет не только красивым, но будет решать все ваши бизнес-, маркетиновые и коммуникационные задачи в комплексе.
| Состав работ |
|---|
| Объём каталога |
| Страницы |
| Дизайн |
| Фильтры в каталоге |
| Карточка товара |
| Корзина и оформление |
| Личный кабинет |
| CMS |
| Интеграции |
| Адаптив |
| SEO-подготовка |
| Стоимость |
| Срок |
| Базовый | Оптимальный | Премиум |
|---|---|---|
| до 500 товаров | до 5 000 товаров | без ограничений |
| до 10 уникальных | до 25 уникальных | индивидуально |
| по согласованной концепции | уникальный: главная, каталог, карточка | полностью индивидуальный, с анимациями |
| базовые | расширенные, по характеристикам | персонализированные под категорию |
| стандартный шаблон | галерея, отзывы, рекомендации | индивидуальные шаблоны под категории |
| в один шаг | в несколько шагов, с расчётом доставки | с авторизацией, бонусами, промокодами |
| базовый | история заказов, избранное | программа лояльности, бонусный счёт |
| Wordpress / Tilda Store | 1С-Битрикс / WP Woocommerce | 1С-Битрикс / самописная на Laravel |
| 1 на выбор | до 3 (1С, CRM, оплата, доставка) | без ограничений |
| мобильная версия | мобильная + планшет | проработка под каждое устройство |
| базовая (мета, ЧПУ, sitemap) | семантическое ядро, разметка Schema | глубокая, с ТЗ для копирайтеров |
| от 600 000 ₽ | от 1 200 000 ₽ | от 2 500 000 ₽ |
| 1,5–2 месяца | 3–4 месяца | 5–7 месяцев |
Разработка интернет-магазина от нашего агентства — это слаженная работа проектировщика, маркетолога, SEO-оптимизатора, контент-маркетолога, дизайнера, фронтенд- и бэкенд-разработчиков, проджект-менеджера, руководителя направления и других специалистов.
Представляет интересы клиента в проекте. Проводит исследования, направляет работу специалистов.
Управляет командой и ставит контрольные точки специалистам. Пишет ТЗ для разработчиков.
Создает прототип интернет-магазина. Продумывает структуру сайта и каждой веб-страницы.
Собирает информацию о компании, о ее продуктах и услугах. На основе нее составляет контент.
Курирует и направляет команду. Участвует в разработке ключевых идей интернет-магазина. Помогает специалистам и маркетологам.
Работает над визуальной составляющей. Превращает прототип в макет с расставленными акцентами.
Создает семантическое ядро сайта. Дает рекомендации команде, чтобы готовый сайт был SEO-оптимизирован.
Переводит макеты в код. Заботится о качественном отображении сайта в разных браузерах и на экранах разных устройств.
Интегрирует сайт с системой управления и сторонними сервисами: например, CRM и системами онлайн-оплаты.
Делимся стратегиями. Рассказываем о маркетинговых инструментах. Раскрываем секреты внутренней кухни.
11 место в России по разработке сайтов в ювелирной отрасли
Топ-30 разработчиков интернет-магазинов в Санкт-Петербурге
4 место в России по SEO-аудиту сайтов
4 место в СПб по комплексному продвижению в интернете
13 место в Санкт-Петербурге по разработке корпоративных цифровых решений
