Заказать

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

Перейти на IQ Fitness

Задача

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

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

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

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

Прототипирование сайта IQ Fitness Прототипирование сайта IQ Fitness Прототипирование сайта IQ Fitness

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

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

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

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

Дизайн

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

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

Меню

Интересно реализовано выпадающее меню каталога: разные разделы сайта не просто разделены по столбикам, но и выделены разными ягодными цветами в стилистике сайта.
Меню сайта IQ Fitness

Баннеры

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

Категории

Категории и новинки каталога вынесены на главную страницу, чтобы пользователь мог выбрать нужное направление и приобрести товар в несколько кликов.
Каталог сайта IQ Fitness

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

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

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

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

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

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

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

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

Подробнее о том, как была разработана фронтенд часть сайта
Стоит обратить внимание на аудио- плеер собственной разработки, который позволяет быстро и удобно переключать дорожки для прослушивания фрагментов.
album cover
01.mp3
album cover
02.mp3
album cover
03.mp3

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

Бекенд разработчик тоже не отдыхал на проекте. В результате работы было реализовано:
  • Скачивание виртуальных товаров после их оплаты. Скачивание происходит напрямую из хранилища с помощью специального API.
  • Личный кабинет пользователя с возможностью просмотреть историю заказов и скачать оплаченные альбомы (если не было достигнуто ограничение по количеству закачек и времени жизни ссылки)
  • Возможность одновременной покупки товаров с доставкой и скачиваемых товаров.
  • Начисление кешбека от покупки в виде промокода. Администратор сайта самостоятельно задает пороги начисления. Пользователь в процессе оформления заказа видит, какой кешбек ему будет возвращен и после оплаты получает в письме промокод на начисленную стоимость.
  • При этом на сайте средствами WordPress CMS настроена удобная админка для быстрого наполнения и отслеживания заказов.
PROMOFRONT

Фронтенд.
Нам нужно больше фронтенда!

  • Vue.js
  • CSS3
  • Webpack
  • Node js
  • Препроцессор Sass

Предложение от работников фронта: при заказе верстки по готовому дизайну стоимость часа - 1200 руб
вместо - 1800 руб Просто добавьте в заявку промокод PROMOFRONT

Акция действует на теплосметы,
составленные до 1 мая

Отправить дизайн на оценку