+38 (093) 911 53 51
Кейс · Інтернет-магазин електромобілів

Дизайн автосалону і блог, який продає авто

Спроєктували з нуля дизайн сайту мережі автосалонів електромобілів, а згодом додали власний блог на OpenCart — з картками авто прямо у статтях і збереженням усіх пошукових адрес.

НішаАвтосалони електромобілів
ПлатформаOpenCart 3 · Figma
СтрокБлог — 2 тижні до запуску
Рік2024 · 2026
https://electri4ka.ua
Electri4ka — каталог «Авто під замовлення» з фільтрами (макет Figma) Electri4ka — стаття блогу з hero-банером «NIO ET5 чи Tesla Model 3» Electri4ka — блок «Авто з цієї статті»: картки автомобілів у блозі Electri4ka — картка авто в наявності (макет Figma) Electri4ka — стрічка блогу з пошуком, сортуванням і рубриками-чіпами Electri4ka — каталог «Авто в наявності» (макет Figma)

1Задача

Electri4ka продає електромобілі в салонах шести міст України. Спочатку потрібен був дизайн сайту з двома сценаріями покупки — «Авто в наявності» та «Авто під замовлення» з каталогом комплектацій. Пізніше — перетворити сухий FAQ-розділ із 200+ сторінок на живий блог, не втративши жодної адреси, що вже в індексі Google.

2Рішення

Намалювали у Figma повний комплект сторінок для десктопа і смартфона — головну, два каталоги, дві картки авто, порівняння, сторінку про компанію та мобільне меню. Для блогу написали власний модуль під OpenCart замість готового: стрічка, рубрики за брендами, теги, фільтр, а головне — картки автомобілів з каталогу просто в тексті статті. Старі статті перенесли скриптом зі збереженням URL 1-в-1.

3Результат

Сайт працює на нашому дизайні, а розділ «Блог» став інструментом контент-маркетингу: 218 статей у 7 рубриках на старті, 665 карток авто, які ведуть на сторінки моделей, коректна мікророзмітка для Google. Клієнт уже сам наповнює блог — сьогодні в ньому понад 240 статей і 10 рубрик.

Що зробили

Дизайн сайту (2023–2024)

  • Повний комплект макетів у Figma: головна, каталог «Авто під замовлення» (комплектації), каталог «Авто в наявності», картки авто, порівняння, «Про компанію».
  • Два каталоги під два сценарії покупки: конкретне авто на складі з фото і ціною — або комплектація з характеристиками, яку привозять під клієнта.
  • Картка авто: галерея, запас ходу, потужність, привід, ціна у доларах і гривнях, кнопки замовлення і розрахунку кредиту.
  • Мобільна версія 360 px для ключових сторінок і окреме мобільне меню.
  • Погодження в кілька ітерацій із відеокоментарями по кожному макету.

Власний модуль блогу (2026)

  • До нас «блог» був FAQ-сторінкою зі списком із 200+ інформаційних сторінок OpenCart — усі в індексі Google. Готові модулі не підійшли (прив’язка до ліцензії чужого шаблону, старі версії OpenCart), тому написали свій.
  • Стрічка, рубрики з деревом, теги, фільтр (пошук, сортування, чіпи-розділи), hero-банери, бейджі рубрик і тегів на картках, налаштування в адмінці.
  • Головна фішка — картки автомобілів з каталогу в тексті статті: фото, ціна, запас ходу, потужність і перехід на сторінку моделі.
  • SEO: ЧПУ, мета-теги, canonical, Open Graph, JSON-LD BlogPosting, статті у sitemap.
  • Міграція 222 статей скриптом зі збереженням адрес 1-в-1 (редиректи не знадобилися), 7 рубрик за брендами, фото, теги і 665 прив’язок авто — автоматично.

Як це виглядає

Макети з Figma (дизайн 2023–2024) і живий сайт із блогом (2026). Довгі сторінки прокручуються при наведенні.

Головна на сайті — реалізована за нашим макетом: підбір авто, квіз, тест-драйв
Головна на сайті — реалізована за нашим макетом: підбір авто, квіз, тест-драйв
Каталог «Авто під замовлення» — комплектації з фільтрами (макет)
Каталог «Авто під замовлення» — комплектації з фільтрами (макет)
Мобільна версія 360 px — головна (макет)
Мобільна версія 360 px — головна (макет)
Картка авто в наявності — характеристики, галерея, ціна в $ і ₴ (макет)
Картка авто в наявності — характеристики, галерея, ціна в $ і ₴ (макет)
Порівняння моделей за ключовими характеристиками (макет)
Порівняння моделей за ключовими характеристиками (макет)
Мобільний каталог «Під замовлення» (макет)
Мобільний каталог «Під замовлення» (макет)
Стрічка блогу на сайті — hero-банер, пошук, сортування, рубрики-чіпи, картки статей
Стрічка блогу на сайті — hero-банер, пошук, сортування, рубрики-чіпи, картки статей
Рубрика «Відповіді на питання про BYD» — усі статті бренду на старій адресі
Рубрика «Відповіді на питання про BYD» — усі статті бренду на старій адресі
Блог на смартфоні — картки авто зі статті, ціна у $ і ₴, характеристики
Блог на смартфоні — картки авто зі статті, ціна у $ і ₴, характеристики

Наведіть курсор на знімок — він прокрутиться. Торкніться знімка, щоб відкрити його повністю.

Як ішла робота

  1. 1Бриф і аудит: що лежить на /blog, скільки сторінок в індексі, що не можна зламати
  2. 2КП і ТЗ: погодили функціонал — прив’язка авто, рубрики, вигляд карток
  3. 3Макети у Figma з ітераціями погодження
  4. 4Розробка на повній тестовій копії сайту — бойовий не чіпали
  5. 5Перенос на бойовий із резервними копіями, перевірка всіх адрес
  6. 6Поліровка за зворотним зв’язком протягом місяця після запуску
218
статей перенесено без втрати адрес
665
карток авто у статтях
7
рубрик за брендами на старті
15
екранів дизайну: 8 десктоп + 7 мобільних

Що всередині

OpenCart 3FigmaВласний модуль блогуМіграція 218 статейSEO-адреси 1-в-1JSON-LD BlogPostingOpen GraphКартки авто у статтяхHero-банериАдаптив 1920 / 360Тестова копія перед релізом

Потрібен такий сайт або блог?

Розкажіть про свій бізнес — за 1 день порахуємо вартість і строки дизайну чи доопрацювання магазину.

Обговорити проєкт