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

Но слишком часто бывает, что раздел с продукцией давно просится пожить своей «взрослой» жизнью — вот в этот момент и приходит идея сделать для него полноценный отдельный сайт, заточенный под конкретного потребителя. Так и произошло у компании «Автоприбор», которая обратилась к нам за разработкой сайта для линейки автокомпонентов собственного производства.

У нас в студии на брейншторм перед дизайном сайта участники приходят со своими идеями, чтобы выбрать лучшие. Здесь же мы пошли дальше и, вдохновившись инсайтами от Мити Осадченко из Сбера, предложили каждому участнику использовать определенную креативную технику для поиска идей:

• Аналитик искал новые смыслы для привычных понятий: не просто каталог, а своеобразный конструктор, не просто запчасть, а полноценная деталь, без которой автомобиль не сможет работать. 
• Арт-директор ушел собирать ассоциации, характерные для автомобилей, запчастей и автомехаников: от самых популярных до неочевидных: например, «автомобиль» — это не только «скорость», «мобильность» и «престиж», но еще и «дорого», «ГАИ» и «ремонт».
• Дизайнер работал с антиассоциациями: не машина, а человек, не запчасти, а органы — иногда такое «отрицание» помогает взглянуть на объект нестандартно, «незамыленным» глазом. 
• Менеджер проекта погрузился в вопросы и поиски ответов на них: что за продукт, в каких условиях он используется, что в нем лишнего, почему его будут советовать?

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

Этот проект — тот случай, когда мы готовили визуальный бриф уже на этапе продажи: и нам, и заказчику важно было понять, насколько креативным мы видим проект. Уже тогда стало ясно: нужен технологичный и очень атмосферный сайт с немного дерзким дизайном — автотематика всё-таки!

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

«Красная» концепция дизайна главной страницы

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

Концепция дизайна главной страницы с нестандартным промоблоком

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

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

Анимации на сайте «Автоприбора»

На странице 404-й ошибки пользователя ждет классический спидометр с «гуляющей» стрелкой, где вместо максимальной скорости мы спрятали цифру 404 :)

Анимации на сайте «Автоприбора»

У завода-производителя большая номенклатура товаров. Чтобы пользователь не потерялся, а меню выглядело компактным, некоторые из них сгруппированы — так, например, маховики, подшипники и комплекты сцеплений «живут» на странице систем трансмиссии, а в тормозных системах можно найти и диски, и колодки, и барабаны.

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

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

Чтобы разложить всё по полочкам, мы создали раздел с базой знаний. Внутри — экспертные статьи на самые разные темы: от выбора тормозных колодок до гайда по автомобильным генераторам.

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

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

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