Для «Ладоги Карго» мы спроектировали и разработали магазин запчастей и двигателей на InSales. Вместе с командой компании согласовали структуру, подготовили цветовые варианты дизайна, отдельные страницы для складского ассортимента и поставок под заказ. Для двигателей сделали раздел с сериями и техническими характеристиками. Блоки сайта собрали на управляемых виджетах.
«Ладога Карго» поставляет запасные части и двигатели Cummins, CAT и Liebherr для строительной, грузовой, сельскохозяйственной и другой промышленной техники. Среди покупателей компании предприятия, которым нужно подобрать конкретную деталь или двигатель под свою задачу. Проект разрабатывался под маркой Ladoga Parts, а магазин работает на домене Detalink.ru.
Сначала согласовали структуру вместе с командой
Работу начали с брифа и устройства будущего магазина. В ассортименте сочетались товары со склада и поставки под заказ, а выбор двигателя требовал больше сведений, чем фотография и цена. Нужно было развести эти направления и при этом сохранить понятные переходы между ними.
Структуру обсуждали на нескольких созвонах. Со стороны «Ладоги Карго» участвовали руководитель и его помощники: вместе разбирали состав страниц и расположение блоков. К дизайну перешли после согласования этой основы.
В прототипе главной появились баннер, поиск по артикулу, направления по брендам, товарная подборка и обращение за подбором двигателя или запчасти. Информацию о компании, доставке и проектах разместили ниже. Так верх страницы связывает посетителя с ассортиментом, а следующие блоки помогают разобраться в поставщике и условиях работы.
Сравнили пять цветовых решений
После структуры перешли к визуальному оформлению. На одной композиции главной сравнили пять акцентных цветов: оранжевый, бирюзовый, серо-голубой, яркий синий и тёмно-синий. Основой оставался фирменный сине-серый цвет.
Дизайнер подготовил пояснения к вариантам. Обсуждали, насколько заметными будут кнопки и пункты меню, как акцент сочетается с основным цветом и какое общее впечатление создаёт страница. Одинаковая композиция позволяла оценить именно палитру, не отвлекаясь на перестановку блоков.
В итоговом оформлении использовали сдержанную сине-серую гамму: тёмные заголовки и кнопки, светлый фон и белые товарные карточки. Фотографии двигателей и деталей стали основными цветными элементами.
Главная ведёт к артикулу, бренду или подбору
Для посетителя с номером детали предусмотрели заметную строку поиска сразу под первым баннером. Рядом с ассортиментом по брендам в меню разместили переход к складским запчастям и подбору двигателя. Эти входы соответствуют разным исходным данным: известен артикул, известен производитель или нужна помощь специалиста.
На баннере разместили крупное изображение двигателя рядом с предложением компании. При выборе пропорций учли практическую задачу наполнения: фотографии техники должны помещаться в блок без сильной обрезки сверху и снизу. Заголовок, описание и кнопку выделили в отдельную текстовую часть.
Для каждого баннера предусмотрели своё изображение, текст и ссылку. Кнопку можно скрыть, если конкретному сообщению не нужен переход. Это позволяет использовать одну структуру для разных предложений компании.
Каталог направлений учитывает ассортимент каждого бренда
Общий каталог построили вокруг производителей. Внутри бренда посетитель выбирает направление: двигатели, запасные части или запчасти со склада. Рядом с иллюстрациями находится короткое описание предложения и кнопка перехода.
Количество направлений у брендов различается. Поэтому подготовили блоки с одной, двумя и тремя иллюстрациями. В макете это хорошо видно: у Liebherr одна карточка, у CAT две, у Cummins три. Состав блока можно менять по мере развития ассортимента.
Тот же принцип использовали на главной. Человек сначала выбирает производителя и нужный тип поставки, затем переходит к конкретным позициям.
Два варианта каталога: со склада и под заказ
Для складского ассортимента сделали товарную выдачу с фильтрами. В настольном макете слева расположены выбор бренда, цена и параметры, справа карточки товаров. Над сеткой можно переключиться между двигателями и запасными частями.
В карточке списка собрали фотографию, название, артикул, цену и количество. Рядом с покупкой предусмотрели возможность уточнить информацию по товару. Покупатель получает основные сведения уже в каталоге и может открыть подробную карточку для дальнейшего выбора.
Для поставок под заказ подготовили другой вариант страницы. Перед товарной сеткой предусмотрели описание направления, место для изображения и кнопку заявки. Здесь важно сначала объяснить предложение компании и дать способ обсудить поставку. Сценарий заказа таких позиций связан с заявкой на предзаказ, а не с обычным добавлением складского товара в корзину.
В дальнейшем каталог дополнили переключением между плиткой и списком строками. Плитка отводит больше места фотографиям, а строки позволяют компактнее просматривать позиции и артикулы. Формат выбирает сам посетитель.
Страница двигателей помогает сравнивать технические параметры
Для двигателей разработали отдельную страницу. Здесь выбор начинается с назначения техники: пассажирский транспорт, грузовая, сельскохозяйственная, строительная или карьерная техника. После выбора направления посетитель видит серии и модели.
Каждую серию собрали в отдельный блок. Внутри находятся название, бренд, назначение и таблица с моделями. Рабочий объём, мощность, крутящий момент и нормы выбросов разложены по колонкам, чтобы характеристики разных моделей можно было сопоставить по одним и тем же параметрам.
Под таблицей указана применяемость. Рядом расположены заявка и переходы в мессенджеры. Так технические данные и обращение к поставщику находятся в одном месте: посетителю не нужно возвращаться на главную, чтобы продолжить обсуждение выбранной серии.
Структура рассчитана на несколько серий в одном направлении. Компания может пополнять раздел моделями и характеристиками через инструменты управления магазином.
На телефоне таблица превращается в блоки характеристик
Широкую таблицу двигателей адаптировали под узкий экран. У каждой модели параметры идут последовательно: название поля, затем значение. Объём, мощность и крутящий момент остаются подписанными, даже когда все сведения не помещаются в одну горизонтальную строку.
Переключатели назначения расположены друг под другом. Ниже следуют серия, модели, применяемость и кнопка заявки. Мобильный макет сохраняет путь от типа техники к характеристикам и обращению.
Отдельные мобильные макеты подготовили также для главной, каталога, карточки товара, корзины, оформления заказа и информационных страниц.
В карточке товара рядом находятся артикул и действия
Для запчастей важна точная идентификация позиции. В макете название и артикул расположены в верхней части карточки рядом с галереей, ценой и количеством. Покупатель может сверить номер детали перед заказом.
Основную фотографию дополнили миниатюрами, а технические сведения вынесли в характеристики. Рядом с кнопкой корзины предусмотрели обращение по товару в мессенджер. Это оставляет два пути: заказать выбранную позицию или сначала уточнить её у поставщика.
Ниже показали условия работы компании и недавно просмотренные товары. Эти блоки помогают вернуться к предыдущему выбору и познакомиться с условиями поставки, оставаясь на странице позиции.
Перенесли дизайн на InSales и дали управление блоками
После согласования дизайна перенесли страницы на InSales. Основой шаблона стали виджеты: отдельные блоки с настройками в редакторе магазина. Команда «Ладоги Карго» может менять их содержание и управлять размещением на страницах.
Настройки связали с задачами наполнения. У баннера меняются изображение, заголовок, текст и кнопка. У блока бренда выбираются направления и иллюстрации. У товарной подборки задаётся категория и число рядов. Для ссылок и кнопок предусмотрены свои подписи и адреса.
Блок обращения за подбором собрали из пояснения, действий по двигателям и запчастям и способов связи. Его можно использовать рядом с каталогом или на информационной странице. Общие блоки компании, доставки и партнёров также продолжают оформление разных разделов.
Так при добавлении направления или смене предложения команда работает с содержанием готовых блоков. Общая сетка, цвета и оформление сохраняются в шаблоне.
Результат
Для «Ладоги Карго» создали дизайн и магазин на InSales с отдельными сценариями для складских товаров, поставок под заказ и подбора двигателей. Структуру согласовали вместе с командой компании, затем оформили основные страницы и их мобильные версии.
Магазин получил каталог направлений по брендам, два варианта товарных страниц, технический раздел двигателей и управляемые виджеты. Эти элементы позволяют развивать ассортимент и обновлять предложения в рамках единого оформления.
Нужен магазин с каталогом под вашу продукцию? Посмотрите, как мы выполняем дизайн и разработку интернет-магазинов на InSales.
