Разработка сайта по продаже музыки для фитнеса IQ fitness

Задача

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

Разработать интернет-магазин музыки и товаров для фитнеса с возможностью покупки виртуальных (скачиваемых) и физических товаров;

Формирование и отправка ссылок для скачивания товаров должно происходить автоматически без привлечения администратора;

Личный кабинет для пользователя с историей заказов.

Проектирование

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

Техническое задание

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

Реализация скачивания виртуальных товаров после их оплаты;

Плеер для прослушивания музыкальных фрагментов альбомов перед покупкой;

Быстрая регистрация и последующая авторизация пользователей через соц. сети;

Личный кабинет пользователя с историей заказов и возможностью скачать купленные товары;

Интеграция сервиса оплаты и получение статуса для выдачи ссылок на скачивание альбомов;

Начисление кешбека при совершении покупки заказа и выдача промокода на начисленную стоимость.

Дизайн

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

Если говорить о постановке задачи по дизайну от клиента, то звучала она примерно так “На сайте должна быть дискотека!”
При отрисовке нового дизайна был сделан упор на фитнес направление: яркие и сочные элементы привлекают внимание.

Фронтенд разработка

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

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

Анимации, фигурные границы блоков и градиенты на страницах реализованы через Canvas.

Для удобства масштабирования сайта и его дальнейшей поддержки при формировании структуры элементов использована методология БЭМ.

Сайт адаптирован для просмотра на ретина- экранах.

Подробнее о том, как была разработана фронтенд часть сайта

Бекенд разработка

Бекенд разработчик тоже не отдыхал на проекте. В результате работы было реализовано:

Скачивание виртуальных товаров после их оплаты. Скачивание происходит напрямую из хранилища с помощью специального API.

Личный кабинет пользователя с возможностью просмотреть историю заказов и скачать оплаченные альбомы (если не было достигнуто ограничение по количеству закачек и времени жизни ссылки)

Возможность одновременной покупки товаров с доставкой и скачиваемых товаров.

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

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

Результат

Стараниями всей команды сайт получился эффектным, функциональным и шустрым. И главное, реализовано основное желание клиента - работа администратора на сайте минимизирована, так как отправка ссылок на скачивание альбомов происходит автоматически. Главное, всё правильно наполнить ;-) А для этого мы разработали подробную инструкцию!

Спасибо за просмотр!

Готовый проект iqfitness.ru

Задача

Проектирование

Техническое задание

Дизайн

Меню

Баннеры

Категории

Карточка товара

Фронтенд разработка

Бекенд разработка

Результат

Спасибо за просмотр!