За останній час у нас вийшли два проєкти, які добре показують, наскільки різними бувають правильні рішення. В одному випадку клієнту потрібна була сторінка, яка вантажиться за секунду й відповідає на питання «скільки це коштує». В іншому — каталог на кілька тисяч товарів із фільтрами, кошиком і оформленням замовлення. Розповідаємо про обидва.
YO AUTO — лендінг для малярно-кузовного цеху
YO AUTO — малярно-кузовний цех із власною фарбувальною камерою: 12+ років у малярці, понад 2 500 пофарбованих авто. Сайту не було взагалі — усе трималося на телефоні та Viber. Через це кожен дзвінок починався з одних і тих самих питань: скільки коштує пофарбувати крило, чи збіжиться колір, скільки авто стоятиме в цеху.
Що зробили
Односторінковий лендінг із наскрізним сценарієм «побачив ціну → надіслав фото → отримав розрахунок»:
- 11 послуг із коротким описом технології та ціною «від» — від локального підфарбування скола до повного фарбування й ремонту після ДТП «під ключ»
- Окремий прайс-лист на 11 позицій, щоб не змушувати людину дзвонити заради орієнтиру
- Сценарій «Точна ціна за 30 хвилин» — три кроки з фото пошкодження у Viber замість візиту в цех
- Технічні аргументи замість гасел: підбір кольору спектрофотометром, сушка в камері при 60 °C, матеріали Sikkens, Standox, 3M, письмова гарантія до 2 років
- Процес у 5 кроків, галерея цеху, відгуки з маркою авто та видом робіт, FAQ на 6 питань
- Форма заявки з вибором послуги і дубльована кнопка Viber у кожній секції — на мобільному месенджер конвертує краще за форму
Чому статичний сайт
Тут ми свідомо не ставили CMS. Контент цеху змінюється рідко — прайс раз на пів року, — а швидкість і надійність важливіші за можливість редагувати текст із браузера. Тому сайт зібрано на чистому HTML із власним CSS і vanilla JS, без Bootstrap, Tailwind і будь-яких фреймворків:
- близько 21 КБ стилів і 1,3 КБ скриптів на всю сторінку
- шрифти Oswald і Manrope — self-hosted у woff2 з кириличним сабсетом, тобто жодного зовнішнього запиту до Google Fonts
- nginx віддає готовий HTML напряму, без PHP і бази
Сумарно менш ніж 60 КБ коду. Для СТО це принципово: більшість звернень приходить з мобільного, часто з поганим сигналом, і сторінка, яка думає три секунди, просто не доживає до прайсу.
Сервіс F1 — інтернет-магазин на 6 000+ позицій
Сайт Сервісного центру F1 ми свого часу зробили на власній StartOnline CMS — це був сайт послуг: ремонт ноутбуків, комп'ютерів, принтерів, заправка картриджів, відеоспостереження. Наступним кроком клієнт вирішив продавати обладнання, і ми добудували до сайту повноцінний інтернет-магазин.
Що всередині
Каталог розділено на чотири напрями:
- Енергонезалежність — гібридні й мережеві інвертори, зарядні станції, ДБЖ, генератори, стабілізатори, літієві та AGM/GEL акумулятори, сонячні панелі, контролери заряду, монтаж і комплектуючі
- Відеонагляд — камери, реєстратори, PoE-комутатори, диски й карти пам'яті, кабель
- Мережа та офіс — роутери й точки доступу, комутатори, серверні шафи, патч-панелі, СКС
- Офісна та комп'ютерна техніка — принтери й БФП, копіювальні апарати, картриджі, ноутбуки, монітори
Разом це понад 6 000 товарних позицій у майже тридцяти підкатегоріях.
Щоб у такому обсязі можна було щось знайти, зробили:
- Фільтри за наявністю, діапазоном ціни та виробником — із лічильником товарів біля кожного бренду
- Сортування та два режими перегляду: плитка з фото і компактна таблиця для порівняння характеристик
- Сторінки виробників — обираєте бренд і бачите все його обладнання одразу через увесь каталог
- Живий пошук у шапці з підказками під час набору
- Кошик і оформлення замовлення зі способами оплати й публічною офертою
Окремо відзначимо технічну частину: магазин виріс усередині тієї самої CMS, на якій працює сайт послуг. Він реалізований темою, без правок ядра — тобто оновлення CMS не ламають ані магазин, ані сервісні сторінки, а нові можливості платформи приїжджають на сайт клієнта разом з апдейтом.
Що з цього випливає
Два проєкти в один період — і два протилежні рішення. Лендінг за 60 КБ там, де потрібні швидкість і один чіткий сценарій дії. Каталог із фільтрами, кошиком і тисячами SKU там, де сайт має працювати як повноцінний канал продажу.
Помилки трапляються в обидва боки: важка CMS з адмінкою для сторінки, яку правлять раз на рік, і навпаки — спроба продавати шість тисяч товарів через статичний прайс у PDF. Тому ми починаємо не з платформи, а з питання, що саме має статися після того, як людина відкрила сайт.
Обидві роботи є в портфоліо. Якщо у вас схожа задача — напишіть нам, підкажемо, який варіант має сенс саме у вашому випадку.