Разработали интернет-магазин уличной одежды отечественных брендов

Клиент: магазин локальных российских брендов уличной одежды и аксессуаров.

Задача: Создание интернет-магазина на платформе WordPress с целью онлайн-продажи товара, ранее для онлайн-продаж использовалась только группа VK.

У заказчика был запрос на современный и стильный интернет-магазин, который будет соответствовать бренду и выстроенному позиционированию. 

Первоначально был запрос только на интеграции с «Моим складом» и с «Ю-кассой», а также личный кабинет, корзину и раздел «Избранное». Но в ходе работ были добавлены еще несколько интеграций. 

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

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

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

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

Административная панель, вход в неё и в личный кабинет также закастомизированы в соответствии с фирменным стилем заказчика. 

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

К моменту сдачи сайта он был наделен широким функционалом:

1. Интеграция с с «Моим складом»: установлен плагин стороннего разработчика, каждые 3 часа обновляются остатки товаров, раз в день синхронизируются товары

2. Интеграция со СДЭК: установлены плагины, проведена работа по настройке.

3. Подключена Ю-КАССА с возможность оплаты через различные платежные системы.

4. Синхронизация заказов с Telegram и E-mail: заявки с сайта приходят и на почту, и в Telegram).

5. Сбор базы для почтовых рассылок и их оперативная реализация. 

6. Быстро и качественно работающие корзина, личный кабинет покупателя, раздел «Избранное».

В итоге заказчик получил стильный и функциональный сайт, соответствующий запросу, который приносит продажи с момента запуска. 

Формирование структуры и логики сайта, размещение основных блоков, согласование структуры сайта с заказчиком. Этап включает:

1. Исследование и анализ информации о клиенте, его ЦА, конкурентах и соотношение этой информации с целями сайта. 

2. Разработка структуры сайта (карты сайта)

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

3. Создание wireframe (каркаса) страниц

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

4. Согласование и корректировка прототипа

Прототип обсуждается с клиентом, вносятся необходимые изменения и уточнения. Цель этого этапа – получить утвержденный каркас, который станет основой для дизайна.

1. Создание концепции дизайна

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

2. Дизайн главной страницы

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

3. Дизайн внутренних страниц

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

4. Создание интерактивных элементов

Разрабатываем дизайн интерактивных элементов (кнопок, форм, всплывающих окон и т.д.), которые обеспечивают функциональность сайта. Элементы должны быть интуитивно понятными и привлекать внимание пользователей.

5. Адаптивный дизайн

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

6. Подготовка и передача дизайна разработчикам

После утверждения всех макетов готовим файлы для передачи разработчикам. Это включает экспорт графики, создание стайлгайдов (guidelines) и пояснительных материалов по использованию элементов дизайна.

После согласования структуры и дизайна сайта переходим к верстке на выбранной платформе. В данном случае это WordPress.

Верстка сайта включает:

1. Настройка WordPress

Установка и настройка темы и основных параметров: имя сайта, описание, параметры чтения и постоянные ссылки.

2. Создание и настройка шаблонов страниц.

3. Кастомизация темы

Редактирование CSS: настройка стилей с использованием CSS для соответствия дизайну сайта.

Изменение HTML и PHP: настройка HTML и PHP шаблонов для добавления или изменения функциональности.

4. Интеграция контента

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

Форматирование: настройка стилей текста, заголовков, списков и других элементов контента.

5. Настройка виджетов и плагинов

Установка виджетов: добавление и настройка виджетов для боковых панелей и других областей.

Установка плагинов: выбор и настройка плагинов для расширения функциональности сайта (например, формы обратной связи, слайдеры, SEO-плагины).

6. Тестирование функциональности

Проверка работоспособности: тестирование всех функциональных элементов сайта, включая меню, формы, кнопки и ссылки.

Кроссбраузерное тестирование: проверка отображения сайта в различных браузерах.

7. Оптимизация производительности

Оптимизация изображений: сжатие и оптимизация изображений для быстрого загрузки.

Кэширование: установка плагинов для кэширования страниц для улучшения скорости загрузки.

Минификация CSS и Jav * aScript: сжатие файлов CSS и JavaScript для уменьшения времени загрузки.

8. Проверка адаптивности

Тестирование на мобильных устройствах: проверка отображения сайта на различных устройствах (смартфоны, планшеты).

Адаптивный дизайн: убедиться, что сайт корректно отображается и функционирует на экранах разных размеров.

9. Развертывание и запуск

Тестирование безопасности: проверка сайта на уязвимости и установка плагинов безопасности.

Проверка SEO: настройка SEO-плагинов и проверка мета-тегов, ключевых слов и структуры URL.

10. Развертывание на сервере

Перенос на хостинг.

Настройка домена: привязка доменного имени к хостингу и настройка SSL-сертификата для безопасного соединения.

11. Запуск сайта

Публикация сайта: окончательный запуск сайта и уведомление клиентов о его готовности.

Мониторинг: наблюдение за работой сайта в первые дни после запуска для быстрого устранения возможных проблем.