[Видео] Создание HTML5 баннеров для рекламы в Google Web Designer

Руководство по созданию анимированных HTML5 баннеров для Яндекс.Директа, Google Рекламы и других рекламных сервисов с помощью Google Web Designer.

Данное видео — часть лекции из моего курса по основам контекстной рекламы в системах Яндекс.Директ и Google Ads (2019).

Как часто вам приходилось ставить техническое задание веб-дизайнеру на разработку графических объявлений для контекстной рекламы в Яндекс.Директ и Google Реклама? Нечасто? Тогда, скорее всего, вы пользуетесь встроенным конструктором Яндекса, который позволяет автоматически создавать графические объявления в различных размерах (1000×120, 728×90, 480×320, 336×280 и т.д.), или не используете графические объявления в принципе.

Конструктор креативов в Яндекс.Директе

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

Адаптивные медийные объявления в Google Рекламе

Бывает такое, что изображения на сайте не находятся. Тогда их можно загрузить с компьютера или из фотобанка. Но можно поступить хитрее – создать графические объявления в Яндекс через конструктор, а далее выгрузить полученные изображения и загрузить баннеры в Google Ads. Однако есть различия в размерах графических объявлений. Те, которые подходят для Яндекса, не всегда подходят для Google, и наоборот. Лучший вариант – один раз заказать у специалиста креатив в различных размерах, отдельно для Google Рекламы, отдельно для Яндекс.Директ, и на время забыть об этом.

Все это верно, когда речь идет о статических объявлениях. Но самые «продвинутые» компании и рекламодатели используют в продвижении своих продуктов не только изображения, но и динамические форматы –

видео, gif-ки, флеш, HTML5. О последнем формате контента и будем говорить подробнее.

HTML5 баннер — комбинация HTML-элементов с применением анимаций и хорошего визуального оформления, адаптированных под любые устройства и браузеры.

Примеры HTML5 баннеров

Главным отличием HTML от других типов баннеров является то, что:

  • они показываются одинаково на всех типах устройств;
  • они меньше весят и быстрее загружаются, чем тот же flash;
  • HTML5 предоставляет больше возможностей для добавления в баннер различных интерактивных элементов — форм, кнопок, полей и т.д.;
  • HTML5 – тренд у специалистов по трафику последних 2-3 лет. Те, кто разбирался в HTML, CSS и JavaScript, имел существенное преимущество по сравнению с другими.

Ключевое слово – ИМЕЛ. С появлением на рынке продукта Google Web Designer ситуация существенно поменялась. Теперь каждый из нас может легко создавать интерактивные объявления для контекстной рекламы без дополнительных знаний в HTML, CSS и JavaScript.

Что такое Google Web Designer?

Google Web Designer (GWD) – это бесплатная программа (выпущена в 2013 году), которая позволяет создавать объявления в формате HTML5. Мы будем использовать ее для создания стильных анимированных объявлений в Яндекс.Директ и Google Ads под все типы устройств.

В GWD есть как редактор кода, так и визуальный редактор. В визуальном редакторе можно создавать изображения с помощью инструментов рисования, добавлять текст и трехмерные объекты, а также анимировать элементы и события на временной шкале. В редакторе кода можно создавать файлы CSS, JavaScript, и XML.

Переходим к скачиванию программы. Зайдите на сайт и нажмите на кнопку Скачать Google Web Designer.

Google Web Designer

Поддерживаются Mac OS 10.10 (и более поздних версий), Windows 7 (и более поздних версий), 64-разрядная версия Linux (Debian/Ubuntu/Fedora/openSUSE). Подробнее о системных требованиях здесь.

На следующем шаге примите пользовательское соглашение. Начнется автоматическая загрузка, после которой вам нужно будет установить программу на свой компьютер. После установки Google Web Designer поприветствует диалоговым окном, в котором можно:

  • создать новый файл;
  • использовать готовый шаблон объявления;
  • открыть существующий файл;
  • обратиться к справке Google.

Объявления HTML5 в Google Рекламе доступны не для всех рекламодателей. Вы можете отправить запрос на использование объявлений HTML5, если ваш аккаунт отвечает следующим требованиям:

  • имеет хорошую репутацию в отношении соблюдения правил;
  • имеет хорошую репутацию в отношении оплаты рекламных услуг;
  • общая сумма потраченных средств за все время существования аккаунта составляет не менее 1000$.

Ваша заявка будет рассмотрена командой Google Рекламы в течение примерно 5-7 рабочих дней, после чего вы получите уведомление по электронной почте. А пока вы можете использовать объявления AMPHTML и адаптивные медийные объявления.

Виды YouTube баннеров и для чего они нужны. Изготовление баннеров

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

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

Виды YouTube-баннеров

YouTube-баннеры как правило соответствуют тематике каналов, на которых они используются. Это могут быть просто красивые картинки, Ваше имя, логитип или фото владельца канала. Качественные профессионалные баннеры отличается тем, что их главной целью является привлечь внимание к вашему каналу и заинтересовать потенциальных подписчиков. В шапке YouTube канала может присутствовать:

  • тематика канала
  • фотография
  • график выхода видео
  • преимущества
  • призыв подписаться или учавствовать в чем-либо
  • логотип
  • социальные сети

