Разбор кейса: элегантный веб-сайт для производителя полезных аксессуаров

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

Клиент и проект

Komuso — команда, разрабатывающая инструменты для естественной релаксации и улучшения самочувствия, и именно эта идея лежит в основе их продукта, Shift. Shift был создан Тоддом и Ванессой Стейнберг, мужем и женой, соучредителями Komuso Design. 

Они оба испытывали сильный стресс и чувствовали себя отрешенно, и поэтому придумали решение, способное изменить ситуацию. Shift — первый в мире полезный аксессуар, который помогает правильно дышать. В результате ваше самочувствие улучшается, нервная система успокаивается, а душевное равновесие восстанавливается.

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

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

Процесс и результат

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

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

Шрифтовая пара для сайта Komuso это: 

• аккуратный и утонченный Ivy Mode для заголовков, упорядоченный, с декоративными деталями, при этом легко читаемый и приятный для глаз,

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

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

В некоторых разделах фотографии играют роль подсказок: взгляд модели естественным образом привлекает внимание посетителей к текстовым блокам или теглайнам. 

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

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

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

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

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

Вот реализация этой концепции на Webflow, если вы хотите посмотреть, как она работает, и в каком виде мы презентовали ее нашим клиентам.

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

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