Создание сайта-конструктора косметических продуктов

Отправная точка

Необходимо разработать интернет-магазин по продаже скрабов из экзотических компонентов и встроить в него конструктор, позволяющий пользователям создавать средства по собственной рецептуре из представленных ингредиентов. Сайт призван привлечь девушек и молодых женщин от 18 до 35 лет, которые часто пользуются соцсетями, прежде всего Instagram.

На сайте планировалось продавать готовые скрабы для лица и тела премиум-класса, однако главная его особенность — возможность собрать средство из представленных ингредиентов, и дать ему свое название.

Разработка дизайна

На сайте представлено 8 типов основ, каждая из которых имеет свой цвет. Мы посчитали, что будет интересно сделать акцент на этой особенности продукта, но были сомнения, получится ли вписать в дизайн 8 цветов, и при этом не сделать сайт чересчур пестрым. Это могло испортить общее впечатление и не способствовало бы восприятию бренда как премиального.

В итоге:

• в списке категорий на главной странице каждый раздел получил индивидуальный цвет фона, в таком же цвете были выполнены и страницы товаров;
• при наведении на названия разделов в верхнем всплывающем меню они также подсвечивались соответствующим цветом;
• на этапе сбора своего скраба фоновый цвет всплывающей подсказки имеет цвет основы, а фоновый цвет страниц на последующих этапах меняется в зависимости от основы, которая была выбрана.

Пересмотрен дизайн карточки товара в каталоге. Отметим, что данное решение отличается от стандартной сетки сайтов, разработанных на Canape CMS. Мы задались целью сделать карточки максимально информативными, но при этом выдержать их в общей стилистике сайта.

Главная страница

Каталог

Детальная страница каталога

Создание конструктора скрабов

Для этого проекта мы разработали конструктор. Он позволяет сформировать заказ из нескольких товаров в одну позицию и дать этой позиции уникальное имя.

Уникальный продукт можно создать за три шага.

• Шаг 1. Пользователь выбирает одну из 8 категорий основ для своего скраба. При этом контентная область закрашивается в цвет выбранной категории.
• Шаг 2. Пользователь видит список основ в выбранной категории и выбирает одну из них. После того как основа скраба выбрана, он перемещается на третий этап.
• Шаг 3. На этом этапе у нас появляется список ингредиентов и мини-корзина. Здесь пользователь может добавить от 1 до 6 ингредиентов, выбранные элементы перемещаются в мини-корзине внизу страницы. Автоматически подсчитывается стоимость продукта.

Выбор ингредиентов

Выбор компонента

Выбор ингредиентов

Выбор ингридиентов

Корзина

Адаптивная версия

Дизайн сайта, рассчитанный на небольшие мониторы, планшеты и мобильные телефоны, был создан на базе основной десктопной версии и функционально ничем ей не уступает.

Особенности разработки

Кроме конструктора для интернет-магазина был разработан модуль отложенных товаров (WishList).

Модуль позволяет добавлять товары в список желаний в долговременной памяти сайта. Пользователь может просматривать и редактировать его на любом компьютере, залогинившись под своей учетной записью, а также переносить товары из этого списка в корзину, чтобы купить их.

Нюансы проекта

Клиенту требовалось получить готовый сайт через месяц, поэтому мы не стали откладывать программирование до готовности всех макетов. Разработчиков подключили, когда основной дизайн уже был проработан, но оставалось отрисовать мобильную версию. Наложение этих работ повлекло некоторые трудности, в частности, были случаи, когда программистам приходилось додумывать отдельные моменты, а затем вносить корректировки в написанное решение.

Чтобы пользователю было понятно, как взаимодействовать с конструктором, мы оставили всплывающие окна в мобильной версии сайта. Однако на отстройку корректной работы подсказок ушло довольно много времени.

Публикация сайта

В результате был создан интернет-магазин с современным дизайном, отвечающий требованиям поисковых систем. Сайт адаптирован под мобильные устройства и планшеты, дает полную информацию о продукте и с помощью конструктора позволяет собрать средство по индивидуальной рецептуре.