Проект для ТМ Skyway
Шустрый сайт с вжух-анимациями для любителей автоаксессуаров
Стоит зайти в любой автомагазин, как сразу хочется выйти обратно: повсюду будут щетки, ароматизаторы-ёлочки, автохимия, оплётки, псевдомеховые сидения, стеклоочистители (они же в простонародье «дворники») и ещё куча всего — от разных производителей, в разных ценовых сегментах, под разные нужды. Конкуренция в сфере продажи автоаксессуаров бешеная: от хитрожопых скупщиков китайского вонючего пластика и омывалок на основе ядовитого метилового спирта до тех, кто честно выпускает качественные товары под собственной торговой маркой.
ТМ Skyway — как раз из последних. Давно на рынке, знают специфику, наладили связи с проверенными поставщиками, обзавелись широкой дилерской сетью и дистрибьюторами в 14 городах России. Заказчику требовался свежий сайт с современным дизайном, который бы выгодно выделил его на фоне конкурентов и помог привлечь новых дилеров.
ТМ Skyway — как раз из последних. Давно на рынке, знают специфику, наладили связи с проверенными поставщиками, обзавелись широкой дилерской сетью и дистрибьюторами в 14 городах России. Заказчику требовался свежий сайт с современным дизайном, который бы выгодно выделил его на фоне конкурентов и помог привлечь новых дилеров.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1548296953/tild6362-3235-4539-b639-643731393438__-__empty_____2.png)
Задачи
1
Разработать корпоративный сайт с каталогом и инструментами для привлечения новых дилеров.
2
Создать актуальную дизайн-концепцию и сформировать положительный имидж компании в сети.
3
Отразить полную информацию для каждой целевой аудитории.
4
Адаптировать сайт под разные устройства.
Аналитика
В ходе анализа рынка и аудитории мы выявили 4 типа ключевых персон:
- потенциальные дилеры,
- потенциальные оптовики,
- потенциальные конечные покупатели,
- текущие дилеры.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1548296953/tild6664-3233-4863-b634-336631333637__-__empty__persons1_1.png)
На главной странице сайта мы добавили блок для ключевых целевых групп, откуда они сразу могут перейти в раздел о сотрудничестве и узнать все подробности. Здесь же — новинки каталога, чтобы пользователи сразу «проваливались» в раздел.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1548296953/tild3266-6264-4830-b535-383132326165__-__empty__proto1.png)
Дизайн
На сайтах автомобильной тематики часто можно встретить контрастные цвета (красный-черный, желтый-черный) и качественные большие фотографии с динамичной ездой по бескрайним дорогам — на мудборде мы собрали несколько сочных примеров, чтобы понять ожидания заказчика и определить настроение проекта.
![]() |
![]() |
![]() |
В проект очень просилась какая-то фишка, связанная с автомобилями (естественно). Сделать слайдер на весь экран, где были бы классные фотки с автомобилями — впечатляюще (и мы даже попробовали на альтернативной версии), но хотелось чего-то особенного. На основном макете мы предложили для слайдера нестандартную ромбовидную форму, а на фоне задумали анимацию подъезжающего авто. Фирменный красный из логотипа заказчика определил основную гамму проекта :)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1548296953/tild3636-6630-4663-b232-376534633031__-__empty__compare1.png)
Среди промо-материалов Skyway были горячие фото с автомобилем и девушкой — они классно вписывались в слайдер альтернативной версии, добавляя перчинки :) Заказчик всё-таки выбрал более строгую основную версию без намеков на эротику, а фото с девушкой аккуратно перекочевало на страницу «О компании».
Любой дилер хочет индивидуальных условий сотрудничества, поэтому для каждого типа партнёрства мы отрисовали свою страничку, где пользователи могут подробнее узнать об условиях сотрудничества и оформить заявку через встроенную форму.
![]() |
![]() |
![]() |
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1548296953/tild6132-3439-4966-b165-336136326165__-__empty__404_1.png)
На 404-й странице спрятался своеобразный дорожный знак :)
Разработка
Фишка проекта — анимация в промо-блоке: при первой загрузке страницы выезжает автомобиль, а за ним плавно подтягиваются все элементы на странице.
В проекте полно микроанимаций: блоки на главной аккуратно всплывают при скролле, категории в каталоге при наведении ярко выделяются, а строка поиска разворачивается при клике. Категории каталога можно выбирать на странице, а можно зайти в меню-гамбургер и пройтись по категориям и подкатегориям — товары в списке удобно упорядочены в колонки.
У товаров каталога сложная иерархия по группам и категориям: уровни вложенности варьируют от 3-х до 5, но мы аккуратно разместили их так, что пользователю всегда легко и удобно найти нужное. На предпоследнем уровне в группе конкретной категории товаров (например, галогенных ламп) слева спрятан подробный фильтр. Причём, у каждой группы он свой.
Некоторые товары в группе можно не просто посмотреть, но и послушать (аккуратно — звучит громко :)).
Внутри карточки конкретного товара — его описание и подробные характеристики (список которых для каждой товарной группы заказчик может настраивать в админ-панели самостоятельно), наличие на складах и ссылка на карту «где купить».
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1548296953/tild3737-3433-4430-b435-356363333632__-__empty___2.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1548296953/tild6139-3537-4130-b930-616330653733__-__empty___.png)
С импортом товаров в каталог мы потрудились: в выгрузке клиента данные по каждому товару были в очень нестандартном формате, который Битрикс не понимает. Мы написали своего рода конвертер, который преобразует эти данные в нужный вид. И всё работает :)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1548296953/tild6365-6661-4463-a330-396364636533__-__empty__garbuz.png)
Сергей
Разработчик
Также в самом каталоге мы предусмотрели форму обратной связи (помимо тех, что есть в разделах для партнёров) — она плавно появляется слева при клике. Внутри формы учли тип обращения (физические и юридические лица) и широту дилерской сети, добавив поле «удобное время для звонка по Мск».
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1548296953/tild6465-3038-4666-b063-396637373439__-__empty__photo.png)
К некоторым товарам в каталоге привязаны сертификаты качества — они появляются на всплывашке при клике. Это снимает вопросы о происхождении товаров и их потребительских свойствах.
Дополнительно на сайте есть раздел с дополнительными материалами для потребителей и дилеров: каталогами продукции (которые можно скачать из облака), фотографиями, видео, инструкциями и всем списком сертификатов.
Дополнительно на сайте есть раздел с дополнительными материалами для потребителей и дилеров: каталогами продукции (которые можно скачать из облака), фотографиями, видео, инструкциями и всем списком сертификатов.
![]() |
![]() |
![]() |
Обычно на адаптивных версиях оставляют минимум анимации, но в этом проекте даже в промо-блоке мы сохранили главную фишку сайта.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1548296953/tild3236-6666-4364-b361-356634613266__-__empty____.gif)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1548296953/tild6364-3565-4265-a639-376161643437__-__empty__devices2_3.png)
Но хватит расписывать все прелести этого проекта словами — лучше загляните сами и выберите себе парочку автоаксессуаров, зима в разгаре :)
Готовый проект