Чтобы создать качественный баннер для Ютуб-канала следует пользоваться некоторыми правилами:

  • шапка должна содержать основную информацию канала
  • нельзя перегружать основной баннер информацией
  • баннер не должен быть слишком ярким, чтобы не отвлекать внимание от основного видео-контента
  • изображения, используемые в баннере должны быть хорошего качества
  • необходимо соблюдать рекомендуемые размеры YouTube баннеров

Размеры шапки для YouTube канала

Самый оптимальный и наиболее востребованный размер баннера для канала — 2560 х 1440 px. Используя такое разрешение вы получите такую шапку, которая будет без искажений отображаться на любом устройстве. YouTube использует адаптивную верстку страниц, что позволяет динамически масштабировать ваш баннер для корректного просмотра как на 4К мониторе, так и на смартфоне. При разработке Ютуб-баннера следует учитывать размеры зон баннера, видимые на различных устройствах. Например, зона видимости экранов телевизоров — 2560 х 1440 px, больших мониторов компьютеров — 2560 x 423 px, планшетов — 1855 х 423 px, мобильных устройств и небольших экранов — 1546 х 423 px — именно эта зона является безопасной, то есть здесь должны находится основные элементы баннера.

Как самому оформить YouTube канал

Если вы не очень хорошо владеете профессиональными графическими редакторами, то это не беда. Без лишнего труда вы можете сами сделать красивые и привлекательные баннеры-обложки для вашего ютьюб канала самостоятельно. Для этого достаточно воспользоваться онлайн-сервисом. Для этих целей мы рекомендуем популярный и мощный сервис — Canva — на нем вы можете легко и просто оформить YouTube канал. Чтобы сделать красивую достойную работу — не обязательно потратить несколько недель на изучение фотошопа 😉


Баннер для продвижения YouTube канала

Иногда бывает, что нет времени на самостоятельное оформление канала — есть дела поважнее. Тогда самое время обратиться к профессионалам этого дела — и заказать изготовление баннеров-обложек в дизайн-студии. Основной функцией правильно оформленной шапки канала является привлечение потенциальных подписчиков для вашего канала, поэтому очень важно, чтобы он был ярким, стильным и лаконичным. Мы занимаемся созданием баннеров различных видов и любой сложности. Закажите дизайн YouTube-баннера у нас и получите красочный приветственный баннер, который сделает ваш канал уникальным и запоминающимся.

Количество просмотров: 3 909

Поделиться в соцсетях:

Мастеринг видеобаннеров для сайтов

Мастеринг видеобаннеров для сайтов

Посмотрим правде в глаза — нет ничего более приятного и увлекательного для веб-сайта, чем наличие видеобаннера. Это идеальное сочетание способности рассказывать истории и творчества для любого веб-сайта. Но как создать идеальный видеобаннер? В этом блоге мы рассмотрим 3 совета по созданию видеобаннеров, которые произведут впечатление на любого, кто посетит ваш сайт.

Выбрать единую цветовую схему

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

Например, при разработке видеобаннера для Café Blue Dream — CBD-кафе в Эймсбери, штат Массачусетс — мы подчеркнули их основной цвет повсюду в баннере.

Ограничение размера и длины

Пожалуйста, не снимайте 45-минутный документальный фильм о своем бизнесе и не загружайте его на свой сайт в виде видеобаннера. Довольно, пожалуйста. С сахаром сверху . Средняя продолжительность посещения веб-сайта составляет менее 15 секунд. Это означает, что у вас есть считанные минуты, чтобы произвести положительное впечатление и дать им повод захотеть остаться подольше. Увлекательный набор видеокадров намного лучше, чем попытка втиснуть видео PowerPoint в баннер веб-сайта.

Кроме того, вы должны учитывать размер баннера. Баннерное видео — это быстрый способ замедлить работу вашего сайта, если оно сделано неправильно. Вам нужно оптимизировать видео для веб-дизайна — оставьте его размером около нескольких мегабайт и продолжительностью менее 30 секунд — иначе видео, скорее всего, принесет больше вреда, чем пользы.

Используйте только качественные кадры

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

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

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

Видео рассказывает историю. И если все сделано правильно, это может стать идеальным способом установить связь с посетителями вашего сайта. Следуя этим трем простым советам, будет относительно легко создать видеобаннер, отражающий вашу компанию — от ее целей до стремлений — и производящий неизгладимое впечатление на посетителей вашего сайта. В конце концов, разве это не цель вашего сайта?

 

Расскажите миру свою историю

 

Нужна помощь с услугами видеомаркетинга? Свяжись с нами.

 

Mintleaf — креативное маркетинговое агентство, расположенное на средней улице в Портсмуте, штат Нью-Гэмпшир. Он обслуживает регион Большого побережья и специализируется на видеосъемке, контент-маркетинге, социальных сетях и веб-дизайне.

Как сделать фоновое видео для главной страницы вашего сайта

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

