Дизайн интернет-магазина автотоваров Racingteam

Racingteam: дизайн страниц для каталога автотоваров

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

Главная: поиск, товары и разделы

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

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

Каталог и карточка товара

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

В макете отдельного товара большая белая область изображения размещена слева, а название и характеристики - справа. Ниже характеристик показаны отметка наличия, перечеркнутая и выделенная оранжевым цены, а также кнопка "Купить". Под товарным блоком находится текст-заполнитель Lorem ipsum. Значения в карточке и цены в каталоге служат содержимым демонстрационных макетов, а не сведениями об актуальном ассортименте или стоимости.

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

Корзина и оформление

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

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

Доставка, оплата и контакты

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

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

Работы и услуги

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

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

Что показывает кейс

Галерея фиксирует набор визуальных решений для магазина автотоваров: общую навигацию, карточки, справочные страницы и оформление формы. Темная основа объединяет разделы, оранжевый цвет выделяет отдельные действия и маркеры, а светлые панели и поля создают контраст. Белые заглушки и текст-заполнитель сохранены в исходных изображениях и являются частью представленных материалов.

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

Смотрите также: Дизайн интернет-магазина шин и дисков.