В веб-студию 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 разработчик.
