Квикс. Интерактивный веб-баннер

Квикс. Интерактивный веб-баннер

Задача

Cоздать с нуля интерактивный адаптивный HTML5-баннер, который будет запускаться при подключении к публичному Wi-Fi в метро. Спреи для носа Квикс содержат воду из Атлантического океана, поэтому заказчик хотел, чтобы содержание баннера отражало этот факт.

Заказчик: рекламное агентство Media Instinct, которое готовило рекламную кампанию спреев для носа Квикс.

Сроки: с момента обращения до финального согласования прошло 16 дней.

Наша работа без учета времени на согласование:

  • 2 дня на разработку идей;
  • 4 дня на создание раскадровки и внесение комментариев;
  • 4 дня на разработку.

Реализация

Так как спреи для носа Квикс содержат воду из Атлантического океана, на баннере морская волна смывает микробов со слизистой оболочки. Для увеличения вовлеченности аудитории баннер интерактивен: волна возникает после тряски смартфона.

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

Этапы работы

Мы начали создание баннера с брейншторма: придумали пул идей, из которых заказчик выбрал вариант с микробами, которых смывает океанской волной.

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

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

Спустя несколько дней после сдачи проекта заказчик попросил добавить статистику: сколько раз пользователи трясли телефон, взаимодействуя с баннером. Это было сделано в тот же день.

Особенности проекта

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

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

Еще деталь: по закону в рекламных материалах медицинской продукции предупреждающая надпись о противопоказаниях должна занимать не менее 5% площади изображения. Наш баннер адаптивный, и может появляться на самых разных экранах. Мы сделали так, чтобы на любом экране в любых пропорциях предупреждающая надпись автоматически подстраивалась под нужный размер, занимая точно 5% изображения.

После согласования

Баннер был сделан в срок, запустился в рамках рекламной кампании и отработал без сбоев необходимое время.