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

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

Проект

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

Креативные решения

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

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

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

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

Еще один интересный момент, о котором стоит упомянуть, — это сочетание шрифтов: привлекательный полужирный шрифт без засечек, декоративная рукописная версия шрифта Summer Loving для элементов коммуникации бренда, таких как заголовки или теглайны, и стильный, хорошо читаемый GT America для информационных блоков.

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

Контент разделен на легко сканируемые, не перегруженные разделы, в которых представлены различные подходы к визуализации данных: инфографика, теги, таблицы, текстовые блоки, информативные иконки и т.д.

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

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

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

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

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

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

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

Спасибо за внимание!