Шустрый сайт с вжух-анимациями для любителей автоаксессуаров
Результат Процесс
Проект для ТМ Skyway
Сибирикс
Проект для ТМ Skyway
Шустрый сайт с вжух-анимациями для любителей автоаксессуаров
Стоит зайти в любой автомагазин, как сразу хочется выйти обратно: повсюду будут щетки, ароматизаторы-ёлочки, автохимия, оплётки, псевдомеховые сидения, стеклоочистители (они же в простонародье «дворники») и ещё куча всего — от разных производителей, в разных ценовых сегментах, под разные нужды. Конкуренция в сфере продажи автоаксессуаров бешеная: от хитрожопых скупщиков китайского вонючего пластика и омывалок на основе ядовитого метилового спирта до тех, кто честно выпускает качественные товары под собственной торговой маркой.

ТМ Skyway — как раз из последних. Давно на рынке, знают специфику, наладили связи с проверенными поставщиками, обзавелись широкой дилерской сетью и дистрибьюторами в 14 городах России. Заказчику требовался свежий сайт с современным дизайном, который бы выгодно выделил его на фоне конкурентов и помог привлечь новых дилеров.
Задачи
1
Разработать корпоративный сайт с каталогом и инструментами для привлечения новых дилеров.
2
Создать актуальную дизайн-концепцию и сформировать положительный имидж компании в сети.
3
Отразить полную информацию для каждой целевой аудитории.
4
Адаптировать сайт под разные устройства.
Аналитика

В ходе анализа рынка и аудитории мы выявили 4 типа ключевых персон:

  1. потенциальные дилеры,
  2. потенциальные оптовики,
  3. потенциальные конечные покупатели,
  4. текущие дилеры.
Клиенту интереснее оптовые продажи, поскольку интернет-магазин для розницы будет конкурировать с его же дилерами. Поэтому на новом сайте важно было и компанию выгодно представить, и товары для оптовых продаж показать. Оптовым покупателям особенно важны условия сотрудничества, конечным потребителям (которые тоже могут зайти на сайт изучить ассортимент) — доверие к марке. И конечно, для каждой группы важен каталог: чтобы можно было зайти в разные категории товаров, почитать об их характеристиках и качестве, а ещё узнать, где купить.
На главной странице сайта мы добавили блок для ключевых целевых групп, откуда они сразу могут перейти в раздел о сотрудничестве и узнать все подробности. Здесь же — новинки каталога, чтобы пользователи сразу «проваливались» в раздел.
Дизайн
На сайтах автомобильной тематики часто можно встретить контрастные цвета (красный-черный, желтый-черный) и качественные большие фотографии с динамичной ездой по бескрайним дорогам — на мудборде мы собрали несколько сочных примеров, чтобы понять ожидания заказчика и определить настроение проекта.
В проект очень просилась какая-то фишка, связанная с автомобилями (естественно). Сделать слайдер на весь экран, где были бы классные фотки с автомобилями — впечатляюще (и мы даже попробовали на альтернативной версии), но хотелось чего-то особенного. На основном макете мы предложили для слайдера нестандартную ромбовидную форму, а на фоне задумали анимацию подъезжающего авто. Фирменный красный из логотипа заказчика определил основную гамму проекта :)
Среди промо-материалов Skyway были горячие фото с автомобилем и девушкой — они классно вписывались в слайдер альтернативной версии, добавляя перчинки :) Заказчик всё-таки выбрал более строгую основную версию без намеков на эротику, а фото с девушкой аккуратно перекочевало на страницу «О компании».
Любой дилер хочет индивидуальных условий сотрудничества, поэтому для каждого типа партнёрства мы отрисовали свою страничку, где пользователи могут подробнее узнать об условиях сотрудничества и оформить заявку через встроенную форму.
На 404-й странице спрятался своеобразный дорожный знак :)
Разработка
Фишка проекта — анимация в промо-блоке: при первой загрузке страницы выезжает автомобиль, а за ним плавно подтягиваются все элементы на странице.
В проекте полно микроанимаций: блоки на главной аккуратно всплывают при скролле, категории в каталоге при наведении ярко выделяются, а строка поиска разворачивается при клике. Категории каталога можно выбирать на странице, а можно зайти в меню-гамбургер и пройтись по категориям и подкатегориям — товары в списке удобно упорядочены в колонки.
У товаров каталога сложная иерархия по группам и категориям: уровни вложенности варьируют от 3-х до 5, но мы аккуратно разместили их так, что пользователю всегда легко и удобно найти нужное. На предпоследнем уровне в группе конкретной категории товаров (например, галогенных ламп) слева спрятан подробный фильтр. Причём, у каждой группы он свой.
Некоторые товары в группе можно не просто посмотреть, но и послушать (аккуратно — звучит громко :)).
Внутри карточки конкретного товара — его описание и подробные характеристики (список которых для каждой товарной группы заказчик может настраивать в админ-панели самостоятельно), наличие на складах и ссылка на карту «где купить».
С импортом товаров в каталог мы потрудились: в выгрузке клиента данные по каждому товару были в очень нестандартном формате, который Битрикс не понимает. Мы написали своего рода конвертер, который преобразует эти данные в нужный вид. И всё работает :)

Сергей
Разработчик
Также в самом каталоге мы предусмотрели форму обратной связи (помимо тех, что есть в разделах для партнёров) — она плавно появляется слева при клике. Внутри формы учли тип обращения (физические и юридические лица) и широту дилерской сети, добавив поле «удобное время для звонка по Мск».
К некоторым товарам в каталоге привязаны сертификаты качества — они появляются на всплывашке при клике. Это снимает вопросы о происхождении товаров и их потребительских свойствах.

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

Но хватит расписывать все прелести этого проекта словами — лучше загляните сами и выберите себе парочку автоаксессуаров, зима в разгаре :)
Готовый проект