ProAuto — концепт сайта магазина автотоваров
ProAuto Concept — наш дизайн сайта магазина автотоваров в формате концепта: главная страница, где аккумуляторы, масла, расходники и сервис собраны в одну ленту. Мы проработали семь секций, фотоплитки категорий и красно-графитовый визуальный язык.
Задача
ProAuto Concept — наш дизайн-концепт, а не заказ клиента и не запущенный магазин. Макет показывает, какой может быть главная страница интернет-магазина автотоваров: аккумуляторы, моторные масла, расходники, автохимия и аксессуары плюс сервис — консультации, диагностика и обмен старых аккумуляторов. Страница рассчитана на владельцев легковых автомобилей, которым нужен и товар, и совет.
В этом концепте мы искали, каким может быть дизайн сайта магазина автотоваров, который продаёт не только товары, но и помощь с выбором. Ассортимент такого магазина широкий и разнородный — аккумуляторы, моторные масла, расходники, автохимия, аксессуары, — и главная страница должна за несколько секунд показать, что здесь есть и с чего начать.
Аккумулятор или масло редко выбирают по картинке: автовладелец сомневается, подойдёт ли товар к его машине, и хочет спросить специалиста. Значит, консультация, диагностика и обмен старого аккумулятора должны стоять на главной рядом с каталогом, а не теряться во внутренних разделах.
Фотографии двигателей, масел, инструментов и автосервиса сами по себе яркие и разные по цвету и свету. Интерфейсу нужен был сдержанный и узнаваемый визуальный язык, который соберёт эти снимки в единую систему, будет выглядеть технично и не станет спорить с товаром.
Кроме того, концепт должен был поддерживать два сценария сразу. Одни покупатели готовы найти товар и положить его в корзину сами, другие хотят, чтобы им перезвонили и помогли. Страница обязана вести к обоим действиям с любого экрана и при этом не терять служебные разделы: лицензии, партнёров, реквизиты, вакансии, акции и статьи.
Решение
Мы построили главную как маршрут от предложения к сервису: слайдер, полоса преимуществ, плитка категорий, услуги, рассказ о компании, новости и лента партнёров. Тёмные и светлые секции чередуются, поэтому длинная страница читается блоками, а красные акценты ведут взгляд к кнопкам.
Автовладелец сразу видит главное: наличный и безналичный расчёт, техническую помощь, проверенную продукцию и часы работы с 9:00 до 18:00. Категории открываются крупными фотоплитками, а три услуги объясняют, зачем покупать именно здесь. Кнопка «Заказать звонок», поиск и корзина всегда в шапке, а подвал дублирует навигацию четырьмя колонками.
Макет собран в Figma как десктопная главная страница на повторяющихся элементах: кнопки с красной обводкой, иконки в рамках со скошенными углами, заголовки с красной линией снизу, карточки новостей с датой и стрелкой. Единые элементы делают страницу цельной и упрощают перенос концепта в вёрстку.
Слайдер с главным предложением
Первый экран занимает слайдер на четыре слайда: крупный заголовок о надёжных аккумуляторах на фоне моторного отсека в красно-чёрной гамме и кнопка с красной обводкой. Индикаторы-полосы внизу показывают, сколько предложений в ротации.
Четыре преимущества магазина
Под слайдером идёт полоса из четырёх пунктов с линейными иконками: наличный и безналичный расчёт, техническая помощь и консультация, только проверенная продукция и связь с 9:00 до 18:00. Первый пункт выделен красной плашкой со скошенным углом.
Плитка категорий автотоваров
Раздел «Автотовары: аксессуары, расходники и многое другое» собран из шести крупных фотоплиток в сетке три на два. При наведении плитка затемняется и показывает название категории и кнопку — в макете это состояние показано на плитке «Аккумуляторы».
Услуги рядом с товарами
Блок «Услуги» выводит на главную бесплатную консультацию специалиста, обмен старого аккумулятора со скидкой на новый и бесплатную диагностику. Иконки в фирменных рамках и фото мастера с планшетом на фоне красных треугольников делают сервис заметным, а не второстепенным.
Компания, новости и партнёры
Раздел «О компании» соединяет портрет, короткий текст и кнопку на фоне автосервиса. Ниже идут три новостные карточки с датой, заголовком и стрелкой, кнопка перехода ко всем новостям и карусель логотипов партнёров со стрелками.
Красно-графитовый визуальный язык
Чёрный и графитовый фон, красные акценты, скошенные углы у плашек и рамок, декоративные треугольники и заголовки заглавными буквами с красной линией снизу повторяются во всех секциях. Кнопки прокрутки вверх и вниз помогают перемещаться по длинной странице.
Результаты
Главные итоги проекта в цифрах.
- 7Секций главной страницы
Слайдер, преимущества, категории, услуги, о компании, новости и партнёры — между шапкой и подвалом.
- 6Фотоплиток категорий
Крупные плитки ведут в разделы каталога, а при наведении показывают название и кнопку.
- 3Услуги на главной
Консультация специалиста, обмен старого аккумулятора и диагностика стоят рядом с товарами.
- 10 дн.Срок работы над концептом
Структура страницы, визуальный язык и макет в Figma заняли десять дней.
Дизайн и интерфейсы
Ключевые экраны и интерфейсы проекта.
Технологии в проекте
Стек, на котором мы строили решение под задачи клиента.
- Figma
Готовы стать следующим кейсом?
Расскажите о задаче — менеджер соберёт команду, посчитает смету и пришлёт коммерческое предложение в первый час после заявки. Без обязательств и без рассылок.