Порядок разработки HTML5-баннера. От брифа до подготовки файлов к размещению

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

В общем у нас есть план и мы его придерживаемся.  

Бриф

Любая задача на разработку баннера в независимости от типа начинается с брифа. Он позволяет понять цели преследуемые баннером, учесть налагаемые вами или площадками ограничения. Бриф можно заполнить наш или прислать свой. Или просто описать задачу в письме, ну или на крайний случай приехать и нам все устно рассказать.

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

Раскадровка. Она же сторибоард

В случае, когда задача не до конца понятна или бриф оставляет много невыясненных моментов, мы готовим текстовое описание будущего баннера, сопровождая его референсами по стилистике.

Если к брифу вопросов нет, мы собираем раскадровку. В ней отображаются ключевые сцены будущего баннера с кратким описание планируемой анимации. Примерно вот так:

Далее дорабатываем раскадровку согласно вашим пожеланиям и согласовываем раскадровку. Момент согласования очень важен для дальнейшей работы, т.к. вносить правки в раскадровку намного проще чем править уже при наличии анимированного баннера.

Мастер-баннер

На этом этапе мы анимируем мастер-баннер. Вы получаете zip-архив, который необходимо разархивировать в отдельную папку и запустить файл с расширением html. Некоторые архиваторы, такие как например, WinRar, позволяют просматривать баннер прямо из архива не извлекая все файлы.

При необходимости вносим правки в анимацию и согласовываем мастер-баннер.

Ресайзы и адаптации

Движемся по медиаплану и готовим версии баннера различных форм факторов.

Вы получаете несколько  zip-архивов. Что с ними делать вам уже известно. Корректируем ресайзы и согласовываем.

Подготовка к размещению

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

На этом собственно и все.