8-800-250-65-58
Приветствую!
Меня зовут Сферикс! Я знаю много об iМаркетинге и с радостью поделюсь своими знаниями :) А если вы хотите получать полезные знания регулярно, просто подпишитесь на рассылку.

Сайт торговой марки «Алейка»: было-стало

28.01.2019

Веб-дизайн

В октябре 2018 года начал свою работу новый сайт для покупателей ТМ «Алейка» (одного из крупнейших в России производителей муки и макаронных изделий — ЗАО «Алейскзернопродукт» имени С.Н. Старовойтова). Эта работа нашей интернет-студии стала не просто банальной рекламой, а целой историей о создании продуктов, которая запоминается пользователям с первых секунд.


Задачи

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

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

БылоСтало

Главная страница «Алейки»: было Главная страница «Алейки»: стало

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



Главная страница

Каждый экран главной страницы показывает сцену из жизни главного персонажа — бабушки Алейки и одного из ее домочадцев. Специально для сайта мы разработали еще 4 персонажа, которые помогают бабушке Алейке «готовить» продукты ЗАО «Алейскзернопродукт».

Главная страница «Алейки»: экран 2

Уже на первом экране пользователь замечает интерактив: персонажи «раскрашиваются» при наведении, а при щелчке переносят на «свою» страницу.


Главная страница «Алейки»: экран 3

При этом в каждый из следующих экранов мы «встроили» реальные продукты ТМ «Алейка», чтобы сайт был не просто красивым, а выполнял реальные маркетинговые задачи по продвижению торговой марки. Согласитесь, просто показать на первом плане пачки макарон и крупы было бы очень скучно!

БылоСтало

Главная страница «Алейки», разделы: было Главная страница «Алейки», разделы: стало


Страницы продуктов

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

БылоСтало

Страница с продуктами «Алейки»: было Страница с продуктами: стало

И здесь тоже стоит обратить внимание на детали: при наведении курсора мыши на иконки продуктов они становятся цветными.

И да, со страниц продуктов пользователь легко может попасть в блог и подписаться на рассылку рецептов.

БылоСтало

Ассортимент «Алейки»: было Ассортимент  «Алейки»: стало


Блог

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


Блог «Алейки»

Формат видеорецептов очень хорошо вписался в общую динамичную концепцию сайта «Алейки». Даже не смотря на «простой» фон, за счёт видеофромата в блоге сохраняется нужная «яркость» и, опять же, настроение.



Анимация

Да, это было сложно: мы работали с анимацией впервые. В процессе переноса сайта терялись руки и ноги персонажей, «ломались» лопасти мельниц, куда-то пропадала пыль... Но в итоговом варианте всё работает так, как и должно.

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

Оцените сами на сайте aleyka.ru!

Посмотреть анимацию

А для сравнения посмотрите, какой была «анимация» на старом сайте.



С какими сложностями мы столкнулись?

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

Оцените нашу работу! Зайдите на сайт aleyka.ru и напишите нам здесь в комментариях, что можно было бы улучшить.