Как мы сделали сайт, глядя на который, Лебедев потерял дар речи

«Тзз-тщ-пау-блрлр» — так Артемий Лебедев прокомментировал наш промо-сайт для напитка Grink Jamaica в одном из выпусков «Бизнес-линча». Мы вряд ли сможем рассказать, как повторить этот ошеломительный успех. А вот дать несколько полезных советов о том, как сделать впечатляющий имиджевый лендинг для FMCG — это пожалуйста.

Наши сайты для бренда напитков Grink уже получили награды конкурсов «Золотой сайт», «Рейтинг Рунета», Awwwards и CSS Design Awards — значит, эти советы работают.

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

Промо-сайт — как рекламный щит, только в интернете. Поэтому здесь тоже действует правило наружки: в центре внимания должен быть продукт и/или бренд. Используйте крупные, качественные фотографии или реалистичные 3D-модели продукции. Мы стараемся в каждый экран интегрировать бренд или продукт, но аккуратно — чтобы он запомнился, и при этом не надоел.

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

Мудрить со смыслами не нужно, достаточно подумать, как ярко и по-новому их показать. Например, в напитке Grink Jamaica со вкусом лимон-лайм и нотками перца чили мы разглядели, очевидно, Ямайку с ее морем, солнцем, бесконечной радостью и весельем. Концепцию сайта построили на этих ассоциациях: экзотические цветы, парень в раста-берете с дредами и ослепительной улыбкой — в общем, «море, музыка, чистый кайф».

А вот напиток Grink Bubble Gum со вкусом японской жевательной резинки перенес нас в атмосферу ночного Токио с ноткой киберпанка. Мы подчеркнули это настроение акцентным шрифтом: начертание букв отсылает к японским иероглифам, а сочетание белого, розового, голубого цветов и glow-эффект напоминают о рекламных вывесках на улицах Японии.

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

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

То самое «тзз-тщ-вау-дыщ». Вылеты, проплывание, дрожание, кручение-верчение — фантазия не ограничена, лишь бы хорошо грузилось и не висло.

Этому приему в дизайне, музыке, кулинарии давно придумали название «фьюжн». В коммерческом дизайне это может быть вынужденная мера: например, компания выпускает на рынок два разных продукта одновременно, и делать отдельный сайт для каждого — затратно и неудобно для продвижения.

Для Grink мы провернули такой финт дважды: первым был сайт «Космос», где были одновременно представлены вкусы Milky Soda (аналог корейского напитка «Милкис») и Cola (аналог ушедшей с рынка «Кока-Колы»). Кстати, по итогам экспресс-опроса именно он больше понравился пользователям — за него проголосовали 34% респондентов.

Второй подобный проект мы сделали весной прошлого года: соединили кислотное оранжевое настроение в стиле «Фанты» и азиатский неоновый киберпанк на сайте Grink: Orange и Bubble Gum. Совместить несовместимое помог синий цвет — благодаря ему две непохожие части сайта гармонично смотрятся вместе.

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

Проблема возникла, когда на сайте Grink: Orange и Bubble Gum мы решили поместить в центр композиции объемную бутылку с напитком. Tilda не поддерживает 3D-анимацию, а нам хотелось, чтобы бутылка крутилась при скролле, поэтому пришлось придумать обходной путь. Для начала специалист по 3D создал сцену с движущейся бутылкой. Мы разбили ее по кадрам, а затем с помощью кода внедрили в конструктор. В итоге получили анимацию, которая работает на всех устройствах.

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

Например, мы разработали сайты Grink Mandarink и Grink Top Secret для проведения промо-акций с розыгрышем призов, причем в акции для Top Secret надо было не просто зарегистрировать чек, но и угадать секретный вкус напитка.

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

Самый титулованный — Grink: Orange и Bubble Gum: в 2023 году завоевал серебро «Рейтинга Рунета» и взял награду «Сайт дня» на CSS Design Awards — это как «Оскар» в мире дизайна. Он также получил награду «Honorable mention» в конкурсе Awwwards, как и другой сайт — Grink Jamaica. А еще попал в коллекцию «Made on Tilda» — галерею лучших проектов, созданных на этой платформе.

Grink: Космос не остался в стороне от наград — в 2022 году получил звание «Золотой сайт» в номинации «Промо-сайт бренда FMCG».

Да и напитки бренда Grink есть на полках каждого супермаркета на Дальнем Востоке — надеемся, что наши усилия этому немного поспособствовали.

Больше наших проектов для FMCG и не только можно посмотреть на сайте маркетингового агентства DVIGA. А если прямо сейчас сайт не нужен — подписывайтесь на канал фаундера DVIGA «Маркетинг или жизнь», там еще больше маркетинговых инсайтов, полезных наблюдений и профессиональных шуток.

#сайт #маркетинг #дизайн #tilda