Что я должен включить в фоновое видео моей домашней страницы?

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

  • Элементы брендинга: Убедитесь, что вы показываете пользователям, что они нашли ваш бренд, используя согласованные элементы, такие как логотип, цветовая схема и внешний вид.
  • Заявление о ценности бренда: Что вы предлагаете и чем вы отличаетесь? Не забудьте попытаться свести ваш бренд к основам, чтобы даже те, у кого есть склонность к снятию сливок, ушли с правильным сообщением. Если вы уверены, что включить, рассмотрите пять «W» — кто, что, где, когда и почему — чтобы охватить все ваши основы.
  • Индивидуальность бренда: Ваш бренд игривый и веселый или серьезный и элегантный? Убедитесь, что ваш контент отражает вашу атмосферу! Это поможет дать вашим клиентам сплоченный опыт и ускорить узнаваемость вашего бренда.

Знаете ли вы?

Люди проводят на сайтах с видео до 88% больше времени.

Вы также захотите включить основные функции взаимодействия с пользователем, такие как:

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

Как дизайнер, я очень забочусь о представлении и опыте, который получают наши клиенты, просматривая наш контент или просматривая наш сайт. Функции Vimeo по умолчанию создают красивый видеоплеер».

Анна Консен, дизайнер Bloomscape

Примеры фонового видео для веб-сайтов, которые мы любим

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

Y.Co

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

Медиабум

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

Patagonia

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

Как сделать фоновое видео для веб-сайта

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

1. Выберите шаблон в Vimeo Create.

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

2. Загрузите отснятый материал (или скачайте его из нашей библиотеки)

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

Съемка собственного фонового видео

Если вы хотите продемонстрировать свой реальный продукт, рабочее место или сотрудников, вы можете потратить время и деньги, чтобы снять персонализированное видео для фона вашего веб-сайта. Просто не забудьте отдавать приоритет качеству и видео в высоком разрешении, если вы собираетесь заниматься своими руками. Вы хотите произвести наилучшее первое впечатление!

Использование стоковых видеороликов для фона веб-сайта

Если ваши личные кадры не совсем на высоте (или у вас просто нет времени, мы это понимаем) — вы можете использовать наше предварительно загруженное стоковое видео в качестве фона вашего сайта. Мы предлагаем тысячи бесплатных видеороликов, созданных одними из ведущих онлайн-создателей, и мы уверены, что вы сможете найти идеальное видео для захвата изображения, которое вы хотели бы изобразить.

3. Настройте по своему вкусу

Vimeo Create позволяет добавлять текст, собственный фирменный стиль (включая логотип!) и многое другое. Просто обрежьте видео до нужной длины, добавьте любой соответствующий текст и наклейки с изображениями, и все готово. Это делает добавление текстовых CTA очень простым, поэтому встроить их в свой веб-сайт проще, чем когда-либо.

4. Сохраняйте и делитесь!

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

Как встроить фоновое видео веб-сайта:

Чтобы ваше встраивание выглядело превосходно, пользователи Vimeo любого платного уровня могут скрыть элементы проигрывателя Vimeo и полностью убрать кнопку воспроизведения и индикатор выполнения. Таким образом, вы можете получить чистое полноэкранное видео, необходимое для фона веб-сайта.

  1. Чтобы встроить фоновое видео, сгенерируйте код для встраивания и добавьте параметр «?background=1» в конец URL-адреса. Это отключит все переключатели проигрывателя, поместит видео в автоматический цикл, настроит автоматическое воспроизведение видео и обеспечит приглушение звука видео. В принципе, все, что вам нужно для создания видео фона!
  2. Если вы хотите, чтобы ваш фоновый видеоролик имел звук, просто добавьте параметр «muted=0» в свой код для встраивания. Чтобы узнать больше об использовании Vimeo для встраивания фоновых видео, ознакомьтесь с нашим полным подробным руководством.

Как мне сделать видео для моего сайта?

Существует множество способов создать видео, которое можно разместить на главной странице или на вашем веб-сайте.

Vimeo Create предлагает множество бесконечно настраиваемых шаблонов, упрощающих работу.

Краткие советы для фонового видео

  1. Используйте короткий цикл видео : Лучшие фоновые видео обычно представляют собой относительно короткие циклы. Выбирайте видео, которые могут предложить плавный, бесконечный цикл, рассказывающий историю или передающий изображение. (Кроме того, длинные видео могут сделать время загрузки вашего сайта медленным, что плохо для пользователей и SEO!
  2. Не торопитесь выбирать правильное видео : Выбор видео, которое не передает правильное сообщение, хуже чем вообще не использовать видео. Не торопитесь, чтобы выбрать качественное видео с релевантными изображениями, которые соответствуют тону, который вы ищете.
  3. Меньше, как правило, больше : Хотя легко увлечься использованием самых передовых наворотов на своем веб-сайте, убедитесь, что фоновое видео не отвлекает внимание от основной цели вашего сайта. Суперкрутое видео бесполезно, если оно приводит к более высокому показателю отказов или сбивает пользователя с толку. Вы также хотите убедиться, что ваши посетители по-прежнему могут читать копию, перемещаться по сайту и отвечать на CTA.

Создайте свой собственный фон для видео

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

No related posts.