Fane Beauty
Презентационный сайт с прицелом на интернет-магазин для премиального бренда профессиональной косметики для салонов красоты
Fane Beauty
Презентационный сайт с прицелом на интернет-магазин для премиального бренда профессиональной косметики для салонов красоты
Если бы Стив Джобс думал, что ниша персональных компьютеров уже занята, у нас вряд ли бы появилось несколько поколений Macbook. Если бы производитель самого вожделенного женского фена Dyson был уверен, что для сушки волос уже всё придумано другими людьми, женщины бы не лезли в драку в любые конкурсы, где разыгрывается тот-самый-фен. Если бы создатели Harley Davidson равнялись на других производителей мотоциклов, то вряд ли стали бы легендой.
Потому что, чтобы стать лучшим, нужно нарушать правила и ломать стереотипы. Как это делает Fane Beauty — новый бренд косметики для салонов красоты, который доказывает каждой клеточкой: лучшая продукция для парикмахеров может создаваться в России.
Потому что, чтобы стать лучшим, нужно нарушать правила и ломать стереотипы. Как это делает Fane Beauty — новый бренд косметики для салонов красоты, который доказывает каждой клеточкой: лучшая продукция для парикмахеров может создаваться в России.
- Fane Beauty — первый российский премиальный бренд профессиональной косметики для салонов красоты. Команда бренда — эксперты с многолетним опытом работы в глобальных косметических корпорациях, а его глава Станислав Васильев когда-то занимал руководящие должности в российских представительствах компаний с громкими именами: Henkel, Paul Mitchell, Revlon Professional Brands & Elizabeth Arden и Wella.
Вместе создатели бренда Fane Beauty хотят изменить правила игры на рынке профессиональной косметики и доказать, что качественные и востребованные парикмахерские продукты могут создаваться в России, обладая при этом безграничными возможностями цвета и эффективными формулами.
Чтобы раскрыть идею бренда, познакомить с ним потенциальную аудиторию в цифровом пространстве и презентовать продукцию, Fane Beauty требовался сайт. Для скорейшего запуска проекта работу поделили на этапы: сначала — создаем сайт-витрину, позже — делаем полноценный интернет-магазин.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3938-3932-4464-a461-636330363563__-__empty__-.png)
Елена
Продакшн-директор и руководитель проекта
— Заказчик пришёл к нам по рекомендации другого клиента студии. И я с первого взгляда поняла, что никому не хочу отдавать этот проект, потому что из него может получиться потрясающий дизайнерский кейс (что и вышло).
Пожелания заказчика были максимально конкретными: слегка дерзкий стиль и лоск идеально окрашенных волос, как у профессиональных линеек косметики.
База для визуала тоже была — заказчик предоставил достаточно подробный гайдбук с фирменными цветами и примерами продуктов. Забавно, что до этапа дизайна мы видели продукцию только в гайдбуке, поэтому действовали почти наощупь.
Пожелания заказчика были максимально конкретными: слегка дерзкий стиль и лоск идеально окрашенных волос, как у профессиональных линеек косметики.
База для визуала тоже была — заказчик предоставил достаточно подробный гайдбук с фирменными цветами и примерами продуктов. Забавно, что до этапа дизайна мы видели продукцию только в гайдбуке, поэтому действовали почти наощупь.
Дизайн
За основу мы взяли цветовую палитру упаковок клиента из гайдбука, но цвета — «докрутили».
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3732-3335-4165-b034-656366386233__-__empty__fane_guidebook_-min.png)
Дизайн и палитра упаковок из гайдбука Fane Beauty
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3734-6638-4739-a264-643039326338__-__empty__-min_3.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3938-3932-4464-a461-636330363563__-__empty__-.png)
Елена
Продакшн-директор и руководитель проекта
— Я дала дизайнеру карт-бланш на использование 3D: мы нашли «модные» дерзкие референсы, а за основу взяли уже смоделированные заказчиком модели для каждой из трёх форм баночек, которые заказчик зовет «пэкшотами». Мы обработали их, выставили свет, поработали с ребрами и с формой крышечек, добавили реализма, перенесли этикетки и наименования. Готовые модели отправились в промо-блок.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild6637-6361-4664-b464-363739643730__-__empty__dasha-photoroompng-p.png)
Дарья
Разработчик
— Для 3D-моделей мы традиционно использовали Spline — инструмент, который позволяет дизайнеру не просто создавать 3D-модели в визуальном редакторе, но и реализовывать механику взаимодействия с пользователем. Например, анимировать объекты по движению курсора, клику или скроллу. Верстальщику при этом не придется отлаживать отображение модели в браузере — достаточно только подключить модель, используя специальный плагин.
На альтернативной версии там, где у нас не хватало моделей упаковки или контента, мы использовали в качестве заглушки контент конкурента, чтобы на примере показать, как работать с изображениями и как фотографировать продукцию под такой концепт.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild6532-6334-4536-a538-613638323765__-__empty__-min_4.png)
После демонстрации обеих версий мы получили восторженные отзывы от заказчика. Но в итоге ребята решили сбавить обороты: уменьшить заголовки, добавить цветные плашки и убрать цветные бутылочки. Так финальная версия дизайна стала более пастельной и спокойной. Претерпел изменения и промоблок.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3566-6237-4261-b863-323236306637__-__empty__3_-min.png)
Выше — варианты промоблока, ниже — его финальная версия
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3030-3362-4239-b836-666536373761__-__empty___-min_1.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3938-3932-4464-a461-636330363563__-__empty__-.png)
Елена
Продакшн-директор и руководитель проекта
— Нам крупно повезло с заказчиком: проект по мере разработки постепенно обрастал контентом — клиент провел две невероятных фотосессии, результаты которых сразу можно было использовать на дизайне.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3739-6466-4337-b438-666330306563__-__empty__fane_20100729_1_1-mi.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild6636-6136-4534-b635-366331366366__-__empty__fane_20102341_1_1_2-.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild6332-3439-4166-a138-653563626438__-__empty__6g1a8088_1-min.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild6534-3964-4732-b565-303630663831__-__empty__fane_20101513_1_1_1-.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3233-3764-4566-a134-306339656539__-__empty__6g1a8336_1-min.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3130-3664-4439-a566-316431643335__-__empty__fane_20101925_1_1_1_.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild6433-6132-4739-a539-323565653335__-__empty__6g1a5784_1-min.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3438-6562-4331-b466-626237316531__-__empty__fane_20102180_1_1-mi.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild6463-3066-4533-b466-636561336339__-__empty__6g1a6206_1_1-min.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3966-3061-4164-b532-356165656437__-__empty__6g1a6481_1_1-min.png)
В этом проекте много внимания уделено не только визуалу, но и анимации: по скроллу на протяжении всей главной (и не только) происходит интерактив.
Необычная структура каталога
Уже на агрегации требований мы выяснили, что задача с каталогом предстоит нетривиальная. У клиента в планах создать полноценный е-коммерс с карточками товаров, корзиной, оформлением заказа и прочими важными для интернет-магазина штуками.
Но при этом некоторые категории товаров нуждаются в особой презентации — им попросту мало стандартной детальной страницы товара, чтобы отразить все преимущества. Поэтому для таких продуктов нужно было предусмотреть отдельные лендинги, которые в случае необходимости могут служить клиенту как настоящие посадочные страницы для его бизнес-задач. Ещё один нюанс — в некоторых категориях может быть сразу несколько типов товара: например, краска в формате крема и пудры, и для обеих нужен свой лендинг.
Но при этом некоторые категории товаров нуждаются в особой презентации — им попросту мало стандартной детальной страницы товара, чтобы отразить все преимущества. Поэтому для таких продуктов нужно было предусмотреть отдельные лендинги, которые в случае необходимости могут служить клиенту как настоящие посадочные страницы для его бизнес-задач. Ещё один нюанс — в некоторых категориях может быть сразу несколько типов товара: например, краска в формате крема и пудры, и для обеих нужен свой лендинг.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3938-3932-4464-a461-636330363563__-__empty__-.png)
Елена
Продакшн-директор и руководитель проекта
— Несколько страниц важно было сделать посадочными, чтобы при дальнейшей SEO-оптимизации сайта заказчик мог сразу по конкретному запросу посадить нужную целевую аудиторию на нужную страницу. И при этом, чтобы было ощущение, что пользователь находится не на «второстепенной» странице большого сайта, а на специально созданном лендинге.
Как уместить столь разную подачу информации в одном каталоге? Мы решили: всё, что касается окрашивания — это отдельный мир для парикмахеров, поэтому не должно подчиняться общей структуре каталога и попадать в список товаров. Для этой категории мы предусмотрели разводящую страницу, которая ведет на три отдельных лендинга.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3439-3631-4538-a535-643939356636__-__empty__-min.png)
Кроме «каталожных» страниц, мы также собрали в виде отдельного лендинга страницу о компании.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3834-3037-4662-b635-666533376435__-__empty__3_-min_1.png)
Стандартные страницы каталога — не менее красивые и продуманные. Здесь мы сделали чёткий фильтр в лучших традициях самого хайпового онлайн-магазина косметики «Золотое яблоко»: такой же стильный, такой же удобный (или лучше).
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild6231-6238-4536-b038-303834633230__-__empty__-min.png)
Умный на сайте и поиск — он ищет не только по названиям, но и по текстам привязанных к товару сущностей: его торговых предложений и инструкций.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3537-3332-4463-b962-353366346266__-__empty__image_35-min.png)
Пока мы думали над структурой каталога, крутилось колесо SCRUM-разработки с тремя параллельными этапами: за это время разработчики сверстали и собрали главную страницу, формы обратной связи и типовую текстовую страницу для политик конфиденциальности и обработки персональных данных. А заказчик быстро наполнил все страницы контентом, и мы отправили собранное в релиз.
URL товара как первоисточник
Запуск бренда происходил параллельно с созданием сайта: у заказчика на тот момент не было системы артикулов товара, а этикетки для баночек — только печатались. Поэтому важно было связать товар и страницу на сайте, пока не имея уникального идентификатора товара.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild6233-3265-4562-b236-313833346335__-__empty___.png)
Иван
Технический директор
— Чтобы упростить задачу заказчику, мы предложили примерный формат артикула: <код типа товара>-<код линейки товара>-<номер товара по порядку в этой линейке>, чтобы это выглядело как-то так: CH-SHP-123. Также мы задали формат для будущих ссылок: fanebeauty.com/d/<артикул>, чтобы потом, во время запуска сайта, было легко сделать редирект с такой короткой ссылки на реальную.
Редизайн: успеть за 60 секунд
Заказчик заполнял сайт контентом самостоятельно, поэтому по итогу нас ждал сюрприз: вместо белых баночек все товары внезапно оказались с яркими обложками, от которых клиент изначально отказался.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1721376632/tild3938-3932-4464-a461-636330363563__-__empty__-.png)
Елена
Продакшн-директор и руководитель проекта
— Увидев это, я немного поседела :) Я, так как душой очень переживала за проект, — не смогла оставить всё, как есть. Поэтому вместе с арт-директором мы в онлайн-режиме заменили на макетах контент на реальный и создали свой набор подложек, которые подходят почти под любые этикетки товаров:
— под холодные фоны;
— под теплые фоны;
— под чисто белые баночки.
После мы показали заказчику наглядное до-после — и случился самый быстрый редизайн на проекте :) Спасибо Fane Beauty за суперотзывчивость.
— под холодные фоны;
— под теплые фоны;
— под чисто белые баночки.
После мы показали заказчику наглядное до-после — и случился самый быстрый редизайн на проекте :) Спасибо Fane Beauty за суперотзывчивость.
Подложки: было-стало