INSPIRED BY GREENFIELD
Вдохновлялись пейзажами с упаковок чая, чтобы запустить промостраницу к началу конкурса
INSPIRED BY GREENFIELD
Вдохновлялись пейзажами с упаковок чая, чтобы запустить промостраницу к началу конкурса
При партнерстве с крупными продуктовыми компаниями всегда приходится учитывать особенности их маркетинга. Продвижение при помощи акций и конкурсов — маст хэв, а сроки их запуска — маст успеть. От идеи до старта обычно меньше месяца. Задача — опередить конкурентов, сделать круче, интереснее, охватить больше аудитории и зажечь ее идеей (и заодно своим продуктом).
В конце сентября Greenfield анонсировал проект Inspired by Greenfield. Участникам предстояло вдохновиться фантазийными пейзажами с упаковок Greenfield, найти похожие места, сфотографировать и заинстаграмить. Для задорного старта Greenfield привлек известных блогеров из категорий «фототрэвал» и «лайфстайл», которые публикуют свои фотографии и мотивируют участников.
Дело за малым: сделать фото с пейзажем и пачкой чая Greenfield на его фоне, выложить его в Instagram со специальным хэштегом, выиграть и получить приз. Не конкурс, а эстетическое удовольствие!
Что до нашей истории, то все происходило идеально-гладко. Greenfield пришел не с пустыми руками, а с примерным прототипом и готовым текстом. Сократили время на разработку — раз.
Когда клиент четко знает, для кого разрабатывается продукт и что хочет видеть в итоге, то в масштабах промостраницы полная аналитика не нужна. Сократили время — два.
Чтобы еще раньше получить рабочую версию промо запускали по классическом скраму: сначала версию без анимации, а через два дня — итоговую версию проекта. И это три.
Еще нюанс, который тянет на четвертую ступень ускорения: задачу мы делали в рамках технической поддержки, а значит, сэкономили еще несколько дней на согласовании документов.
В конце сентября Greenfield анонсировал проект Inspired by Greenfield. Участникам предстояло вдохновиться фантазийными пейзажами с упаковок Greenfield, найти похожие места, сфотографировать и заинстаграмить. Для задорного старта Greenfield привлек известных блогеров из категорий «фототрэвал» и «лайфстайл», которые публикуют свои фотографии и мотивируют участников.
Дело за малым: сделать фото с пейзажем и пачкой чая Greenfield на его фоне, выложить его в Instagram со специальным хэштегом, выиграть и получить приз. Не конкурс, а эстетическое удовольствие!
Что до нашей истории, то все происходило идеально-гладко. Greenfield пришел не с пустыми руками, а с примерным прототипом и готовым текстом. Сократили время на разработку — раз.
Когда клиент четко знает, для кого разрабатывается продукт и что хочет видеть в итоге, то в масштабах промостраницы полная аналитика не нужна. Сократили время — два.
Чтобы еще раньше получить рабочую версию промо запускали по классическом скраму: сначала версию без анимации, а через два дня — итоговую версию проекта. И это три.
Еще нюанс, который тянет на четвертую ступень ускорения: задачу мы делали в рамках технической поддержки, а значит, сэкономили еще несколько дней на согласовании документов.
Мы работали вместе с дизайнером Greenfield. В качестве основной дизайн концепции отталкивались от существующей стилистики сайта: изображения, текст, иконки. Чтобы страница была более эмоциональной, акцент сделали на промоблоке. Заказчик тоже предоставил свое видение промо и иконки в новой стилистике, которые иллюстрируют идею путешествия, маршрута и полученного подарка.
Мы объединили наши макеты с иконками и иллюстрациями и получили тот вид, который понравился всем, был утвержден и отправлен в разработку.
Мы объединили наши макеты с иконками и иллюстрациями и получили тот вид, который понравился всем, был утвержден и отправлен в разработку.
Глеб
Дизайнер
Зацените анимацию на промоэкране. Она состоит из 560 кадров!
Анимацию сделал спрайтом: при загрузке страницы она запускается, а в конце остается на последнем кадре. На мобильных устройствах отображается только картинка (это сделали, чтобы оптимизировать скорость работы) — мобильным телефонам такой огромный спрайт не хватит мощности обработать, а меньше было никак :)
Евгений
Разработчик
С анимацией было весело. Ко мне подошел разработчик Евгений и сказал, что надо сделать покадровую анимацию, затем отрендерить все эти кадры отдельными png-шками, а потом все эти png-шки засунуть в одну огромную png-шку. Я сперва ничего не понял, а потом снова ничего не понял. Но как сделать анимацию и выгнать ее отдельными кадрами понимал, а с остальным решил позже разобраться.
В итоге, когда на выходе у меня получилось почти 600 отдельных png-кадров, я уже понял, что их нужно расположить последовательно друг за другом на одном большом изображении. Сначала я все засунул в Scetch и выполнил функцию распределения. Получилась одна длинная вытянутая по горизонтали полоска на
300 000 пикселей. Длинновато вышло. Сделал то же самое, но уже выстраиванием картинки по вертикали. Получилось уже меньше — 200 000 пикселей — все равно много.
Евгений вздохнул и подсказал, что необязательно делать все в один ряд и предложил мне распределить все картинки рядами в несколько столбцов. С этой задачей отлично справилась Figma. Я просто закинул в нее все 600 png-шек, они автоматически распределились в нужном порядке в 60 рядов по 10 столбцов. Все это дело я выгрузил одной png-шкой, из которой Евгений уже сделал анимацию на верстке и все заработало идеально.
В итоге, когда на выходе у меня получилось почти 600 отдельных png-кадров, я уже понял, что их нужно расположить последовательно друг за другом на одном большом изображении. Сначала я все засунул в Scetch и выполнил функцию распределения. Получилась одна длинная вытянутая по горизонтали полоска на
300 000 пикселей. Длинновато вышло. Сделал то же самое, но уже выстраиванием картинки по вертикали. Получилось уже меньше — 200 000 пикселей — все равно много.
Евгений вздохнул и подсказал, что необязательно делать все в один ряд и предложил мне распределить все картинки рядами в несколько столбцов. С этой задачей отлично справилась Figma. Я просто закинул в нее все 600 png-шек, они автоматически распределились в нужном порядке в 60 рядов по 10 столбцов. Все это дело я выгрузил одной png-шкой, из которой Евгений уже сделал анимацию на верстке и все заработало идеально.
Глеб
Дизайнер
По мере того, как появятся первые конкурсные работы с хэштегом #inspired_by_Greenfield — они будут выводиться на сайте. Этот хэштег стал триггером для появления фоторабот в блог «Вдохновение участников» и подтягиваются туда с премодерацией.
Для приглашенных блогеров есть отдельный блок. Если пост с конкурсным хэштегом принадлежит блогеру из этого списка, он попадает в блок «Вдохновение от блогеров» так же с премодерацией.
Мы к чему — если очень надо и есть четкое понимание, что будет происходить с продуктом, то можно получить готовый результат и при этом не терять в качестве.
Для приглашенных блогеров есть отдельный блок. Если пост с конкурсным хэштегом принадлежит блогеру из этого списка, он попадает в блок «Вдохновение от блогеров» так же с премодерацией.
Мы к чему — если очень надо и есть четкое понимание, что будет происходить с продуктом, то можно получить готовый результат и при этом не терять в качестве.
Удачи в конкурсе!
