Творим историю! Почему дизайн для Clingr принес нам "Cайт дня" на Awwwards

Сделали сайт о совершенно новом утилитарном продукте настолько красивым, что он выйграл “Сайт дня” на Awwwards! Как? Соединили эмоционально точный визуал, техническое новаторство и действенный сторителлинг. Да, это было головокружительно сложно, но челлендж есть челлендж.

Наш сайт представляет Clingr — освобождающий руки и время фиксатор для фена, который легко закрепить на любой поверхности, чтобы одновременно сушить, расчесывать и укладывать волосы. Эта новинка сдувает как ветром устаревшие стереотипы из серии ”красота требует жертв”, а мы придаем посвященному ей лендингу объем и блеск. Читайте, как мы использовали “стайлинговые средства” в веб-дизайне для того, чтобы он получил свежий образ (ну, или модный look).

Мы — Vide Infra, занимаемся дизайном и разработкой диджитал-продуктов, которые регулярно собирают награды. Делаем бесподобные мобильные и веб-приложения, маркетплейсы и большие корпоративные сайты. Входим в топ-10 Рейтинга Рунета по креативности и топ-40 мирового рейтинга Awwwards. О наших проектах и новостях, читайте на videinfra.ru

Clingr вышел на рынок бьюти-гаджетов с элегантно сформулированным конкурентным предложением: освободите руки для того, чтобы создать с их помощью ослепительную прическу. Инновационный фиксатор для фена можно в два касания закрепить на столе, на стене или зеркале, пока руки совершают ежедневное колдовство над волосами. При этом фен будет находиться на безопасном расстоянии, чтобы температура воздушного потока не превышала 50 градусов. Так волосы сохранят естественное сияние и упругость.

Clingr — не люксовый продукт из мира голливудской роскоши. Клиент видит его новаторство утилитарно-эргономичным, подчеркивая простоту и универсальность использования. Этот гаджет идеально вписывается в быт каждой женщины, позволяя ей поддерживать красоту и менять свой образ в любой ситуации: дома, в фитнес-клубе или в путешествии.

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

Clingr предоставил богатую коллекцию фото и видео, что помогло нам выбрать тональность общего нарратива и “откалибровать” эмоции. Фотографии Clingr — это не просто фактическое изображение продукта и портреты счастливых молодых женщин, у которых он есть.

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

Видеоматериалы усилили это впечатление. Фотографии фиксируют моменты эмоционального контакта с продуктом, а видео отображает позитивный пользовательский опыт. Наглядные ролики показывают процесс установки фиксатора на самых разных поверхностях — от стеклянного зеркала до деревянной двери. Такие видео передают идею вариативности, устойчивости и надежности, опять же в сочетании с легкостью.

К тому же, по мысли клиента, они помогают создать ощущение свободы, ведь фиксатор для фена устраняет изматывающую “парикмахерскую многозадачность” , когда в одной руке средство для укладки волос, в другой расческа, в третьей… А роль третьей руки, держащей фен, талантливо выполняет Clingr.

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

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

Чтобы попасть прямо в цель в этом случае, мы использовали метод StoryBrand. Ключевое маркетинговое сообщение доносится до клиента в виде истории, в центре которой оказывается Герой, сталкивающийся с Проблемой (да-да, именно так, прописными буквами, ведь маленьких проблем для клиента не бывает). А продукт становится Проводником этого простого и элегантного решения. Итак, проблема героя, а точнее героини, — изматывающе неудобная укладка только что вымытых волос, когда они запутываются в расческе и их сложно высвободить, потому что в другой руке девушка держит фен.

Героиня Clingr стремится к свободе самовыражения в сочетании со свободой рук. Ей важно быть красивой, стильной и ухоженной в любой ситуации. Она хочет радоваться здоровым и сильным волосам, легко укладывающимся в любую прическу. А еще ей хочется, чтобы за уход за собой не требовал лишних усилий, не сковывал движений и не отнимал много времени. Все эти желания и помогает осуществить Clingr. Вот из каких частей складывается захватывающая story, ведущая нашу героиню от досадной рутины к эффектному результату:

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

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

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

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

Двойной фокус: на презентации Clingr и изображении его счастливых владелиц — определил выбор визуальной стилистики. Минималистичный, спокойный, чистый дизайн выводит на первый план продукт и его обладателей.

На первом же экране появляется анимированная 3D-модель инновационного фиксатора фена: пользователь видит его со всех сторон и понимает, что этот лаконичный бьюти-гаджет раскрывается с элегантной простотой, буквально одним движением.

Мы разработали дополнительные элементы фирменного стиля — тонкие нитевидные линии на фоне, напоминающие волосы. Они делают акцент на основном изображении и символизируют путеводную нить, ведущую от проблемы к решению.

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

Интересной находкой стала веерная карусель, показывающая простоту эксплуатации Clingr. Еще одно изящное решение — микроанимация в виде всплывающих карточек, которые демонстрируют различные сценарии использования устройства (дома, в спортклубе, в путешествии).

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

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

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

Тексты для сайта — не просто описание функциональных атрибутов продукта, это эмоциональное путешествие в новый мир бьюти-практик. И сторителлинг здесь играет роль заботливого гида, постепенно подводящего пользователя к каждому из преимуществ Clingr.

В заголовках иногда возникает игра как проявление свободы, которую Clingr дарит женщинам каждый день. “Обеими руками руками за красивые волосы”, — призывает самый первый слоган. Все потому, что удобный фиксатор фена оставляет обе руки свободными для парикмахерских экспериментов. “Красивые волосы — магнит для взгляда и сердца”, — проникновенно утверждает еще один слоган. Необычные и меткие фразы впечатываются в память, создавая привлекательный образ продукта, который становится сложно не приобрести.

В текстах емко и лаконично отражены все особенности Clingr: удобство использования, компактность, быстрота укладки, универсальность, безопасность для здоровья волос. Красота не требует жертв — ключевое послание сайта, убедительно простое и эффектное.

С заботой о главном — о красоте без компромиссов и ограничений, создан Clingr. С заботой о главном — об эмоциональном комфорте и равновесии — мы сделали промо-сайт.

Простой ответ: потому что сделали впечатляюще красивый сайт с классным дизайном и модной микроанимацией, покорившей фестивальное жюри.

Развернутый ответ: потому что погрузились в реальность итогового клиента, прочувствовали его проблему и захотели помочь. В результате проект наполнился ключевыми смыслами, которые объединились в цельный образ продукта и сообщили ему дополнительную ценность. Это помогло нам понять, какие именно дизайнерские приемы нужно использовать.

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

Подпишитесь на нас, чтобы не пропустить свежие кейсы и революционные идеи. Также следите за нами в Telegram-канале и на сайте Vide Infra. Будем на связи!