Сайт для бренда ухода Wistery
Интерактив, магия и эстетика — от первого скролла до последнего штриха
О клиенте
Wistery — это не просто бренд косметики. Это пространство, где уход за собой превращается в личный ритуал. Стильный, визуально выверенный бренд соединяет таинственность, эстетику и самовыражение. Каждый продукт здесь не только заботится о коже, но и становится частью образа.
Сегодня бренд Wistery активно выходит на маркетплейсы, наращивает онлайн-присутствие и стремится выстроить осознанную, эстетичную коммуникацию с аудиторией.
Сегодня бренд Wistery активно выходит на маркетплейсы, наращивает онлайн-присутствие и стремится выстроить осознанную, эстетичную коммуникацию с аудиторией.
Задачи
- Разработать сайт под ключ и реализовать его на платформе Tilda.
- Разработать дизайн на основе бренд-бука, который будет передавать атмосферу магии и таинственных ритуалов.
- Использовать принцип разработки mobile first — то есть мобильную версию необходимо было разработать в первую очередь.
- Добавить каталог товаров, карточки со ссылками на маркетплейсы.
- Настроить лёгкую и ненавязчивую анимацию,которая будет поддерживать атмосферу.
- Реализовать интерактивный блок с промокодом, чтобы увеличить вовлеченность и среднее время на странице.
Что было
сделано
Анализ и исследование:
- Проведен анализ целевой аудитории и конкурентов.
- Изучена концепция бренда и и форма продаж, которую клиент хотел отобразить на сайте.
- На сайте показываем продукцию далее ведем покупателей на маркетплейсы для совершения покупок
- Разработана структура лендинга: прототипы для мобильной и десктопной версий, которые включают каталог с карточками товаров.
- Разработан дизайн лендинга на основе фирменного стиля.
- Дизайн адаптирован под мобильные устройства и планшеты.
- Сайт сверстан на платформе Tilda, адаптирован под мобильные устройства и планшеты.
- Настроен и подключен каталог товаров.
- Настроена базовая SEO-оптимизация.
Прототип
В разработке применили принцип mobile first, так как более 80% трафика ожидается с телефонов. Поэтому дизайн для смартфонов был в приоритете, с короткими блоками, крупными элементами и продуманной навигацией.
Далее разрабатывалась версия для десктопа, расширенная визуально, с теми же сценариями.
Далее разрабатывалась версия для десктопа, расширенная визуально, с теми же сценариями.
Визуальные
решения
Дизайн разработан на основе фирменного стиля, который включает в себя разные оттенки фиолетового и контрастный зелёный.
Для фона использовали плавные градиенты при приходах между блоками, для того чтобы больше передать атмосферу. Заказчик специально сделал тематическую фотосессию для сайта и маркетплейсов. Фото отлично дополняют атмосферу ритуалов.
Из гайд бука взяли фирменные стикеры и разместили их на сайте: где-то они уравновешивают композицию и служат как декоративные элементы, где-то они используются как разделители контента, где-то как дополнение к заголовкам и тексту.
Добавили легкую анимацию: плавные появления элементов, двигающиеся облака на главном экране, для того чтобы слегка оживить сайт.
Для фона использовали плавные градиенты при приходах между блоками, для того чтобы больше передать атмосферу. Заказчик специально сделал тематическую фотосессию для сайта и маркетплейсов. Фото отлично дополняют атмосферу ритуалов.
Из гайд бука взяли фирменные стикеры и разместили их на сайте: где-то они уравновешивают композицию и служат как декоративные элементы, где-то они используются как разделители контента, где-то как дополнение к заголовкам и тексту.
Добавили легкую анимацию: плавные появления элементов, двигающиеся облака на главном экране, для того чтобы слегка оживить сайт.
Детали
Стояла задача придумать лёгкий интерактив с для блока с промокодом, чтобы повысить вовлеченность и время пользователя на сайте.
Решение было следующим: промокод мы закрыли фирменными стикерами. Пользователем сайта предлагаем перетащить элементы и самостоятельно найти промокод на скидку 10%. Получилась достаточно простая и лёгкая геймификация, которая сразу интуитивно считывается и не заставляет делать пользователя что-то сложное.
И при этом мы не просим пользователя оставлять свои персональные данные, он сразу может получить промокод на свою первую покупку.
Решение было следующим: промокод мы закрыли фирменными стикерами. Пользователем сайта предлагаем перетащить элементы и самостоятельно найти промокод на скидку 10%. Получилась достаточно простая и лёгкая геймификация, которая сразу интуитивно считывается и не заставляет делать пользователя что-то сложное.
И при этом мы не просим пользователя оставлять свои персональные данные, он сразу может получить промокод на свою первую покупку.
Выводы и результаты
- Сайт точно передаёт ДНК бренда — эстетика, уход, магия.
- Повысилась глубина просмотра и вовлечённость (особенно благодаря блоку с промокодом).
Понравился сайт?
