Кейс: Разработка интернет-магазина Velocity

Создать новый интернет-магазин VELOCITY с адаптивным дизайном для мобильных устройств, интегрировать сайт с 1c системой, системой эквайринга, и модулями доставки. То есть, создать полноценный интернет магазин, работающий постоянно и требующий минимальную поддержку администратора.

1. Проектирование сайта

2. Разработка дизайн-концепции

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

Вид и стилистика сайта

Цветовая палитра

Шрифтовые решения

Стилеобразующие и структурные графические элементы

Сетка вёрстки, расположение элементов в композиции

Общее настроение, эмоциональный посыл

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

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

Главная страница

Главная работает как конструктор.

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

Собирается главная страница в админке сайта.

Каталог

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

На сайте VELOCITY разводящая представлена в двух видах: по 2 и 4 карточки в ряд. Пользователь может сам определить количество выводимой информации.

При добавлении товара в корзину пользователю можно сразу указать свой рост и размер.

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

В карточке товара представлены все необходимые параметры:

Наименование товара

Цвет

Цена

Рост

Размер

Фотографии с разных ракурсов

Товар в другом цвете

Состав

Страна производства

Параметры изделия

Информация о доставке, возврате и обмене

А также был добавлен блок с готовыми образами от стилиста.

На мобильной версии для удобства была добавлена зафиксированная снизу экрана плашка с ценой и кнопкой “Добавить в корзину”.

LOOKBOOK

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

При разработке страницы Lookbook была использована нестандартная сетка.

Готовые образы объединены по сериям.

UI kit

Для проекта была выбрана цветовая гамма в стиле деним