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

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

Проектирование
Затем мы проанализировали целевую аудиторию, причем не только ядро — его основную часть, но и его периферию и окружение, определили их интересы, и смоделировали, как мы можем эти интересы удовлетворить и через какие именно разделы на сайте мы можем это сделать. Также мы проанализировали и конкурентное окружение, а результаты аналитики сформировали в виде SWOT-анализа — вся эта информация легла в основу структуры и архитектуры будущего проекта.
И после того, как мы спроектировали структуру — архитектуру будущего проекта, через формирование архетипа бренда мы описали, каким должен быть его характер и голос (ToV), и эта информация легла в основу идеи о том, какой должна быть визуальная коммуникация, а именно — дизайн-концепция.
Персонализация
Анимация
Главная страница сайта выполнена в поэкранном режиме, экраны меняются при скролле мышью и при нажатии на стрелки. Все анимации на странице уникальны и реализованы на CSS-классах, благодаря чему они являются хорошо оптимизироваными.
Структура
Каталог
На посадочной странице каталога задано разделение первого уровня на корма для кошек и для собак, с дополнительной фильтрацией на разводящей странице по возрасту питомца или его особенностей. Также на посадочной и разводящих страницах есть возможность ознакомиться с полной PDF-версией каталога.
Каждая карточка имеет свой уникальный цвет в рамках заданной цветовой гаммы, в который окрашивается контурная рамка и дополнительные визуальные элементы, также в каждой карточки есть возможность указать описание, состав, гарантируемые показатели, нормы кормления по весу и при переходе.
Блог
Разводящая страница блога представляет собой своеобразную сетку с новостями бренда, карточки которой содержат картинку и заголовок новости, для каждой новости, как и для карточки, можно задать свой цвет, который станет фоном карточки на разводящей странице и фоном заголовка на детальной странице.
Где купить
Страница содержит Yandex-карту с перечнем городов, в которых можно купить продукцию компании. При выборе города появляется список адресов, принадлежащих к нему, а карта меняет свои координаты.

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

Техническое особенности
Социальные сети
На детальных страницах новостей и продуктов настроена разметка OpenGraph, позволяющая социальным сетям подтягивать контент сайта при размещении ссылки. Генерация ссылок «Поделиться» на детальных страницах реализована с помощью JavaScript с учётом этой разметки без использования сторонних решений.
Изображения на сайте
Для оптимизации скорости загрузки сайта установлен пакет конвертации и преобразования изображений в формат WebP. Большинство изображений представлены через html-тэг picture, позволяющий подгружать под каждое разрешение свой размер картинки.
Управление контентом
Весь основной контент сайта перенесён в административную часть, что позволяет редактировать данные без привлечения программиста и прямого вмешательства в код проекта.
Сторонние решения
- Moonshine — admin-панель для фреймворка Laravel
- PHPMailer — PHP-библиотека, упрощающая работу с отправкой сообщений на почту средствами PHP
- Imask — небольшая библиотека для javascript, позволяющая устанавливать маски на поля ввода
- Swiper — javascript-библиотека, позволяющая реализовывать слайдеры элементов
Стек технологий
JavaScript, Composer, Webpack, SCSS, Laravel, Moonshine, Git, PHP, MySQL, Yandex.Maps.
Резюме
Именно такое сочетание продуманного планирования и творческого подхода позволило создать сайт, который не только эффективно решает задачи бренда, но и оставляет положительное впечатление у аудитории, формируя их интерес и приверженность бренду.

Елизавета Козлова,
руководитель проектной команды
Отзыв клиента
«Благодаря профессионализму и опыту команды «Текарт» мы получили инструмент, который будет способствовать развитию нашего бизнеса и укреплению связей с клиентами.»

Melwin
Благодарственное письмо
