До веб-студії Rubik звернулася команда бренду Marey — виробника матеріалів для нарощування й ламінування вій та оформлення брів. Бренд розвивається одразу в трьох напрямах: продає матеріали майстрам, навчає їх у власній школі й приймає клієнтів у студії.
Потрібен був один сайт, де всі три напрями працюють разом і підсилюють один одного, а преміальний стиль бренду відчувається з першого екрана. Задачі проєкту:
Складний преміальний дизайн: блоки, що з’їжджаються й роз’їжджаються під час прокрутки, анімації, великі фото — і все це має працювати плавно на комп’ютері та смартфоні.
Магазин для майстрів: вії з різними вигинами, довжинами й товщиною, клеї, засоби для ламінування та брів — покупець має швидко перейти до потрібного варіанта, не гортаючи десятки схожих карток.
Школа: окремі сторінки базових і професійних курсів із програмою, тривалістю, тренером, ціною та заявкою на навчання.
Студія: сторінки процедур з описом і можливістю записатися — для клієнтів, які приходять на нарощування й ламінування.
Зручне керування: команда бренду має самостійно додавати товари, курси й послуги без допомоги програміста.
Сайт Marey ми розробили на OpenCart приблизно за два місяці, роботу розпочали у квітні 2023 року.
Спершу розділили сайт на три логічні частини — магазин, школу й студію — та продумали переходи між ними: майстер, що купує матеріали, бачить курси, а учень курсу — матеріали, з якими працюватиме.
Найскладніша частина проєкту. Анімовані блоки, слайдери й «роз’їжджаючі» елементи мали однаково добре виглядати на великих моніторах і на смартфонах, не гальмуючи сторінку. Ми зверстали кожен блок окремо й адаптували анімації під мобільні пристрої.
Налаштували категорії вій, клеїв, засобів для ламінування та брів. Щоб покупець не губився серед схожих позицій, зробили зв’язку товарів за параметрами — він перемикається між варіантами прямо в картці.
Створили окремі шаблони сторінок курсів і послуг: програма, тривалість, тренер, ціна та форма заявки. Нові курси й процедури команда додає з адмінки за кілька хвилин.
Перевірили анімації та форми на різних пристроях і браузерах, протестували оформлення замовлення й заявки на навчання та запустили сайт.
Marey отримав сайт, де інтернет-магазин, школа й студія працюють як єдине ціле й підкреслюють преміальний рівень бренду.
Преміальний дизайн з анімаціями: сайт виглядає так само дорого, як продукція бренду, і при цьому залишається швидким.
Вибір вій у кілька кліків: зв’язані товари за вигином, довжиною й товщиною — покупець знаходить свій варіант без пошуку по каталогу.
Сторінки курсів: програма, тренер, тривалість, ціна й заявка на навчання — майстер отримує всю інформацію в одному місці.
Студія з окремими послугами: клієнти бачать процедури й залишають заявку на запис.
Самостійне керування: команда сама додає товари, курси й послуги з адмінки.
Командою Rubik було відібрано основні розміри екранів пристроїв, для зручного користування веб-сайтом без втрати функціональності та привабливості.
Сайт Marey працює на OpenCart з окремими шаблонами для магазину, школи й студії.
Базова платформа: OpenCart 2.3.
Інструменти та стек: PHP, MySQL, HTML5 / CSS3, CSS-анімації, JavaScript (jQuery, AJAX).
Каталог: зв’язка товарів за параметрами — вигин, довжина, товщина.
Розділи: магазин, школа з курсами й заявкою на навчання, студія з послугами.
Адаптивність: мобільна версія складного анімованого дизайну.
Склад проєктної групи: Project Manager, Front-end розробник, Back-end розробник.
