Дизайн и разработка сайта бренда кормов для домашних животных Melwin

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

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

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

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

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

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

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

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

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

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

Каталог

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

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

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

Страница содержит Yandex-карту с перечнем городов, в которых можно купить продукцию компании. При выборе города появляется список адресов, принадлежащих к нему, а карта меняет свои координаты.

Социальные сети

На детальных страницах новостей и продуктов настроена разметка OpenGraph, позволяющая социальным сетям подтягивать контент сайта при размещении ссылки. Генерация ссылок «Поделиться» на детальных страницах реализована с помощью JavaScript с учётом этой разметки без использования сторонних решений.

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