Точка
Задача
01
Разработать мастер-раскадровку, анимировать в HTML5-баннер, отресайзить в 15 размерах и адатировать по техническим требованиям Яндекса
Исходные материалы
Клиент пришёл к нам с готовым стилем, цветами, элементами и текстами
Из пожеланий — плавная анимация, чтобы пользователи успевали прочитать всё на баннере.
А текста там довольно много: в лого, кнопках, плашках и непосредственно лайне
Мелочей не бывает
Отдельное внимание логотипу
Клиенту было важно сохранить крупный логотип на каждом кадре, поэтому мы предложили ещё два варианта выделения, помимо простого увеличения
Залитая плашка
Логотип переманивает на себя внимание, а основной месседж теряется
Контурная плашка
Форма перекликается с закруглёнными элементами баннера и напоминает кнопку
Увеличение логотипа
Логотип повис в воздухе, композиция распадается
Мелочей не бывает
Отдельное внимание логотипу
Клиенту было важно сохранить крупный логотип на каждом кадре, поэтому мы предложили ещё два варианта выделения, помимо простого увеличения
Залитая плашка
Логотип переманивает на себя внимание, а основной месседж теряется
Контурная плашка
Форма перекликается с закруглёнными элементами баннера и напоминает кнопку
Логотип повис в воздухе, композиция распадается
Увеличение логотипа
Процесс
02
Мастер-раскадровка и анимация
Дальше начали думать, как и что размещать на кадрах раскадровки. Определили, что хватит четырёх, и на каждый кадр заложили разное время — в зависимости от объёма контента на нём
4 кадр
Финальный кадр, чтобы показать объёмную юридическую информацию, но при этом не теснить ее на важных кадрах. Акцент крупно на логотипе, как итог всего показанного «до».
3 кадр
Убираем слоган — он здесь уже не нужен. Появляются все инструменты и кнопка, которая с помощью анимации приглашает себя нажать
2 кадр
Слоган оставляем, чтобы все успели прочитать, а динамику сохраняем за счёт смены иконок и устройств
1 кадр
Первые два кадра крупно показываем главный слоган. Снизу сменяются смартфон и ноутбук, показывая мультиплатформенность.
Все элементы в кадре появляются с анимацией
Анимация
После презентации раскадровки быстро получили апрув и приступили к анимации
Усиливаем эффект и подсказываем куда нажать и как взаимодействовать с элементом. Так простое визуальное решение превращается в функциональный элемент
Пульсация логотипа на последнем кадре
Общая логика
Кадры сменяют друг друга и движутся справа налево. Используем привычный паттерн перелистывания для комфортного и простого восприятия
Процесс
03
На таких крошечных площадях визуал просто потеряется
Готовим раскадровки в 15 размерах
Среди всех форматов
были два совсем маленьких
были два совсем маленьких
Собрали мини-гайд —отступы для всех размеров баннеров
Часто проекты ограничиваются только мастер-раскадровкой и последующей анимацией, а ресайзы делают как получится. Это не наш стиль
Сделали на все 111%
04
По опыту других проектов, гайды упрощают процессы и нам, и клиенту в будущих кампаниях.
Мы всё продумываем заранее, контролируем каждый этап и выверяем каждый пиксель, чтобы всё располагалось ровно и аккуратно.
Без заглушек никуда
05
GIF-заглушки
Они показываются вместо баннера, если у пользователя установлен блокировщик
Готовим заглушки под все ресайзы:
Для Yandex Direct подготавливаем заглушки в х2-размере, чтобы они отлично смотрелись на ретина-экранах. Главное уместиться в 512кб
У каждого кадра расставлено время показа: на ключевых кадрах задерживаемся дольше, а на второстепенных меньше
Это сменяющие друг друга кадры из раскадровки без плавной анимации
спасибо!
