2494 подписчика

Google Web Designer: пошаговая инструкция по созданию HTML5 баннеров

4 минуты

1206 прочтений

17 февраля 2020

Google Web Designer — это бесплатный софт для веб-дизайнеров, позволяющая создавать баннеры и страницы в стандарте HTML5 и CSS3.

Что такое HTML5 баннеры?

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

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

Пример HTML5 баннера (из пошаговой инструкции)

https://seopulses.ru/for-banner/banner-netpeak-new.html

Шаблоны в Google Web Designer

Само приложени:

https://webdesigner.withgoogle.com/

При создании баннера будет предложено:

Создать файл с нуля;
Использовать шаблон.

Среди доступных шаблонов:

Динамический ремаркетинг. Один из самых популярных шаблонов для показа сразу нескольких предложений (товаров или услуг). Например, можно показывать туры, недвижимость, автомобили, товары, авиабилеты и многое другое;
App Install. Поможет при создании креатива для рекламы мобильного предложения;
Banner for Display. Специальный формат, который может быть размещен на каждом сайте;
Баннер для Google Ads и AdMob. Универсальный формат, легко продвигающийся среди мобильных устройств.
Data Driven. Показывает по очереди преимущества бренда;
Demonstration. Баннер с интерактивными элементами, например, вывод текста при наведении;
Expandable. Показывает один большой баннер и несколько маленьких, позволяя продвигать связные товары/услуги;
Floating. Редкий формат, показывающийся только на ПК;
In-stream video. Показ видео вместо баннера, что становится достаточно популярным;
Interstitial & in-app. Баннер для планшетов для продвижения мобильных приложений;
Lightbox. Универсальный формат, способный использовать видео, карты и картинки для продвижения товаров и услуг;
Parallax. Создает красивую иллюзию сразу нескольких слоев и обладает быстрой скоростью загрузки;
Rising star. Редкий формат для компьютеров, создающий интерактивный эффект.

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

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

При нажатии на кнопку «Предпросмотр» появляется возможность подобрать другой размер для данного шаблона и при необходимости открыть пример в браузере (например, Google Chrome).

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

Инструкция по созданию баннеров HTML5 в Google Web Designer

В качестве примера создадим баннер для двух инструментов Netpeak:

Spider;
Cheker.

Мы будем использоваться баннер 300*600 пикселей, для чего потребуется в блоке «Свойства» изменить соответствующие поля.

После в блоке «Библиотека объектов» загрузим все составные части для нашего проекта это:

Задний фон;
Логотип Netpeak Software;
Логотип Netpeak Spider;
Логотип Netpeak Checker;
Лого Netpeak.

Для этого кликаем правой клавишей мыши и выбираем «Добавить объект».

После загружаем все необходимые части.

Далее расставляем составные части по нужным местам (при необходимости изменяя их размеры, через «Свойства»).

Добавляем текст к баннеру через панель инструментов.

В итоге получаем такой баннер.

Теперь потребуется расставить кнопки для перенаправления на нужные страницы, для чего кликаем правой клавишей мыши на нужный объект и выбираем «Добавить событие».