Основные задачи

Создать удобную структуру сайта

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

Требования к разработке сайта
Подготовить style-guid для сайта по брендбуку

Разработать современный, стильный и удобный дизайн для интернет-магазина автозапчастей
Предусмотреть кроссбраузерность верстки

Сверстать сайт адаптивно, под все устройства

ЭТАП 1. Проектирование

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

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

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

Основные вопросы, которые требовали детального описания на старте:

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

Таким образом, на первом этапе работ мы согласовали полный объем функционала и отрисовали прототипы будущего сайта для гарантии.

UI_kit
Цветовая схема
Типографика
Прототив главной страницы
Прототип страницы карточка товара
Прототип страницы каталог
Прототип страницы корзина
Прототип страницы личные данные (физ. лицо)
Прототип страницы личные данные (юр. лицо)
Прототип страницы поиска по маркам
Прототип страницы поиска по категориям

ЭТАП 2. Дизайн и вёрстка

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

На этапе верстки мы:

Адаптировали подготовленные ранее прототипы ко всем типам устройств, браузерам и разрешениям экрана;
Продумали формат изображений для карточек товара, чтобы он соответствовал большинству уже имеющихся у клиента изображений продукции;
Задали валидацию для всех форм;
Оптимизировали код всех страниц под требования Google Speed Insight.