GEO: Россия / Москва
Ниша: запчасти и двигатели для спецтехники и грузовой техники
Платформа: InSales
Тип работ: дизайн с нуля, перенос на InSales, сборка шаблона на виджетах
Главная задача: сделать не просто новый дизайн, а управляемый интернет-магазин, где заказчик может сам работать с блоками, категориями, каталогом и страницей двигателей
Результат: сайт сдан, работает, клиент пользуется им и возвращается за доработками
Detalink.ru — проект в нише запчастей и двигателей для спецтехники и грузовой техники.
До начала работ у клиента уже был сайт. Насколько я помню, он был сделан на Tilda: красный, простой, без нормальной дизайн-системы и без той структуры, которая нужна полноценному интернет-магазину запчастей.
А в этой нише сайт работает не так, как обычная витрина.
Покупатель часто не приходит “посмотреть ассортимент”. Он уже знает, что ему нужно. У него есть артикул, номер детали, модель двигателя или бренд техники. Поэтому первое, что он делает на сайте, — ищет конкретную позицию.
Именно поэтому в Detalink.ru было важно не просто сделать красивую главную страницу. Нужно было собрать сайт, который соответствует реальному поведению покупателя: быстрый поиск, понятная структура, брендовые направления, каталог, карточки товаров, страницы двигателей и возможность оставить заявку.
Платформа InSales уже была выбрана на стороне клиента. Наша задача была спроектировать дизайн и перенести его так, чтобы сайт не стал жёстким шаблоном, где любое изменение требует разработчика.
Нужно было сделать гибкую систему.
Настоящая задача
Изначально задача звучала просто: разработать дизайн и перенести его на InSales.
Но по факту проект был глубже.
Клиенту нужен был не набор статичных страниц, а рабочий шаблон, который можно развивать. Поэтому мы сразу смотрели на проект не как на “нарисовать и сверстать”, а как на сборку мини-конструктора внутри InSales.
Нужно было, чтобы заказчик мог:
— управлять блоками на страницах;
— использовать виджеты не только на главной, но и на других страницах;
— менять вывод категорий;
— работать с каталогом;
— добавлять модели двигателей;
— развивать страницы без постоянного обращения к разработчику по каждому небольшому изменению.
Главный поворот проекта был в этом: сначала казалось, что нужно просто сделать дизайн и перенести его на InSales, но в процессе стало понятно, что сайту нужна гибкая система управления контентом и сложными техническими страницами.
Ограничения и рамки проекта
InSales хорошо подходит для интернет-магазинов, но не все задачи в нём решаются “из коробки”.
В Detalink.ru была сложность не только в дизайне, но и в структуре.
Сайт должен был включать не одну главную страницу и каталог, а целую систему разделов:
— шапку и подвал;
— главную страницу;
— акции;
— страницы конкретных акций;
— страницу “Двигатели”;
— страницы запасных частей под заказ;
— страницы направлений по брендам;
— каталог;
— страницу “О компании”;
— истории успеха;
— доставку;
— новости;
— контакты.
При этом часть блоков должна была быть управляемой из админки: баннеры, продукция бренда, выкладка товаров, подбор двигателя, преимущества, доставка, партнёры, рекомендации, новости.
Отдельно стояла задача по странице “Двигатели”. Для неё нужна была табличная структура, где заказчик может сам добавлять данные. InSales не предусматривает такую сущность напрямую, поэтому решение нужно было собирать через возможности каталога.
Принятое решение
Я понимал, что здесь нельзя просто нарисовать красивый макет и сверстать его как статичную страницу.
Для Detalink.ru важнее было другое: сделать сайт, который выглядит современно, но при этом остаётся удобным в управлении.
Мы пошли по логике:
— сначала разобраться в структуре сайта;
— затем продумать дизайн;
— отдельно проработать цветовую систему;
— собрать основные блоки как виджеты;
— перенести дизайн на InSales;
— нестандартные разделы уложить в возможности платформы;
— оставить клиенту систему, с которой можно работать дальше.
Дизайн начинался не с вкусовщины, а с выбора визуального направления
Перед финальным дизайном мы подготовили пять вариантов цветовой гаммы.
Это был не просто набор “какой цвет нравится больше”. Для каждого варианта была своя логика.
Оранжевый давал динамику, энергию и хороший контраст с тёмно-синим. Бирюзовый создавал более технологичное и современное ощущение. Серо-голубой выглядел спокойнее и профессиональнее. Яркий синий добавлял энергии и ассоциаций с технологичностью. Тёмно-синий усиливал строгость, надёжность и технический характер сайта.
Для такой ниши это важно. Запчасти и двигатели для спецтехники — не эмоциональная покупка. Здесь пользователь ждёт понятности, надёжности и профессионального ощущения от сайта.
Поэтому цветовая система должна была помогать интерфейсу, а не спорить с задачей.
Поиск вынесли в один из главных сценариев
На сайтах запчастей поиск — один из ключевых элементов.
Покупатель может прийти на сайт с конкретным артикулом или номером детали. Ему не нужно долго читать о компании или листать категории. Ему нужно быстро проверить: есть ли нужная позиция, можно ли её заказать, как связаться и что делать дальше.
Поэтому поиск вынесли на главную страницу как заметный и понятный элемент.
Это решение кажется простым, но для такой ниши оно принципиальное. Дизайн должен был подстроиться под реальный сценарий пользователя: сначала найти деталь, потом уже смотреть карточку, условия, доставку и дополнительные разделы.
Главную страницу собрали как систему блоков
Главная страница Detalink.ru не должна была быть просто красивой обложкой.
Она должна была вести пользователя по основным сценариям:
— быстро понять, чем занимается компания;
— перейти к брендам;
— найти запчасть или двигатель;
— посмотреть товары;
— оставить заявку на подбор;
— увидеть преимущества;
— перейти к доставке, новостям, историям успеха или контактам.
В структуру главной вошли:
— баннер;
— продукция бренда;
— выкладка товаров;
— блок подбора двигателя;
— блок о компании;
— преимущества с цифрами;
— истории успеха;
— доставка;
— партнёры;
— рекомендации;
— новости.
Часть этих блоков мы проектировали так, чтобы их можно было использовать не только на главной. Это и стало основой мини-конструктора.
Виджеты сделали как основу шаблона
Одна из ключевых задач проекта — сверстать сайт не жёстко, а на виджетах.
То есть блоки должны были жить как управляемые элементы, ближе к логике стандартных тем InSales. Заказчик получает не страницу, где всё зашито в код, а набор блоков, которые можно применять в разных местах сайта.
Например, блоки с продукцией бренда должны были поддерживать разные варианты: с одной, двумя или тремя иллюстрациями. У кнопок и ссылок должны быть настройки. Какие-то элементы можно показывать или скрывать.
Это удобно для клиента: сегодня блок нужен на главной, завтра похожий блок может понадобиться на другой странице. Не нужно каждый раз собирать всё с нуля.
По сути, получился мини-конструктор под конкретный магазин.
Отдельно сделали управляемый вывод категорий
Для Detalink.ru было важно, чтобы клиент мог сам работать с категориями и их выводом.
В таких магазинах структура может меняться: появляются новые направления, бренды, категории, подкатегории, товары под заказ, товары на складе.
Если всё зашить жёстко, сайт быстро станет неудобным в поддержке.
Поэтому мы сделали возможность управлять выводом категорий. Это не просто косметика, а важная часть дальнейшей жизни проекта: клиент может развивать структуру сайта без постоянной зависимости от разработчика.
Самая сложная часть — страница “Двигатели”
Главная техническая сложность была в странице “Двигатели”.
Там нужна была структура, похожая не на обычный каталог товаров, а на техническую таблицу: бренды, назначения, серии, модели, характеристики.
InSales из коробки не даёт отдельного удобного инструмента именно под такую задачу. Поэтому мы адаптировали решение через каталог.
Логика получилась такая:
— категории и подкатегории используются как уровни структуры;
— названия категорий и подкатегорий становятся заголовками в таблице;
— товары используются как строки таблицы;
— заказчик добавляет новые модели двигателей через привычную админку InSales;
— на сайте эти данные выводятся в нужном техническом виде.
Это хороший пример, где платформа не даёт готовой кнопки “сделать так”, но задачу всё равно можно решить аккуратно.
Мы не стали делать отдельную кастомную админку. Вместо этого использовали то, что уже есть в InSales, и разложили структуру так, чтобы заказчику было удобно ей пользоваться.
В результате клиент может сам добавлять разные модели двигателей в таблицу, а сайт остаётся управляемым.
Каталог тоже дорабатывали под сценарии пользователей
После запуска и в процессе развития сайта появлялись доработки по каталогу.
Одна из таких задач — возможность переключать вид страницы каталога: плитка или список строками.
Для запчастей это логично. Плитка удобна, когда важен визуальный обзор. Список строками удобнее, когда пользователь сравнивает позиции, смотрит артикулы, названия, характеристики и быстро просматривает много товаров подряд.
Для технической ниши второй вариант часто важнее, потому что покупатель работает не с “красивыми товарами”, а с конкретными деталями.
Поэтому мы добавляли переключатель вида каталога, чтобы пользователь мог выбирать удобный формат просмотра.
Карточки товаров и детали интерфейса тоже доводили
Помимо крупных блоков, были и точечные доработки по пользовательскому пути.
Например:
— убирали дублирующее описание на карточке товара;
— оставляли описание в нужном переключателе;
— корректировали заголовки с учётом структуры страницы;
— проверяли блок “Вы недавно смотрели”;
— добавляли блок “Вас может заинтересовать”;
— настраивали похожие товары по бренду;
— добавляли карту на страницу контактов;
— корректировали тексты и ссылки в блоках.
Это не главная история кейса, но она хорошо показывает характер проекта: после переноса сайт не бросили, а доводили как рабочий инструмент.
Как шёл процесс
Проект шёл в нормальной последовательности.
Сначала мы разобрали ТЗ и структуру сайта. Затем подготовили дизайн-концепцию и варианты цветовой гаммы. После утверждения визуального направления сделали дизайн и согласовали его с заказчиком.
Дальше перешли к переносу на InSales.
На этапе переноса важно было не просто повторить картинку, а собрать рабочий шаблон: виджеты, управляемые блоки, каталог, страницы, нестандартную страницу “Двигатели”.
После переноса заказчик проверил уже не макеты, а рабочий сайт. Мы прошли круг правок по реализации, закрыли замечания и сдали проект.
После сдачи у проекта был месяц поддержки. Это важный этап: сайт уже работает, заказчик начинает пользоваться им в реальных условиях, и могут всплывать мелочи, которые удобнее закрывать сразу.
Результат
Проект был сдан в январе или феврале прошлого года.
Сайт работает. Клиент им пользуется и продолжает возвращаться с доработками. Сейчас, например, планируется добавление формы подписки на рассылку. До этого тоже были правки и улучшения по сайту.
Для меня это хороший показатель.
Если клиент возвращается с развитием, значит сайт не остался разовым проектом “сделали и забыли”. Он стал рабочей основой для бизнеса.
В результате Detalink.ru получил:
— новый дизайн с нуля;
— перенос на InSales;
— шаблон, собранный на виджетах;
— переиспользуемые блоки для разных страниц;
— управляемый вывод категорий;
— акцентный поиск на главной;
— страницу “Двигатели”, адаптированную под возможности InSales;
— каталог с дальнейшими доработками под разные сценарии просмотра;
— основу, которую можно развивать дальше.
Цифры по росту продаж или конверсии здесь не заявляем: подтверждённых данных нет. Результат этого проекта в другом — мы собрали не просто сайт по макету, а управляемую e-commerce-систему внутри InSales.
Почему здесь сработал именно такой подход
В Detalink.ru нельзя было ограничиться обычной логикой “нарисовали дизайн — сверстали шаблон”.
Для простого магазина этого иногда достаточно. Но здесь ниша техническая: запчасти, двигатели, бренды, артикулы, таблицы, товары под заказ, разные сценарии поиска.
Поэтому подход был другим.
Сначала нужно было понять, как пользователь ищет товар. Потом — как клиент будет управлять сайтом. И только после этого собирать дизайн и переносить его на InSales.
За счёт этого сайт получился не жёсткой витриной, а гибким шаблоном:
— блоки можно использовать повторно;
— страницы можно развивать;
— категории можно менять;
— модели двигателей можно добавлять через каталог;
— сайт можно дорабатывать без пересборки всего проекта.
Это и есть основная ценность кейса: мы не просто перенесли дизайн на InSales, а собрали для Detalink.ru рабочий инструмент, который клиент использует и развивает дальше.
Финал
Если интернет-магазин работает в технической нише, дизайн сам по себе не решит задачу.
Важно не только как сайт выглядит, но и как он устроен: где поиск, как собран каталог, может ли клиент сам менять данные, насколько удобно развивать страницы, не превращается ли каждое изменение в отдельную разработку.
В Detalink.ru мы как раз решали эту задачу: сделали дизайн, перенесли его на InSales и собрали гибкий шаблон, который можно использовать как основу для дальнейшего развития магазина.
