Эксперимент проджекта, который смог — SETTERS BLOG
11 November 2020 5783 ~ 20 мин#Веб-разработка
HTML5-баннеры — это такие рекламные креативы, которые дизайнеры не любят собирать, клиенты просят асап поправить, а страдает в итоге менеджер, потому что вообще ничего не понимает в коде (спойлер: это необязательно).
Наш проджект Алина Щеблецова немного помучилась и сделала баннер для своего TG-канала сама — за одну ночь и без подсказок веба. Как это было, читайте в ее колонке-инструкции.
Предыстория про боль и ТТ
Полтора года назад со мной впервые случились HTML5-баннеры. И это было больно. Представьте: у клиента огромное международное мероприятие, вы отдали дизайнеру технические требования для креативов в таргет и медийку. Выправили макет, который будет просто адаптироваться под нужные форматы. Согласовали все в дедлайн и получили архив ресайзов с пометкой от диза:
Алиночка, тут всё, кроме HTML5-баннеров — размеры по ним добавили, но кодить такое не умеем.
Я три раза перечитала, потому что ничего не поняла. А потом как поняла!
Если кратко, HTML5-баннеры — это динамические рекламные блоки, которые пользователь видит на разных сайтах. Обычные баннеры делаются на основе векторной и растровой графики, а здесь используется комбинация html-элементов. Преимуществ несколько:- баннеры адаптируются под любые устройства и браузеры без всяких расширений;
- в них можно интегрировать кнопки и приложения;
- из-за маленького веса баннеры не влияют на скорость загрузки страницы;
- в Google Analytics можно подробно отслеживать их эффективность.
До этого HTML5-баннеры в агентстве собирали только один раз — это делал наш великолепный веб-дизайнер ночью. В случае с мероприятием повторить болезненный опыт он не согласился. Другой коллега поспорил со мной на сникерс, что просто прогонит анимацию через ezgif.
com и выдаст баннер точно по ТТ. Через 20 минут он тоже понял, что такое HTML5-баннер, и пошел за сникерсом, матерясь. В итоге я написала аутсорснику и офигела, сколько это стоит: комплект баннеров на одну площадку обошелся бы в 40 тысяч.
Сейчас с этим проще, но почти каждый месяц сдаю одному клиенту комплект из десятка размеров под разные площадки. Иногда дизайнер отвечает долго, хотя нужно всего-то подвинуть листочек на 2 миллиметра, — а медийное агентство клиента уже должно отдавать все на модерацию. Тогда я сижу и думаю: ДА ЧЕРТ ВОЗЬМИ, Я БЫ САМА ПОДВИНУЛА ЭТОТ ГРЕБАННЫЙ ЛИСТОК, ТОЛЬКО ТАМ ЖЕ КОД, И ВООБЩЕ ЭТИ БАННЕРЫ ПРИДУМАЛ ДЬЯВОЛ.
Решено было разобраться на случай, если мир будет рушиться, а дизайнер не на связи. Важная пометка: у меня даже фотошопа никогда не было. Как и соблазна самой наложить логотип или поправить композицию 😉
Как я разбиралась в Google Web Designer
Окей, Гугл, как сделать HTML5-баннеры. По первой ссылке висел платный конструктор — лендос у него красивый, но я готова платить только внерабочим временем.
По второй ссылке я попала в обсуждение на Хабре, и второй же комментарий дал мне ответ:
Не забываем, что я менеджер, а не «большинство специалистов». Возвращаюсь к поисковой выдаче и вижу туториал для Google Web Designer на 14 минут — оказалось, что это бесплатная прога для простых креативов, которые менеджер, пиарщик и маркетолог в состоянии собрать сам.
Самое прекрасное, что разбираться в коде не нужно! Шок, правда? Можно работать в визуальном редакторе, а программа сама сгенерирует код. Вот так выглядит интерфейс:
На сборку баннера 300х250 с примитивной анимацией у меня ушел 1 час — и еще полчаса я искала ошибки. Думаю, если у вас был опыт работы с визуальными редакторами, то вы с первого раза справитесь быстрее.
Фон на картинке с лицом я убрала на сайте RemoveBg, чтобы загрузить в библиотеку пнгшку. Картинку на фон искала на Unsplash и Freepik.
Сам баннер в Google Web Designer собирается не сложнее, чем сториз в приложении Inshot: вы просто размещаете разные изображения и текстовые блоки по таймлайну, а их перемещение фиксируется по секундам. Моушн, конечно, не чудовищной силы, но пойдет.
Вот так в итоге выглядела сборка
Что пошло не так
Предпросмотр в Хроме прямо из программы показал мне великолепную анимацию — эндорфины выделились, я засняла это в сторис, получила восхищенные реакции наших дизайнеров и хотела лечь спать счастливой с мыслью, что текст чуть подниму утром.
Но при сохранении выдавались ошибки интерактивной области и сильное превышение размера. То есть настройка кнопки дала баг на весь баннер.
Я открыла архив через файлы в ноуте и проверила по компонентам — тяжелее всего как обычно было мое лицо! Удалила, сжала его через компрессор, загрузила и заанимировала заново.
С весом все стало ок, но загадочное «недопустимые события компонента Интерактивная область» никуда не делось.
На что еще обратить внимание
В комментариях к туториалу был вот такой совет:
Ну и, конечно, стоит отметить, что в Google Web Designer есть большой набор шаблонов и всякие финты с компонентами: от переходов до 3D-моделирования.
Если запариться, можно уйти далеко от формата «выезжающий текст».
Как итог, за полтора часа я почувствовала себя почти всемогущей и даже вышла из депрессивных состояний. Мораль такова: дизайнеры все еще святые люди, но на примитивном уровне менеджер может разобраться во всем сам.
В общем, желаю приятного погружения в мир HTML5-баннеров, в котором НЕ НУЖНО ЗНАТЬ КОД НАПОМИНАЮ ЭТО НЕ УЧЕБНАЯ ТРЕВОГА КОД ЗНАТЬ НЕОБЯЗАТЕЛЬНО.
Алина Щеблецова
проджект-менеджер SETTERS
Понравилась статья?Поделиться статьей:Читайте также:
#Управление
3 May 2020 ~ 7 мин
Что должен знать и уметь проджект
#Дизайн
25 April 2020 ~ 20 мин
Как сделать инстаграм-маску
#Управление
9 May 2020 ~ 10 мин
Как выжить проджект-менеджеру: программы и фичи
Порядок разработки HTML5-баннера.
От брифа до подготовки файлов к размещению — Bannermaker — разработка баннеров для рекламы 1355За все время существования мастерской мы разработали огромное количество баннеров, сталкивались с различными проблемами и набили немало шишек. И как результат разработали четкую методологию, позволяющую выстраивать работу максимально эффективно. А значит экономить свое время, ваш бюджет и наши общие нервы.
В общем у нас есть план и мы его придерживаемся.
Бриф
Любая задача на разработку баннера в независимости от типа начинается с брифа. Он позволяет понять цели преследуемые баннером, учесть налагаемые вами или площадками ограничения. Бриф можно заполнить наш или прислать свой. Или просто описать задачу в письме, ну или на крайний случай приехать и нам все устно рассказать.
Чем тщательнее заполнен бриф, тем вероятнее, что предложенный вариант раскадровки будет принят с первого раза.
Раскадровка. Она же сторибоардВ случае, когда задача не до конца понятна или бриф оставляет много невыясненных моментов, мы готовим текстовое описание будущего баннера, сопровождая его референсами по стилистике.
Если к брифу вопросов нет, мы собираем раскадровку. В ней отображаются ключевые сцены будущего баннера с кратким описание планируемой анимации. Примерно вот так:
Далее дорабатываем раскадровку согласно вашим пожеланиям и согласовываем раскадровку. Момент согласования очень важен для дальнейшей работы, т.к. вносить правки в раскадровку намного проще чем править уже при наличии анимированного баннера.
Мастер-баннерНа этом этапе мы анимируем мастер-баннер. Вы получаете zip-архив, который необходимо разархивировать в отдельную папку и запустить файл с расширением html. Некоторые архиваторы, такие как например, WinRar, позволяют просматривать баннер прямо из архива не извлекая все файлы.
При необходимости вносим правки в анимацию и согласовываем мастер-баннер.
Ресайзы и адаптацииДвижемся по медиаплану и готовим версии баннера различных форм факторов.
Вы получаете несколько zip-архивов. Что с ними делать вам уже известно. Корректируем ресайзы и согласовываем.
Подготовка к размещениюНа финальном этапе готовим все файлы к размещению. Учитываем технические требования, оптимизируем изображения. В конце названия файлов указываем под какие требования или для какой площадки или баннерокрутилки подготовлен тот или иной баннер.
На этом собственно и все.
Поделиться: Vkontakte FacebookЕщё статьи
БлогЧто такое Playable Ads и интерактивная реклама и зачем запускать рекламу такого формата?
778 5Где и как можно использовать HTML5-анимацию
1143Как анимация баннеров влияет на CTR
1284 6Форматы интернет-баннеров
1361 5Как создавать анимированные баннеры HTML5 — Сборка
Как лучшая в своем классе студия цифрового производства, мы не понаслышке знаем, что лучшие планы создают лучшие сборки.
Потому что, когда у вас есть нужные инструменты и элементы, воплотить идеи раскадровки в жизнь с помощью анимации несложно. Итак, прежде чем ваша творческая группа приступит к работе, ознакомьтесь с рекомендациями, которые мы рекомендуем для разработки анимированных баннеров HTML5.
Почему HTML5 в анимированных баннерах?
Прежде всего, почему HTML5? «Что ж, анализируйте любой контент в Интернете сегодня, и есть большая вероятность, что он использует этот язык», — объясняет Рэндалл Кастро, старший специалист по визуальному дизайну в Assemble. «HTML5 объединяет гораздо больше технологий, чем другие языки, и в сочетании с CSS у вас есть возможность создавать действительно красивую анимацию с очень небольшим размером и весом файла. Таким образом, если пропускная способность Интернета является проблемой, где бы ни находились ваши зрители, вы знаете, что ваши объявления все равно будут показываться.
«Время внимания потребителей сократилось как никогда, поэтому важно не только, чтобы ваша реклама не задерживалась ни на секунду, но и чтобы ваше объявление привлекало их внимание с самого начала».
Мы поговорим об этом позже.
Наличие правильных инструментов для работы
Очевидно, что дизайнеры могут выбирать из нескольких вариантов программного обеспечения для любого конкретного проекта, но каждый из них имеет свои преимущества для определенных типов работ. Когда дело доходит до анимированных баннеров, мы используем Photoshop. И вот почему: инструменты Photoshop (например, слои, эффекты, цветовые режимы и т. д.) упрощают экспорт каждого отдельного элемента, который необходимо анимировать. Это также наиболее используемое программное обеспечение моушн-дизайнерами и разработчиками в мире.
Если Photoshop вам не по душе, лучше всего подойдут Sketch, Adobe XD и Adobe Illustrator, поскольку Рэндалл настоятельно рекомендует избегать Adobe Indesign. «Indesign в первую очередь ориентирован на безупречный дизайн для печатных изданий, поэтому он не идеален для анимационной графики. Он отлично подходит для таких аспектов, как презентация раскадровки, но не для самого дизайна».
Итак, вот несколько вещей, которые вы можете делать и не делать, чтобы наилучшим образом подготовить свой дизайн для HTML5.
Дизайн
Использовать слои и композиции слоев
В идеале каждый элемент рабочего файла, который нужно анимировать, должен быть отдельным слоем. Использование слоев и групп в Photoshop значительно упрощает экспорт в отдельные емкости и создание отдельных анимаций с разной скоростью и временем. Композиции слоев также могут быть созданы для предварительного просмотра и навигации по кадрам анимации для упрощения экспорта.
Использование смарт-объектов
Лучший способ уменьшить вес файла без ущерба для информации или качества изображения — использовать смарт-объекты. Это особенно полезно для изображений с более высоким разрешением или снимков продукта, используемых в нескольких кадрах.
Увеличьте требуемый размер баннера в 2 раза
Чем больше размер, тем лучше для анимированного баннера.
«На современных экранах и дисплеях Retina баннеры имеют тенденцию отображаться размыто, если они слишком маленькие. Мы рекомендуем удвоить требуемый размер, чтобы изображения с более высоким разрешением отображались как можно четче на любом экране. Итак, если размер баннера 300x600px, то рабочий файл должен быть 600x1200px».
Предоставьте свои текстовые файлы
«Вы хотите, чтобы ваше сообщение было громким и четким, поэтому мы рекомендуем предоставить файлы семейства шрифтов вместе с вашим креативом, чтобы убедиться, что оно выглядит так, как вы ожидаете», — делится Рэндалл. «Особенно для динамических баннеров, если текст слишком светлый при экспорте в виде изображения, он не будет отображаться таким чистым и четким, как вы хотите».
Подумайте о размещении
Еще один важный совет в отношении текста, логотипов или векторных изображений: размещайте эти элементы на полотне баннера, используя круглые или четные числа. Это поможет избежать пикселизации при уменьшении актива с помощью кода в процессе анимации..ppt/slide_7.jpg)
Дизайн, который нельзя делать
Использовать внешние файлы
Помните, мы рекомендовали использовать смарт-объекты? Вот еще одна причина: они намного лучше, чем использование внешних файлов. Извлечение из локального источника или облака может привести к отсутствию элементов, а их отслеживание приведет только к задержкам.
Слияние и сведение изображений
Опять же, слои хороши! Итак, по возможности старайтесь не сглаживать и не объединять изображения. Это затрудняет редактирование или анимацию этих элементов по отдельности, что ограничивает ваши возможности дизайна.
Использовать режимы наложения
Режимы наложения не могут быть точно воспроизведены при экспорте изображений для анимации, поэтому они часто теряются при переводе. Рэндалл говорит: «Это особенно важно помнить для элементов, которым требуется определенный уровень прозрачности, таких как тени или высокий уровень детализации волос и меха».
Наличие плана резервного копирования
Допустим, вы читаете это, уже нарушив большинство этих правил, поэтому вы не можете предоставить рабочий файл для анимации. Все в порядке — мы можем работать с вашими экспортированными активами. Просто попробуйте предоставить каждый в виде отдельного полноразмерного PNG в правильном порядке. Не забудьте предоставить их в 2 раза больше размера исходного баннера и оптимизировать до веса ниже требуемых ограничений, чтобы они были готовы к высокому разрешению. (Для этого можно использовать такой сайт, как tinypng.com.)
Другие советы по анимации
Воплощая свои идеи в жизнь, помните о нескольких вещах. Во-первых, никогда не забывайте, как коротка продолжительность концентрации внимания потребителей. «Обязательно покажите свой продукт или основное сообщение в самых первых кадрах. Мы видим много отличного искусства от клиентов, но если эти важные элементы находятся только в конце вашего баннера, они могут никогда не быть замечены».
Ваш последний кадр также должен снова показывать ваше сообщение или продукт, чтобы он оставил зрителя с этими элементами в центре внимания. И не забудьте простой призыв к действию, чтобы стимулировать взаимодействие с вашим брендом. Чтобы наилучшим образом изложить все ваши идеи от начала до конца, мы рекомендуем создать раскадровку, чтобы ваше видение отображалось четко и все были на одной странице.
«Кроме того, чрезвычайно полезно указать любые творческие характеристики, такие как вес файла (вес в КБ), продолжительность анимации, тип устройства, на котором он будет отображаться, и т. д., потому что это информирует нас о технологических требованиях или ограничениях для плавного доставки», — объясняет Рэндалл. «Все эти рекомендации помогут вам создавать анимированные баннеры наиболее эффективным способом. Для нас это не только проще, но и помогает вам сэкономить время и деньги, создавая наиболее эффективные баннеры для вашей кампании.
«Нам нравится видеть, как статическая графика превращается в анимацию, но еще интереснее для нас с самого начала делиться своим опытом и помогать нашим клиентам превращать их идеи в максимально эффективные баннеры».
Если у вас есть собственная творческая команда или вы ищете дизайнеров, которые помогут вам воплотить ваши идеи в жизнь, свяжитесь с нашими экспертами для получения дополнительных полезных ресурсов по процессу проектирования и производства.
Еще сообщения
Представляем AI Prompt Analysis: как он поднимает творческий процесс на новый уровень
В сегодняшнем постоянно меняющемся производственном мире искусственный интеллект больше не фантастика, а замечательная реальность. Становится стандартом полагаться на искусственный интеллект (ИИ), который помогает нам отвечать на вопросы, писать код, создавать контент, создавать изображения и многое другое. Но в ближайшее время роботы полностью не возьмут на себя наш список дел. Вместо этого мы начинаем видеть все невероятные способы, которыми мы можем воспользоваться его возможностями для улучшения наших собственных внутренних процессов. И это не означает, что команды отходят на второй план; это означает повышение наших навыков.
Контент, созданный искусственным интеллектом, и человеческий фактор
Кажется, еще вчера роботы были предметом научно-фантастических фильмов и мультфильмов. Но точно так же теперь они помогают нам писать статьи, создавать изображения и снимать видео. Конечно, мы не совсем готовы нанять их на полный рабочий день, но мы получаем действительно хорошее представление о некоторых вещах, которые мы можем ожидать от искусственного интеллекта (ИИ) в мире цифрового производства. Поэтому мы проверяем, что мы в настоящее время знаем о контенте, создаваемом ИИ, и как подготовить ваши команды к тому, что будет дальше
В центре внимания: Фрэн Рейес
Мое утро начинается с того, что я подвожу итоги предыдущего дня, а затем погружаюсь в самые важные задачи на текущий день. Мне нравится связываться с нашими дизайнерами и убеждаться, что назначенные им задания совершенно ясны и у них есть все необходимое для их выполнения. Остальную часть дня я трачу на встречи и встречи, как внутренние, так и с клиентами, и проверяю, чтобы все, что было в списке дел, было отмечено и доставлено туда, куда нужно, чтобы мы могли сделать все это.
завтра опять!
Геймификация в рекламе: Интервью на сеансах доставки с Деймоном Харманом, основателем / директором по контенту / стратегией партнерства с брендом в Integrated Content
Геймификация. Сейчас это очень модное слово для рекламодателей. Мы всегда думали о мире игр как о полном бегстве от реального мира, в котором мы живем, но в последнее время эти миры начинают смешиваться более творчески, чем когда-либо прежде.
Пример клиентского модульного веб-сайтаКогда многонациональной гостиничной компании понадобилась быстрая работа над новым веб-сайтом для одного из своих новых офисов, они обратились в Assemble. Чтобы уложиться в сжатые сроки производства, в дополнение к постоянно меняющимся расценкам и удобствам, им требовался сайт, который давал бы их команде возможность добавлять обновления, вносить изменения и создавать новые страницы — без какого-либо опыта кодирования или разработки.
Сборка 2023 Digital Outlook Пролетел еще один год захватывающих изменений в цифровом мире.
Но если есть что-то, на что вы всегда можете рассчитывать в такой постоянно развивающейся отрасли, как наша, так это то, что Assemble будет каждый год освещать все самые последние и самые важные обновления для маркетологов в нашем ежегодном блоге Digital Outlook.
Так как вы готовитесь к успешному 2023 году, мы предлагаем вам ознакомиться с 12 главными тенденциями, которые, как вы увидите, окажут большое влияние в этом году — и вы должны начать использовать их прямо сейчас.
анимированных объявлений HTML5 | Bannerwise
Простое производство, красивые объявления HTML5
Наконец-то у вас есть возможность создавать анимированные объявления HTML5 без каких-либо навыков программирования. Благодаря нашему интуитивно понятному конструктору объявлений с функцией перетаскивания и предустановленным анимациям у вас есть инструменты для создания рекламы за считанные минуты, что значительно экономит ваше время на производстве.
Создайте свою медийную рекламу за считанные минуты
Интуитивно понятный конструктор объявлений с функцией перетаскивания
Гибкие предустановленные анимации
Любой размер объявления, который вам нужен, одним щелчком мыши
Ускорьте свой рабочий процесс, автоматически создавая любые размеры объявлений, которые вам нужны, непосредственно из основного объявления.
С нашим интеллектуальным алгоритмом вы можете просто выбрать нужные вам размеры, и все элементы будут размещены правильно. Вот как вы легко создаете полные наборы объявлений.Автомасштабирование до любого размера
Каждый элемент автоматически подстраивается под определенный размер
Внесите масштабные изменения
Не тратьте время на внесение одних и тех же небольших корректировок для каждого объявления в группе объявлений по отдельности. С помощью Bannerwise вы можете редактировать все креативы в своей группе объявлений одновременно. Не убивайте свою продуктивность, тратя время на повторяющиеся и ручные задачи.
Редактировать все размеры за один раз
Сэкономьте значительное время на производстве
Всегда будьте в курсе бренда с помощью объявлений HTML5
Объедините дизайн и маркетинг, создав собственные уникальные фирменные шаблоны.
Вы будете контролировать, что можно редактировать, «блокируя» определенные элементы, защищая свой бренд, позволяя дизайнерам сосредоточиться на творчестве, а маркетинг работать независимо.Нет больше нефирменной рекламы
Работает со всеми типами объявлений
Публикация без проблем
Все ваши объявления всегда будут иметь правильные характеристики, независимо от того, в каких сетях вы публикуете. У вас есть свобода выбора: отправляйте напрямую через интеграцию с API, просто загружайте свои креативы или используйте сторонние теги. Запустите свои креативы за считанные минуты и никогда больше не пропускайте крайний срок кампании.
Неограниченное количество публикаций без дополнительной оплаты
Напрямую через API
Креативы, полностью совместимые с сетью
Начните создавать пиксельную анимированную рекламу HTML5
Прекрасные креативы, созданные нашими клиентами
Посмотрите несколько реальных примеров креативов, созданных в Bannerwise.
