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

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

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

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

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

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

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

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

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

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

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

Каталог 

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

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

Блог

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

Где купить

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

Формы обратной связи

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

Бридерам / Сотрудничество

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

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

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

Изображения на сайте

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

Управление контентом

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

Сторонние решения

• Moonshine — admin-панель для фреймворка Laravel
• PHPMailer — PHP-библиотека, упрощающая работу с отправкой сообщений на почту средствами PHP
• Imask — небольшая библиотека для javascript, позволяющая устанавливать маски на поля ввода
• Swiper — javascript-библиотека, позволяющая реализовывать слайдеры элементов

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

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