Анимация главной страницы
Задача
Переделать сайт компании из каталога в интернет-магазин. Показать ассортимент продукции, сделать возможность заказа товаров онлайн и оплаты через платежный сервис Сбербанка.
Решение
Разработка современного интернет-магазина на MODX с компонентом Minishop
Предыдущий сайт также был разработан в нашей компании и тоже на системе управления MODX. Заказчик уже был знаком с этой системой управления изнутри, поэтому мы решили разработать магазин на MODX вместо привычного 1С Битрикс.
![](/media/f/2018/12/laptop.png)
Начало работы
1. Анализ отрасли
Просмотрели конкурентов в поисковой выдаче по высокочастотным запросам. Сделали выводы по основным элементам, которые должны быть на сайте.
Главная страница
- Разделенное товарное и сервисное меню
- Наличие слайдера
- Меню как правило горизонтальное с выпадающим подменю
- Наличие блока с преимуществами
- Наличие блока с категориями каталога
- Наличие блока Новинки, Хиты продаж и т.п.
- Наличие отзывов и новостей
- Возможен вывод необходимых при заказе услуг
Каталог
- Каталог с фильтром и сортировкой
- Наличие быстрого просмотра
- Избранное
- Наличие меток у товара - Хиты, Новинки и т.п.
- Качественный фотоконтент
Карточка товара
- Галерея с фото
- Описание товара
- Описание доставки
- Описание или ссылки на сопутствующие услуги
- Блоки с похожими товарами
2. Анализ структуры сайтов
Проанализировали структуру каталога и основные параметры в фильтрах. Просмотрели сервисные страницы на других сайтах. Выводы сопоставили с уже имеющейся структурой сайта и внесли правки.
![](/media/f/2018/12/analiz.png)
3. Выделение преимуществ
Нужно было понять, какие преимущества мы должны показать посетителю сайта, чтобы произвести впечатление надежной компании. Просмотрев преимущества конкурентов, выделяем основные, используем их, добавляем наши уникальные преимущества - более 10 лет на рынке, растущая сеть магазинов по всей России, широкий ассортимент.
![](/media/f/2018/12/advantages.png)
4. Анализ целевой аудитории
На основе брифа от заказчика определяем основные категории посетителей на сайте.
Обычные покупатели
Основной целью является выбор и покупка ковра, а также получение ответов на вопросы или консультация.
Основной функционал сайта рассчитан на эту аудиторию: удобный каталог с поиском и фильтром, подробная карточка товара, отзывы, оформление заказа и оплата онлайн, форма обратной связи.
Организации
Им важно узнать условия сотрудничества, оптовых поставок, возможность оплатить по счету.
Для них создаем раздел с нужной информацией и документами, размещаем наши реквизиты, добавляем пункт “оплата через расчетный счет”.
Люди, которые интересуются товаром “на будущее”
Хотят узнать, какие бывают ковры, сколько стоят и что сейчас в моде. Эти потребности закрываем каталогом, отзывами и информационным разделом.
Для оперативной связи с менеджерами компании добавляем на сайт онлайн консультант.
На следующем этапе анализ визуализируется в интерактивных прототипах.
Дизайн
Концепция заключалась в умеренном минимализме, необходимые элементы выделены оранжевым цветом. Использована спокойная цветовая гамма, акцент сделан на фотографии продукции, ничто не отвлекает от выбора товара.
![](/media/f/2018/12/design.png)
Главная
Главная страница кратко рассказывает о компании и ориентирует в ассортименте.
![](/media/f/2018/12/carpet-main.jpg)
Каталог
Фильтр на ajax, сортировка и дополнительный рекламный баннер в каталоге. На превью товара можно выводить метки Новинка и Хит. В каталоге товаров настроена синхронизация с excel файлом. На сайт выгружается номенклатура, свойства и остатки.
![](/media/f/2018/12/catalog.jpg)
Карточка товара
Фотогалерея, выбор размера, показ наличия в магазине и характеристик, также можно посмотреть этот ковер в других цветах и другие ковры из этой серии.
![](/media/f/2018/12/detail.jpg)
Адаптивная верстка
![](/media/f/2018/12/mobile-adapt-1.png)
![](/media/f/2018/12/mobile-adapt-2.png)
![](/media/f/2018/12/mobile-adapt-3.png)
Магазины
Список магазинов с контактами, картой и фотогалереей салона. Есть возможность включать акционный баннер.
![](/media/f/2018/12/magaziny-2.png)
Отзывы
На сайте можно оставить отзывы, которые будут опубликованы после премодерации администратором. В каждом отзыве можно проставить ссылку на модель, о которой был оставлен отзыв.
![](/media/f/2018/12/otzyvy.jpg)
После разработки сайт передан на поисковое продвижение в нашей компании.
вам перезвонит